Posted on
I’ve created plenty of WordPress themes based on designs from clients. This is the process I usually follow.
1. Create a static HTML and CSS template. I create index.html and style.css.
2. Install WordPress
3. In the WordPress folder wp-content/themes/ I create a folder with the name of my new theme.
4. Copy my static HTML to the new theme folder.
5. Modify style.css, add the WordPress stylesheet header:
/*
Theme Name: THEME_NAME
Theme URI: YOUR_WEBSITE
Description: THEME_DESC
Version: 0.1
Author: YOUR_NAME
*/
6. Rename index.html to index.php. Open index.php and replace the reference to style.css with < ?php bloginfo( 'stylesheet_url' ); ?>
7. In wp-admin, go to Appearance -> Themes and select my new theme. It will still be completely static but this is the starting point for the real WordPress theme development.
8. Create the file header.php ; move the header stuff from index.php into this file. For me this is generally from first line (the DOCTYPE) down to the start of the main content area. In index.php I insert <?php get_header(); ?> to load the contents of header.php.
9. Similarly I create footer.php and sidebar.php and then move the lines from index.php into those files, and replace with <?php get_footer(); ?> and <?php get_sidebar(); ?> respectively.
10. Edit header.php, so that it looks something like this (this is HTML5):
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>" />
<title><?php wp_title(); ?> <?php bloginfo( 'name' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" type="text/css" media="screen" />
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
<?php wp_enqueue_script('jquery'); //only use if you need jquery?>
<?php wp_head(); //this does a lot of stuff ?>
<!--[if IE]>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style-ie.css" type="text/css"></link>
<![endif]-->
</head>
<body <?php body_class(); ?>>
<div id="Main">
<header>
<div id="Holder">
<h1><a href="<?php bloginfo('url'); ?>"><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</div>
<nav>
<?php wp_page_menu(); ?>
</nav>
<div class="clear"></div>
</header>
11. Edit index.php, remove the static content and insert The Loop code, which looks like this:
<?php get_header(); ?> <div id="Content"> <?php //The Loop if( have_posts() ) : while( have_posts() ) : the_post(); echo '<h1>'.get_the_title().'</h1>'; the_content(); endwhile; endif; //end the loop ?> </div><!--Content--> <?php get_sidebar(); ?> <?php get_footer(); ?>
If there are other files in your theme directory, use
<?php bloginfo('template_url'); ?>/
… eg:
<link href="<?php bloginfo("template_url"); ?>/webfonts/bauhaus.css" rel="stylesheet" type="text/css" />
12. In footer.php I might have something like:
<footer>
© <?php echo date('Y').' '; bloginfo('name'); ?>
</footer>
</div><!--Wrap-->
<?php wp_footer(); ?>
</body>
</html>
At this point we should see our theme loading content dynamically from WordPress. But this is just the start…
See the WordPress Template Checklist for a more thorough guide to everything you might need.
Posted on
I’ve been meaning to update my website’s design and layout for a long time. My site is based on WordPress and the theme I’d been using previously was a little too sterile. I wanted something that was more of a portfolio site and yet could still accommodate a blog.
After sporadic searches through the free WordPress themes on offer, I decided none of them quite did what I wanted, so I designed my own.
I wanted to keep it minimal while making use of emerging web technologies like HTML5, CSS3; and I wanted the site to look just as good on smaller screen mobile devices.
To move away from the rather dry grey and blue theme I thought I’d go for something lush, and found a nice background which stretches to the browser width. The background image is called “Green Meadow II” by Timothy Schellhase, which I found on the Gnome site under the category http://art.gnome.org/backgrounds/nature (unfortunately there’s no way to directly link to it). It is released under the GNU GPL.
The title fonts are provided by Google Web Fonts, an amazing and free service. There’s a little delay on the page load but I think it’s worth it.
I wanted to include a sharing service for my blog posts, but I’m just not that happy with any of the existing WordPress plugins. They’re either very bloated, hard to configure and style, or both.
Instead I decided to just link to the social media sites I’m on, and got the icons you see at the left of the footer from http://icondock.com.
I think the most important element of a site is a contact form, which I decided to include on every page, with a bright call to action which hopefully draws the eye. On the blog pages this appears right at the bottom, as I assume blog users are more after technical information rather than my services. I created my own AJAX style WordPress contact form, which hooks in to WordPress AJAX functions to send me an email directly.
It probably needs a little more work before I can submit it to the WordPress theme repository, but I hope to release it for free at some point, with the option for the user to upload their own background image and use their own colours.
Overall I wanted to keep the design minimal, while keeping a nice balance between formal and relaxed. I think I’ve done pretty well and I’m quite happy with my new site.
So what do you think? All feedback is appreciated, please leave your thoughts in the comments!
Posted on
When I write HTML and CSS I’ll usually create a mockup – I take a high quality JPG of the design and put it into a very simple page that shows the JPG, centered on the screen. Then in Firefox I switch back and forth between the page I’m working on and the mockup so that I can get the design pixel-perfect.
Well today all that will change. I’ve discovered the Pixel Perfect Firefox Extension which allows me to overlay the mockup over what I’m designing. You can set the opacity and quickly toggle the overlay on and off.
I’m not sure about centering – it doesn’t seem to do that automatically. But I think I could use the MeasureIt extension to get the width of the main column, set it in CSS with ‘margin: 0 auto’ to centre it, and then drag the overlay to match and base everything off that.
My job just got slightly easier again.
Awesome!
Posted on
Very occasionally I’ll use an empty DIV for decoration, and in CSS use height: 1px.
In IE6 to make this work you need to put comments inside the DIV, otherwise it’ll display at the height of the font you’re using.
<div class=”line”></div>
becomes
<div class=”line”><!– –></div>
You don’t need any line-height fixes in the CSS. Yes, it’ll add to your markup a bit, but you should probably be explaining why you’re using meaningless, empty DIVs anyway.
Posted on
I like sIFR, but it really bugs me that I have to read through an entire tutorial to get something really basic up and running. This is a simple sIFR3 demo, using the basic cochin.swf file and an almost minimal amount of code to see it in action.
Download my minimal sIFR3 demo here.
I believe you’ll need to upload it to a webserver to run it, you won’t just be able to open the index.html file to see it working.