This tutorial is aiming to help bloggers who already have a website and want the look of their new blog to be the same as the rest of the site. It assumes that you are familiar with basic HTML and CSS code and rules. For the PHP code lines involved in the process you only need to be able to perform accurate Copy-Paste operations.
Depending on the basic layout of your existing site it will guide you step by step through the process of making your WP blog looking similar to your webpages.
This guide is not a tutorial for integrating your blog via iframes or displaying your posts through RSS feeds or, by using different “recent posts” techniques and plugins.
Warning! If you have challenges in understanding and using basic HTML and CSS code, I am afraid this tutorial is not for you. Sorry, but no support will be provided for basic html and css questions – use W3Schools Online Web Tutorials to learn the basics.
WordPress Online Manual: the CODEX
If you are new to WP – see WordPress for Beginners
Useful articles for understanding this tutorial
[Note. All the code examples are taken from WP.126.96.36.199 - Classic theme.]
Find your layout
Take a look at the images below and find out which one is the closest to your layout. The black 1 is the header, the blue 3 means your menu, and the red section 2 is where your content is.
|Fig. 1 for Scenario #1||Fig. 2 for Scenario #2|
|Fig. 3 for Scenario #3||Fig. 4 for Scenario #4|
|Fig. 5 for Scenario #5||Fig. 6 for Scenario #6|
This is a multipage post: Page 1 Page 2 Page 3