Bookmark and Share
Check Google Page Rank Locations of visitors to this page
Click to get Free offers

Monday, June 16, 2008

Tutorial: How to Integrate Wordpress into an Existing Website

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, 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:

* A blog that looks like its a part of our site
* A blog that integrates seamlessly with our site
* A blog/admin interface that's cleaned up of alll the extra features we (or our client) won't need

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:
""


Our Mod:
"


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

Original:




"

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






"


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!

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:




?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>

?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>WordPress"), __("Powered by WordPress, state-of-the-art semantic personal publishing platform.")); ?>





?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>



MY Mod:





?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>




?>?>?>?>?>?>?>?>?>?>?>?>?>?>?>



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 ?>?>?>?>?>?>?>?>?>?>?>?>?>?>?> 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:





MY Mod:



View blog reactions

No comments: