Coding Horror
StackOverflow
It’s taken a while, but I finally revamped the look of my site. Part of the problem, as always, is coming up with a design I can put up with for a while. I think that this red attempt should be OK for a while.
There a number of good WordPress theming guides out there (the one at WPDesigner.com is especially excellent) , so I don’t intend to replace them and their great detail. This post is merely some simple pointers for those that already know how to create HTML and understand enough about PHP to get by.
Create yourself a design! I’m totally gonna gloss over this part, despite being the major time consuming bit. I’m a big advocate of the multiple stage design process (Image -> HTML -> System Template). Basically – once you have a HTML / CSS version of what you want to achieve, its then time to work on how to get that into your WordPress Blog.
Create yourself a theme directory – this is within your /wp-content/themes directory and should make your theme sound totally awesome. Something like “Totally Rockin’ Monkey Burgers” should be sufficient.
Create your CSS file – Just copy your CSS file to your theme directory and make sure its named stylesheet.css You should also make sure you have something like the following in the top of it:
1 2 3 4 5 6 7 8 9 | /*
Theme Name: Totally Rockin' Monkey Burgers
Theme URI: http://www.amadiere.com/blog/2009/11/quick-start-guide-to-theming-wordpress/
Description: Theme creation example.
Author: Alex Holt
Author URI: http://www.amadiere.com
Version: 1.0
Tags: red,white,fluid-fixed-width,two-columns
*/ |
Copy the PHP files from the Default theme – these act as a great starting point for your adaptations. You can now adapt these to pull together to create your style. They are split into 5 easy to comprehend areas by default. You don’t need to follow this however, you can simply put everything in one big file – though I find code becomes a lot more manageable when split over a few pages:
Index – the glue of the page, it calls the other templates where required. The key lines are:
<?php get_header(); get_sidebar(); comments_template(); get_footer(); ?>
Header – has the top part of your blog that is repeated throughout your site.
Footer – similar to the header, the code that appears at the foot of every page.
Sidebar – your navigation bar. For this, you effectively only need a small bit of code. The ‘dynamic_sidebar’ function calls all the Widgets that are enabled. This then basically generates a load of <li>’s, one for each Widget (these sometimes have nested UL’s and LI’s themselves):
1 2 3 4 5 6 7 | <div id="navigation">
<ul>
<?php /* Widgetized sidebar, if you have the plugin installed. */
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) {}
?>
</ul>
</div> |
It is however worth mentioning that in circumstances that there are no Widgets – the above would output nothing but an empty unordered list.
Comments – Just displays the comments (if set to show), below each post. While there are a lot of bits in here, the main bit can be a touch hidden and is signified by a foreach loop within an Ordered List “commentlist”.
19 20 21 22 23 24 25 26 27 28 29 30 31 32 | <ol id="commentlist"> <?php foreach ($comments as $comment) : ?> <li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>"> <?php echo get_avatar( $comment, 80 ); ?> <div class="commentmeta"> <?php comment_type(_x('Comment', 'noun'), __('Trackback'), __('Pingback')); ?> <?php _e('by'); ?> <?php comment_author_link() ?> — <?php comment_date() ?> @ <a href="#comment-<?php comment_ID() ?>"><?php comment_time() ?></a> <?php edit_comment_link(__("Edit This"), ' |'); ?> </div> <?php comment_text() ?> </li> <?php endforeach; ?> </ol> |
Create yourself a screenshot – it’ll make you feel good and will help you recognise the awesomeness that is your style when you are browsing through the hundreds you downloaded that are all tosh when compared with yours!
And that’s your lot.
As I mentioned, I don’t want to replace what is already out there on the web with this guide. In fact, I don’t the word ‘guide’ as it gets me quite excited and I expect something more dramatic than I’ve delivered. I think maybe prefixed with ‘Quick Start’ however, it might become acceptable… Yes. Yes, that seems not to have got my blood pumping!
Comments (0) 
I guess it’s time for me to actually brand the site somehow, instead of using all the downloadable themes…
and the 
. I quite enjoy language and environment specific books too, such as 
,