It started off quite simply: I had taken over a website on behalf of a client, from another developer. A lovely website called www.zoesbooks.co.uk, with some beautiful design features and plenty to learn from. But the client was unhappy with her Google ranking and hired a new SEO expert to improve results.
Organic rankings nowadays depend on more than just the judicious use of keywords. The new world of SEO2 dictates that in a crowded market, blogging, social networking and site sharing all play a role in creating the high-quality inbound links that enable a site to rise above its peers. Blogs are quickly found and indexed by Google so, asked the SEO consultant, would I integrate a new WordPress blog into the Zoesbooks website?
I do like a challenge. I started out with no idea how to integrate any type of blog into a website and found the abundance of instructions on WordPress itself confusing, to say the least. Most seemed to relate to powering an entire website through WordPress, and, as several bloggers have pointed out, most people don’t actually want this. They just want a blog that’s integrated into their site.
So it was to other blogs that I turned for advice and there is plenty of it — except that most of it is out of date. Last year WordPress updated its default “theme” (this sets the look of a blog) from Classic to the new Twentyten. Most of the instructions I read concerned Classic, but with the advent of Twentyten, WordPress has reorganised its php files and the integration methodology has changed.
I am grateful to the many people who have blogged on this topic because without them I would not have got off the starting block (see designwebsite411 and boobox, links in the blogroll). But perhaps something more straightforward is needed for the complete newbie who doesn’t have php code at their fingertips. I managed the integration after much reading and a few false starts, but it needn’t be as complicated as many people suggest.
Start like this. First, download WordPress to a dedicated folder on your computer and unzip. Next on the server, create a new folder off the root directory of your target website and call it something like “blog”. Upload the WordPress package to “blog” (this’ll take a while, it’s hundreds of files). The plan is to access the blog from a button you create on the website named “Blog”, so that the link goes something like this: <a href=”/blog”>Blog </a>. It won’t be live just yet.
For the next step, you need to have ensured that the hosting package for you website offers database support and if not you need to obtain it. For Zoesbooks this incurred extra expense. The host will provide four elements: database name, host name, username and password. Here the WordPress instructions are nice and clear: insert these into a file you will find in WordPress’s root directory: wp-config-sample.php. Do this on your own computer. Rename the file wp-config.php, upload and go online to the blog, and it will install automatically.
Once I had done this on zoesbooks.co.uk, hey presto! there was the blog in all its Twentyten glory, complete but not looking a big like the zoesbooks website. The change of identity began here.
All the blogs I read agree that the first step, on your computer, is to go to wp-content/themes where you will see the twentyten folder. Make a copy of it that will sit alongside it in the Themes folder, rename to your chosen title and upload. Modifying a renamed copy of the Twentyten folder, rather than the original, protects agains mistakes and overwriting during software updates. After this, the degree to which you make the blog look identical to your web pages depends on the amount of time, effort and expertise you are willing to spend, but I would like to offer this incomplete but easy method.
Ignore the older blogs’ advice to create a template web page, identical to a page of your own website but with no content — at one point I followed the blind alley of copying entire sections of WordPress php code into this template to pull in the text of the blog. This worked but only partially, because each time I clicked on a link I was taken to the same blog with the Twentyten template. Confusing, or what?
I suggest you also reject the more up-to-date instructions which also advocate a new template page. They recommend that you navigate to the new theme folder, open certain files (index.php, footer.php, header.php etc) and copy entire sections of your template into them, replacing the existing WordPress code. This is risky stuff if you’re not a php expert.
A simpler answer came as I hunted inside the WordPress blog to change its orientation from the Twentyten folder to the newly copied theme folder (identical at this point to Twentyten), an essential step if I wanted my modifications to take effect. For this I had to go to the Dashboard, choose Appearances and re-orientate to the new folder. But here I found other things too: a wizard for uploading a custom header, another for creating navigation buttons from the black navigation bar under the header image, one for uploading a background image and more besides.
Before I knew it I had transformed my new theme from the Twentyten default into a space that looked acceptably like zoesbooks.co.uk. I decided, with my client’s approval, that this was good enough with a few further tweaks to the theme’s stylesheet, styles.css. Job done.
Several things are useful to know in advance. The main content area in a WordPress blog page is 940px and although this can be modified, the size of the header image can’t (at least I don’t think so). So if designing a website from scratch with future WordPress integration in mind, consider making it 940px wide. The header image space is 940x198px and I recommend that you tailor your header image precisely to this. Anything else risks being cropped in an apparently random manner. And one further SEO tweak: you will want your keywords, contained in the title of each post, to be reflected in the post’s url. Do this by editing the Permalinks setting in post editing mode.
Et voilà, one integrated blog up and running.
