How to integrate a WordPress blog into your HTML 5 responsive website?
*This post is now out of date. Our full site is now fully run via WordPress and has been since 2015. I’ll keep the post here for the tiny bit of help it may be for someone.
This is the question we found myself asking google a couple of days ago. I’d built up the latest website for our company over many, many late evenings and I was very happy with how it was looking. I’d considered using WordPress for the full site but was hesitant to use it after having issues with slow loading times on sites in the past. So I created the site using a responsive HTML5 template which used the excellent bootstrap system to allow the site to scale seamlessly to work on different device sized screens, it also used Adobe Dreamweaver template files ( dwt files) for the header and footer, allowing me to change just one file and update all the HTML pages in one move, a great setup.
When it came to adding a blog to the site, WordPress still seems to be far and away the best system to use, it has the massive pool of plugins to change what it can do, the apps for your phones, tablets and computers so you can blog on the go quickly and easily. All this adds together to help you to improve your SEO by making it easier to produce popular content on your site.
I had installed WordPress on our site at the www.stormystudio.com/blog address and put together a few posts. I then wanted to tackle the blogs look to integrate it with the look and style of our mainsite. I tried reading up WordPress’s own tutorials but soon got lost in a world of words that were a little beyond my own web skills. I then stumbled across this great tutorial. A little old now it took a little bit of tweaking to work with my setup, but it’s very well written and acheived the result you see on this blog now.There were a few areas in the tutorial that tripped me up, due to my setup and the tutorials age. With the help of the comments section and some pot luck tweaking files I finally got it all working as required.
Problem no.1: When creating the style.css for the wordpress blog page (part of the tutorial) I found that our current HTML website was missing a style.css file to be able to link to….but it had a good few other css files. I tried linknig to a few different css files until it worked. When linked correctly and testing the blog my background texture was seen at our blog address so I knew it had worked.
Problem no.2: My WordPress installation did’nt come with the TwentyTen theme and all the loop files required for the tutorial. The newer versions, Twenty Eleven and Twenty Twelve have similar files called ‘content’ and ‘content-link’ (instead of loop-attachment). I’m sure there is a way to use those files instead, but in the end I went in the wordpress dashboard, went to the themes tab, searched on the ‘installing themes’ page and installed TwentyTen, and then used the files as described in the tutorial.
Problem no.3: Our site is HTML5 website is built from responsive framework bootstrap, and instead of having header and footer php pages it has a layout.dwt file, which is a dreamweaver template file that allows me to change that and it update the header and footer in all my HTML pages. To make it work with this tutorial I jumped in and broke the layout file up into the 3 needed php files, mostly guessing where to copy and paste text from, upload and test until it worked… essentially taking everything from the very top of the dwt file to the the last tag/text referring to HEADER to make the site-header.php, from the very bottom to the highest text mentioning FOOTER for the site-footer.php and everything in the middle became our site-main.php (I called it site-middle.php). cutting around the description tags/text was a guess, but it worked successfully.
The last few steps of the tutorial went without a hitch and borrowing all the code from the different TwentyTen files was quick and easy (once I understood what we were doing.
There were a few other areas that needed tweaking to make the site look right, this was tweaked in the style.css file, changing margins and setting text alignment etc.
I hope some of this might be useful for someone.
One day perhaps I’ll put together a tutorial of our own. In the meantime if you need any highlevel promotional video content for your websites or business please don’t hesitate to get in contact.