Tutorial: How to Integrate Wordpress into an Existing Website

Note: In May of 2007, I finished up work on an update to this tutorial for Wordpress 2.x. Link: How to Create a Wordpress Theme - A huge thanks to all those who've sent in suggestions and improvements over the past few years since I first put together this humble little guide. I couldn't have done it without your help.

WordPress Consulting: Looking for professional help with your WordPress project? For small to medium sized projects, check out my freelance page For large projects, contact me through Sabramedia.

Alright, so here's my brief guide on how to integrate your own wordpress blog into a website and then play cleanup.

1. Build the site in PHP and CSS- Create a good solid site using PHP to include the content and CSS to control the layout (We're going to take our OWN CSS layout and simply match the blog with it). All of my layouts are controlled entirely without tables and though it takes a lot of work in the beginning, the incredibly wide range of flexibility it gives you in the end is totally worth it.

2. Download and then install the latest version of Wordpress - I used 1.5 in this example. I created the database on my server, updated the config.php file in the wordpress folder (which I renamed to blog) and then uploaded the whole deal. If you have fantastico available through your hosting provider (Check out the detailed buyer's guide), use that ;).

3. Check and make sure 'sall good - I viewed my /blog directory and yup, there she is.. the wordpress installation in its full untouched glory. Hehe.. not for long ;). The installation is good to go, I've updated my admin password and saved it in a secure location, and I'm ready.

4. Time to mod! - Alright, lets get down to it. What we're going to do is create our own Wordpress theme. Wordpress runs on themes and I've gotta hand it to the boys and girls who built wordpress, its done VERY well. So, this is what we're after:

With that in mind.. our goal is to develop a Wordpress theme that will "include" the rest of our site into it. Because we're using PHP and because this is all dynamic, it can all be done.

Alright, back to work!

5. Setup our theme workplace - Browse locally to wp-content/themes and copy/rename the "classic" theme. This is going to be our work area. Give it a name that reflects the site you intend to integrate it with. Edit the .css and change the "theme name" in the comments (not sure if this affects the installation, but it seemed to for me).. Then, upload your folder into your remote installation (your server). Finally, login to your Wordpress admin and then on over to "Presentation" and themes. "Install" your new theme. If its not there? Make sure you finished uploading it and that the folder has a unique name. Set your new theme to default, test it by visiting your blog (Your website and then /blog) and we're ready to roll.

6. Scary stuff: Modifying the theme - Alright, you've got the default working and that's great.. but we want it to look like OUR site! So, time to get messy.. For this, I'm using my own HEADER and my own CSS sheet. Alright, lets open up our theme's header.php (located in our theme's folder) and get busy. You should see all the lovely code. For this tutorial we only care about a few things. First, lets fix that CSS sheet:

Original:

<style type="text/css" media="screen">
@import url( <?php bloginfo('stylesheet_url'); ?> );
</style>

Our Mod:

<link href="http://www.yoursiteurl.com/style.css" rel="stylesheet" type="text/css" />

Great! Now lets keep going! Next we've got some CSS stuff to play with.

Original:

<body>
<div id="rap">
<h1 id="header"><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<div id="content">
<!-- end header -->

MY Mod:

<body>
<div id="container">
<div id="prop"></div>
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>

<!-- Begin header navigation -->
<?php include ('http://www.siteurl.com/headernav.php'); ?>
<!-- End header navigation -->

<!-- Begin RIGHT -->
<div id="right">

<!-- Begin main content -->
<div id="right_content">

For some of you, that may have just thrown you over the edge. For others, it makes perfect sense. Let me try and explain what just happened there for the benefit of the former. In my style sheet I have already defined "container", "right_content", "right", and all that good stuff. See, that's my CSS layout. The headernav.php there contains the images and links I use to control navigation within my header. All I'm doing here is taking the elements from my other pages and integrating them into my blog. If you have no clue what's going on there, refer to step 1.. You want to make sure that you have a solid PHP and CSS based site setup :).

NOTE: As I'm sure you can tell, this is NOT just going to walk you step-by-step through the process. You have to be willing to experiment on your own and WORK at it. If you really want someone to do it for you, get some money together and hire 'em :). This stakes work and believe me, its rewarding! OK, moving on.

header.php is DONE.

7. More scary stuff: Modifying index.php

This is definitely another one of those custom tweak things. What I've done is arranged all my main content within "right_content", which is defined within my CSS sheet. Now, since I ended my header.php file with the opening up of my right_content "div".. all of index.php is now displayed within that div, EXACTLY as I want it too.

There aren't a whole lot of mods I wanted to make to index. I decided to cut out the comments and so I sliced out this line:

<?php comments_popup_link(__('Comments (0)'), __('Comments (1)'), __('Comments (%)')); ?>

and this one:

<?php comments_template(); // Get wp-comments.php template ?>

Alright, now here's the big deal.. Take a look at <?php get_footer(); ?> .. see that baby? That's going to pull in our footer file.. and quite frankly, we're not ready for that. We opened up a "right_content" div for our main content and we've gotta close that off. So, BEFORE the 'get_footer' at the end of our index.php, I slapped the following in:

</div>
<!-- End main content -->

</div>
<!-- End RIGHT -->

<!-- Begin left navigation -->
<?php include ('http://www.yoursiteurl.com/leftnav.php?section=blog'); ?>
<!-- End left navigation -->

<div class="clear">&nbsp;</div>

</div>
<!-- End Container -->

Alright, at this point we're going to require some creative thinking. What I've done for this site may not be exactly what you've done for yours. Very quickly, here's an illustration of my site:

Layout Illustration

 

I've used CSS to control the layout for this site. All my main content is contained within "right_content" which is area 3 in the above illustration. Area two is controlled by leftnav.php and is my "left navigation". Later on, we're going to take some stuff from our blog and stick that on in there to further integrate the look and feel of our site.

And that concludes our index.php!

Note: You will need to repeat the same steps for single.php.

8. Even more scary stuff: Modifying footer.php - Alright, we're getting close to finishing this stuff up now, really.. not TOO far to go!

Original:

<!-- begin footer -->
</div>

<?php get_sidebar(); ?>

<p class="credit"><!--<?php echo $wpdb->num_queries; ?> queries. <?php timer_stop(1); ?> seconds. --> <cite><?php echo sprintf(__("Powered by <a href='http://wordpress.org' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?></cite></p>

</div>

<?php do_action('wp_footer'); ?>
</body>
</html>

MY Mod:

<!-- begin footer -->
</div>

<!-- Begin footer -->
<?php include ('http://www.amaezing.com/footernav.php?section=blog'); ?>
<!-- End footer -->

</div>

<?php do_action('wp_footer'); ?>
</body>
</html>

Now, a couple of key things here. I've taken the credits out of the footer and I can put them in my OWN footernav.php. If you don't want it to show up on all your pages it can work some PHP magic and assign a section or heck, just leave it in.

IMPORTANT: The other KEY thing here is that I have taken out <?php get_sidebar(); ?> and I have moved it to my leftnav.php file! Why? Because I want it to show up in area 2. We'll get to that in just a bit.

Alright, awesome! Header, index, and footer is all taken care of! You're linking to your own CSS sheet and so that's taken care of as well. Now, upload and lets see what you've got.

It may still be a bit messy but you should have a good idea of how things are going. Ready to move on? Awesome :).

9. Beginning Cleanup: Modifying sidebar.php

Alright.. this is where you start expressing some of your own creativity ;). What I did was quite simple.. I took the sidebar and just cut a LOT of stuff out of it. I'm designing this site for a client and I wanna keep things VERY simple. So, blogroll had to go and a good deal of the other stuff. Lets take a look:

Original:

<!-- begin sidebar -->
<div id="menu">

<ul>
<?php wp_list_pages(); ?>
<?php get_links_list(); ?>
<li id="categories"><?php _e('Categories:'); ?>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
<li id="search">
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>
<li id="meta"><?php _e('Meta:'); ?>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<li><a href="feed:<?php bloginfo('rss2_url'); ?>" title="<?php _e('Syndicate this site using RSS'); ?>"><?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="feed:<?php bloginfo('comments_rss2_url'); ?>" title="<?php _e('The latest comments to all posts in RSS'); ?>"><?php _e('Comments <abbr title="Really Simple Syndication">RSS</abbr>'); ?></a></li>
<li><a href="http://validator.w3.org/check/referer" title="<?php _e('This page validates as XHTML 1.0 Transitional'); ?>"><?php _e('Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr>'); ?></a></li>
<li><a href="http://gmpg.org/xfn/"><abbr title="XHTML Friends Network">XFN</abbr></a></li>
<li><a href="http://wordpress.org/" title="<?php _e('Powered by WordPress, state-of-the-art semantic personal publishing platform.'); ?>"><abbr title="WordPress">WP</abbr></a></li>
<?php wp_meta(); ?>
</ul>
</li>

</ul>

</div>
<!-- end sidebar -->

MY Mod:


<!-- begin sidebar -->
<div id="sidebar_menu">

<ul>

<li>
<ul>
<?php wp_register(); ?>
<li><?php wp_loginout(); ?></li>
<?php wp_meta(); ?>
</ul>
</li>
<br />
<li id="search">
<label for="s"><?php _e('Search:'); ?></label>
<form id="searchform" method="get" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<div>
<input type="text" name="s" id="s" size="15" /><br />
<input type="submit" value="<?php _e('Search'); ?>" />
</div>
</form>
</li>
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
</li>

</ul>

Wow, quite a difference. This is really something you've gotta do on your own. The IMPORTANT thing to remember is to make sure that if you cut something, that you cut all of it and that you KNOW what you're cutting. The wordpress guys have done an awesome job of making things very self explanatory, so it's not very hard to find stuff. Also, make SURE that you backup! Upload your changes and you'll know how you've done. Don't get discouraged if a PHP error comes at you.. take your time and look at it.. figure out what it could be. Often times its just the silliest little thing. Keep working at it!

Alright, now THAT is a wrap! Those are the basics. The public look is all nice and clean.

10. BONUS: Ending Cleaning up - Modifying the admin - I won't go into a lot of details here and this is an entire thing unto its own. I wanted to make things very very simple for my client so I decided to "cut out" a bunch of stuff in the admin panel I knew they wouldn't need. I did most of the cutting by adding '//' in front of the things I didn't want. I modified the files inside of wp-admin, which all control the content for the admin area. Some of the ones that are most important are:

index.php
menu.php
post.php

Here's a screenshot of one of my mods (Click for full size):

Administrative Mini

 

If you have any questions, just send me an email to sirjonathan@gmail.com. Have an awesome day!

- Jonathan Wold

 

Freelance Work: Looking for some help with WordPress? I'm available on a limited basis for WordPress freelance work! Amidst my business commitments and time with my beautiful wife and our new baby boy, I'm available for up to 3 projects a month. If I'm able to be a help to you and your project needs, I look forward to providing my services. Visit my WordPress freelance page to learn more.