In the last couple of weeks I have incorporated WordPress blogs into two sites, applying the existing site style to the WordPress pages. You’re looking at one of these right now…
I didn’t particularly want to replace all my existing pages with WordPress pages, I just wanted to use the WordPress functionality to power the blog element. Pretty common requirement I’d have thought. I found this article a useful starting point.
So, if you have an existing site with its own css file and you follow this tutorial exactly then you will end up with two similar css files, your original one and one just for WordPress files called style.css. So then you have to make changes in two places…I didn’t want this so additionally amended header.php to point at my “main” css file. The downside of this is that you can’t update your css file through the WordPress admin module, but that wasn’t at all an issue for me.
It’s pretty much guaranteed that this will break the display of at least some of the wordpress pages, as chances are you won’t have entries in your css file corresponding to the html markup that WordPress generates. The same things will happen of course, if you replace the contents of style.css with your own css.
For example, my main site uses #header and #footer as id names, just as WordPress does, so no changes required here, but I used #maintext instead of #content for the main page content. So you can either amend the html so the WordPress files use #maintext, or add #content to your css.
In this case, you can identify #content just by viewing the various .php files – but some classes and ids are directly generated “on the fly” and don’t appear. I found the easiest way to do this was to view the actual pages using Firebug, and make additions to my css file accordingly.
This isn’t quite as painful as it sounds as WordPress is pretty consistent about the markup.
I’d guess it took a couple of hours in total to do, including actually amending the contents of sidebar.php. Worth it as all my styling sits in one file.
