{"id":14,"date":"2014-02-19T19:39:39","date_gmt":"2014-02-19T19:39:39","guid":{"rendered":"http:\/\/jenrefat.com\/blog\/?p=14"},"modified":"2015-07-15T15:57:28","modified_gmt":"2015-07-15T15:57:28","slug":"14","status":"publish","type":"post","link":"https:\/\/jenrefat.com\/blog\/2014\/02\/19\/14\/","title":{"rendered":"Integrating WordPress Into An Existing Design"},"content":{"rendered":"

(photo from Wallflower Wonderland<\/a>)<\/em><\/p>\n

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

Despite all the Youtube videos and long winded posts, it’s surprisingly easy and quick to start customizing it.\u00a0
\n<\/span><\/p>\n

All you need to know is that you cannot <\/strong>edit existing themes directly. \u00a0You’re creating a duplicate theme that inherits and then overrides the settings as you see fit. \u00a0This is due to the fact that you’ll update the parent theme eventually and all changes will be overwritten.<\/p>\n

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”). \u00a0All you need to create a child theme is to create this folder and add a style.css file. \u00a0That’s it! \u00a0The rest of the customization is primarily in the header and footer – found in header.php and footer.php, respectively. \u00a0Duplicate these files in the child folder from the parent theme and edit them to include your site’s markup. \u00a0The same goes for just about all other template files – index.php (homepage), page.php (individual post), etc. \u00a0For more details, read the Child Themes<\/a> section in the WordPress docs.<\/p>\n

To override CSS styles, include the following in your style.css file:<\/p>\n

\/*
\nTheme Name: TwentyTwelve Child Theme
\nTemplate: twentytwelve
\nVersion: 0.1.0
\n*\/<\/p>\n

@import url(“..\/twentytwelve\/style.css”);
\n@import url(“\/css\/yoursite.css”);<\/p>\n

Hope this helps \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

(photo from Wallflower Wonderland) So, you have an existing website and decided to add a blog section. \u00a0You’ve installed WordPress and now there’s a default themed blog at yoursite.com\/blog. \u00a0How 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 […]<\/p>\n","protected":false},"author":1,"featured_media":16,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13],"tags":[],"class_list":["post-14","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-howto"],"_links":{"self":[{"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/posts\/14","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/comments?post=14"}],"version-history":[{"count":10,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions"}],"predecessor-version":[{"id":157,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/posts\/14\/revisions\/157"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/media\/16"}],"wp:attachment":[{"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/media?parent=14"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/categories?post=14"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jenrefat.com\/blog\/wp-json\/wp\/v2\/tags?post=14"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}