So you want WordPress not to look like WordPress! You’ve come to the right place. Webdesigning and creating a layout is one thing; making it so that WordPress can use it is something else entirely. This article describes ‘best-practises‘ into making that work. Note that this article preimposes that you should have knowledge of HTML, PHP, CSS and that you can make a layout on your own. It’s recommendable to read for any designer that is starting out with WordPress.
1. Always design your layout in HTML/ main CSS divs first.
Never attempt to create a layout immediately within wordpress. It will not work. Only the very very experienced may attempt to do so; first timers will without exception get lost in the code. Once you’ve tested that plain HTML/CSS layout for screen resolutions, browser types you can start implementing it in WordPress. I recommend you install WordPress on your localhost to create your themes and never online. This way you don’t disturb people that visit your website.
2. Kubrick is your friend.
The Kubrick default theme of WordPress is your best friend. Always use this packaged theme as a basis to start your new layout from. It includes the latest functions and it has the cleanest code. Make a copy of the entire default Kubrick directory in wp-contents/themes. Go into the stylesheet (style.css) and change the theme info. These are the first 5 or 6 lines in the file. Now login to the local admin panel of WordPress and go to Presentation. The copy of Kubrick should be present with the name you gave it in style.css.
3. Index.php is all you need
A wordpress theme consists of seperate files. (index.php, page.php, archives.php…). The key into making one is understanding how it’s built up. The best of understanding this is by looking at index.php. You will see the following if we take out the excess:
|
1 2 3 4 |
< ?php get_header(); ?>
index content [stripped]
< ?php get_sidebar(); ?>
< ?php get_footer(); ?> |
This means index.php “gets” the contents of header.php, sidebar.php, footer.php. Though it’s very efficient programming (php include) in this case it will throw you completely off when you want to implement your design.
a. Empty the style sheet completely for your copy of Kubrick.
b. Empty index.php except
|
1 2 3 4 5 6 |
< ?php get_header(); ?>.
c. Go to header.php and clean out the Kubrick image style information. It explains it's put there for easier access for changing the header image. You may delete this style code entirely.
d. Clear everything underneath the body tag in header.php.
e. Copy the images of your layout to the subdirectory images in your test theme.
f. Copy the CSS you've made in the html layout to the emptied style.css of the test theme.
g. Copy all the html from your test layout that is beneath the tag to index.php beneath |
|
1 |
< ?php get_header(); ?> |
.
If you’ve followed these steps you can now pull up the index page of WordPress to see what it looks like. If everything went well, you now see an exact copy of the layout you built only in HTML/ CSS. Of course, you can no longer see the posts of WordPress. You took this out the index earlier. The reason for this is to first check up on the layout before attempting to restore the situation. If it displays correctly, you can continue.
4. The WordPress Loop.
|
1 |
< ?php if (have_posts()) : ?> UNTIL < ?php endif; ?> |
is the WordPress Post Loop. You can copy this code from the original Kubrick main index.php to your test theme. Place this piece of code wherever in your layout the posts are supposed to be. Now don’t worry if it looks slightly off – we can fix this later.
Once you have established it displays posts in a reasonable manner (doesn’t need to be perfect) you can start splitting the layout again.
5. Splitting the index
This is about reverting parts of the layout to header.php, sidebar.php, footer.php. This can be a bit tricky, and this is why we needed to make sure the unsplit version with the post loop looks proper. You start taking the menu to sidebar.php and the top images/divs to header.php, so on. You do this step by step because if your leaps become too big, you are no longer able to reverse engineer to a cause if a problem arises. The last is the entire trick in building good layouts for WordPress. Small steps, no big leaps!
By this time you should grab back to the original Kubrick style sheet. Everytime you do a copy of code that contains style information with reference to the original Kubrick style sheet you analyze the original and see what you can use or change for this class. Maybe the class isn’t even necessary for your layout and you can remove it entirely. You are slowly MERGING style sheets together. Your own versus WordPress Kubrick Default.
6. A note on sidebar.php
Once you’ve split the code again you might want to take a look at sidebar.php LIST CODES. WordPress is INCAPABLE of working without list codes for the menu. But you CAN style these UL LI tags to whatever you want. On top of that, there is a trick to properly align Site Admin/ Register and Login/Logout.
|
1 2 3 4 5 6 7 |
<ul>
<li><a href="yourlink">Home</a></li>
< ?php wp_register(); ?> // NO li tag.
<li>< ?php wp_loginout(); ?></li>
< ?php wp_meta(); ?> // NO li tag.
<li><a href="yourlink">Your Link</a></li>
</ul> |
If your code around Administration and Login doesn’t look like this, you will get alignment problems. The same mostly goes for Categories and Archives.
7. Remaining classes & Copy through
Once you split your index.php properly and everything is displaying alright you can now start to copy the structure to other files like archives.php or page.php! They are all built the same, and if you start to copy from
|
1 |
< ?php get_header(); ?> |
until and with the div where your content starts you can drop it into any file. This one appeals to your sense of logic. READ the code of these pages. FIND the start point. And remember, always keep taking little steps, and no big ones!
When all your pages have been properly set you can start looking for missing classes, and import some more from the Kubrick original style sheet.
