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!