Call us Toll-Free:
1-800-218-1525
Live ChatEmail us

 Sponsors

Basic Web 2.0 Website Template

Dawn Rossi, 06-24-2009
10 years ago, a typical website included about 6 pages, with a home, about us, contact, privacy policy, terms & conditions and FAQ page.

While these are still Must have pages, nowadays, every decent website is expected to feature a blog / forum, photos, videos, social network links and do a better job of "telling the company's story", showing the people behind the site.

I was looking for a simple "push-button" solution to create a skeleton of such a site, but couldn't find one.

SPI does offer thousands of pre-made website templates, as well as custom website development, but I wanted a simple fully-functional template to help new clients get a quick-start with their websites.

Since I couldn't find any existing solution, I went ahead and created one, that covers it all:



* a complete website with a clean "Web 2.0" look&feel,
* Wordpress blog,
* vBulletin Forum,
* Social-network links,
* Navigation menu and
* Contact form

You can use my template to get this setup live, in 30 minutes or less.

Step 1: Register your profile on the social networks

Signup for Facebook, Youtube, Twitter, Digg, LinkedIn, TwitThis and FeedBurner.

Record your username (you'll need it later)

Step 2: Create Logo, Banner & Avatar

You're going to need a unique logo design and nice banner for your new website. Use these image specs and file names -

Top logo logo.png Dimensions: 240x88
Footer logo logo-footer.png Dimensions: 170x66
Post avatar post-avatar.png Dimensions: 24x51
Menu avatar menu-avatar.png Dimensions: 19x23
Top banner top-banner.png Dimensions: 728x90

Step 3: Install Website template

Download the web 2.0 website template

Extract it to your main website folder

The template includes easy to modify top.php, bottom.php and sidebar.php files, that control the header, menu system, footer and sidebar links. These three files are included on all pages.

Note: You can get the latest version of WordPress here. To keep this process streamlined, I've included WordPress as part of the zip file.

Step 4: Install Wordpress

WordPress is located under the /blog folder

Open the /blog/wp-config.php file and update it with your database settings (You'll have to change DB_NAME, DB_USER, DB_PASSWORD, DB_HOST)

If you installed the latest version of WordPress (as opposed to use the version included in the zip file), you'll have to make these additional changes:

(a) Install WordPress by pointing your browser to http://www.YOURDOMAIN.com/blog/wp-admin/install.php and follow the on screen instructions

(b) Update blog/wp-content/themes/default/header.php to:


require_once($_SERVER['DOCUMENT_ROOT']."/top.php"); 

(c) Update blog/wp-content/themes/default/footer.php to:


require_once($_SERVER['DOCUMENT_ROOT']."/sidebar.php");
require_once(
$_SERVER['DOCUMENT_ROOT']."/bottom.php");

(d) Update blog/wp-content/themes/default/sidebar.php to:


return;

(e) Update blog/wp-content/themes/default/index.php to:


<?php
get_header
(); ?>

  <div id="content" class="narrowcolumn" role="main">

  <?php if (have_posts()) : ?>

    <?php while (have_posts()) : the_post(); ?>

      <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php
        the_title_attribute
(); ?>"><?php the_title(); ?></a></h2>
        <small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

        <div class="entry">
          <?php the_content('Read the rest of this entry '); ?>
        </div>

        <p class="postmetadata">

          <ul class="foot">
            <li class="alpha"><?php edit_post_link('Edit', '', ' | '); ?> <?php
            comments_popup_link
('No Comments ',
           
'1 Comment. Join the discussion ', '% Comments '); ?>  </li>
            <li class="beta">
              <ul class="liaison">
                <li class="rss"><a href="<?=$RSSURL?>">RSS</a></li>
<li class="twitter"><script type="text/javascript" src="/js/twitthis.js"></script>
<script type="text/javascript">document.write('<a href="javascript:;" onclick="TwitThis.pop();">TwitThis</a>');</script></li>
                <li class="email"><a href="/contact">Email</a></li>
              </ul>
            </li>
          </ul>

        </p>
      </div>

    <?php endwhile; ?>

    <div class="navigation">
      <div class="alignleft"><?php next_posts_link(' Older Entries') ?></div>
      <div class="alignright"><?php previous_posts_link('Newer Entries ') ?></div>
    </div>

  <?php else : ?>

    <h2 class="center">Not Found</h2>
    <p class="center">Sorry, but you are looking for something that isn't here.</p>
    <?php get_search_form(); ?>

  <?php endif; ?>

  </div>

<?php get_footer(); ?>

Step 5: Install vBulletin

Purchase a license to vBulletin ($180) and download it from http://members.vbulletin.com

Extract vbulletin to a /forum folder on your server, then follow these steps:

(a) Rename includes/config.php.new to includes/config.php and update 'dbname', 'servername', 'username', 'password' with your database details.

(b) Open www.YOURDOMAIN.com/forum/install/install.php in your browser and follow the on-screen instructions (you'll need your vBulletin customer number to continue)

(c) Update the fetch_gzipped_text() function under forum/includes/functions.php to:


function fetch_gzipped_text($text, $level = 1)
{
return
$text;
}

(d) Open forum/global.php and locate this section in the file:


eval('$headinclude = "' . fetch_template('headinclude') . '";');
eval(
'$header = "' . fetch_template('header') . '";');
eval(
'$footer = "' . fetch_template('footer') . '";');

Replace these 3 lines with this section:


@ob_start();   
require(
"../top.php");
$buf = @ob_get_contents();
@
ob_end_clean(); 
eval(
'$header = "$buf";'); 
$header .= "<div><div><div>";
@
ob_start();     
require(
"../sidebar.php");
$buf = @ob_get_contents();   
@
ob_end_clean(); 
@
ob_start();       
require(
"../bottom.php");
$buf .= @ob_get_contents();
@
ob_end_clean();
eval(
'$footer = "$buf";');
$footer = "</div></div></div>".$footer;
eval(
'$headinclude = "";');


Step 6: Update images

Update the images in the /images folder with the ones you created in step 2

Step 7: Update company name, links

Update config.php with your company name, tagline, keywords and social network usernames.

It's important to set all the usernames as these will get populated on all of your pages. If you don't want to use a specific network, make sure you update bottom.php and top.php

-

In the future, I will update this template to include a built-in image gallery, the SPI FAQ service, the SPI Helpdesk service, Customer back-office and a video links manager.

Michel Nadeau, 07-13-2009
Instead of modifying the fetch_gzipped_text() function, I suggest the following SQL commands in the forum database:

UPDATE setting SET value = '0' WHERE varname = 'gzipoutput';

UPDATE datastore SET data=REPLACE(data,'s:10:"gzipoutput";i:1;','s:10:" gzipoutput";i:0;') WHERE title='options';

These commands will turn off the GZIP options in vBulletin, which are our problem.

Also, just for clarity, I suggest to modify the tableprefix setting in config.php (BEFORE proceeding with the install) for something like "vb_" - it will prefix all the tables with "vb_", making them a lot easier to find.

Extracting Data From Web, 08-23-2010
I just wanted to comment your blog and say that I really enjoyed reading your blog post here. It was very informative and I also digg the way you write! Keep it up and I’ll be back to read more soon mate.

Matt, 02-17-2011
Great post, Dawn, and thank you for your efforts. It really shows how the web and website requirements have evolved to keep up with technology and social media.
Enjoyed this post?

Subscribe Now to receive new posts via Email as soon as they come out.

 Comments
Post your comments












Note: No link spamming! If your message contains link/s, it will NOT be published on the site before manually approved by one of our moderators.



About Us  |  Contact us  |  Privacy Policy  |  Terms & Conditions