Re-skinning WordPress – CSS and HTML
One of the clients we are working with at the moment has asked us to help them improve their search engine rankings. To achieve this we have to utilise a variety of SEO techniques, one of which being the creation of a blog.
We currently use wordpress for this task as it provides an excellent blogging platform, due to the thousands of extensions, easy to use interface and the supportive community surrounding it.
As a web designer, the question you have to ask yourself on every project is, what is the most effective option for comleting the task in terms of time and quality constraints? This usually means using a pre-created template and re-skinning it. This solution means that the complex benefits of modern themes are already in place, rather than having to learn to create them from scratch.
So I had to build a blog quickly and to mirror the design of the client’s current site. This was so the blog could be bolted on.
Here follows a quick rundown of the steps I took to re-skin the blog.
Step1:
Look at the design of the site you are trying to mirror. So this means looking at the width, height and makeup of the divs. A good way to do this is to take a screen shot and paste it into Photoshop, you can then measure the parts. Then compare this to how the template you are going to be altering has it’s divs arranged.
Step2:
Start to test out how you can alter your template to the desired design using firebug http://getfirebug.com/. Once you are happy, copy and paste the css into the correct files within your theme editor.
Step3:
So you now have a page which structually mirrors the design but probably looks nothing like it. Go back to your screen shot and find out the colours that make up the site. Add these and all the required imagery.
Step4:
Now it is time for the navigation and footer. This can be made far easier by just copying the markup and code from the original site.
Navigate to the site and view source. Now find the html for the menu and copy the entire div. Open your header.php file and paste in the code. Refresh and you will see a version of the menu. Now go back to the original and using firebug, copy the css of all of the divs included within the menu. Copy this into your css files. And there we have it.
Repeat this for the footer.
And there we have it.




