Jengineer - Ponderings & Discoveries

Integrating WordPress Into An Existing Design

(photo from Wallflower Wonderland)

So, you have an existing website and decided to add a blog section.  You’ve installed WordPress and now there’s a default themed blog at yoursite.com/blog.  How to go about integrating your blog into the existing site’s template?

Despite all the Youtube videos and long winded posts, it’s surprisingly easy and quick to start customizing it. 

All you need to know is that you cannot edit existing themes directly.  You’re creating a duplicate theme that inherits and then overrides the settings as you see fit.  This is due to the fact that you’ll update the parent theme eventually and all changes will be overwritten.

In /wp-content/themes, create a new folder with the name of your preferred theme and append “-child” to it (I used the “twentytwelve” theme as my base so my child theme is “twentytwelve-child”).  All you need to create a child theme is to create this folder and add a style.css file.  That’s it!  The rest of the customization is primarily in the header and footer – found in header.php and footer.php, respectively.  Duplicate these files in the child folder from the parent theme and edit them to include your site’s markup.  The same goes for just about all other template files – index.php (homepage), page.php (individual post), etc.  For more details, read the Child Themes section in the WordPress docs.

To override CSS styles, include the following in your style.css file:

/*
Theme Name: TwentyTwelve Child Theme
Template: twentytwelve
Version: 0.1.0
*/

@import url(“../twentytwelve/style.css”);
@import url(“/css/yoursite.css”);

Hope this helps 🙂