Monthly Archives: February 2014

What did you learn yesterday/this week?

I’ve been reading up on Paper JS and D3.js.  It’s for research purposes to work on an interactive tool to design your own granny square blanket (I’m a crafter at heart).   Currently working through tutorials to see which one is right for this project, if they are.  Otherwise, I may write something from scratch or use Ember JS to handle the interactivity.

What’re you working on?

Learning by Teaching

The best way to keep learning is by teaching, right?  I’ll be trying out a little experiment on this blog for the next few weeks.  I will pick a topic relating to the frontend, the backend or general CS concepts.  Instead of regurgitating what is already in reference books/articles, I will give the formal definition as well as my own take on it.  Not sure what that is quite yet but that’s what this space is for!  Stay tuned 🙂

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 🙂