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(); ?>
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
Late yesterday afternoon a client asked if I could look at a business’s WordPress installation. They had posts in several categories but only wanted to show the “Latest News” posts in the archives.
WordPress is designed around blog posts, whereas I find that many business or company sites are designed around pages (eg About Us, Contact Us) – and don’t use WordPress’ powerful blogging tools on the front page. My site is an example – the content on the home page doesn’t change that much.
This means that many of the solutions are also geared around blog-post design.
While searching I found a few examples of how to exclude a specific category from the archives, when what I needed was to include only one category in the WordPress archives – generated in the theme by wp_get_archives().
The solution is to add a filter that modifies the SQL used by wp_get_achives() to the theme’s function.php:
add_filter( 'getarchives_where', 'customarchives_where' );
add_filter( 'getarchives_join', 'customarchives_join' );
function customarchives_join( $x ) {
global $wpdb;
return $x . " INNER JOIN $wpdb->term_relationships ON ($wpdb->posts.ID = $wpdb->term_relationships.object_id) INNER JOIN $wpdb->term_taxonomy ON ($wpdb->term_relationships.term_taxonomy_id = $wpdb->term_taxonomy.term_taxonomy_id)";
}
function customarchives_where( $x ) {
global $wpdb;
$include = '1'; // category id to include
return $x . " AND $wpdb->term_taxonomy.taxonomy = 'category' AND $wpdb->term_taxonomy.term_id IN ($include)";
}
Replace ’1′ with the category ID (wp-admin > posts > categories > edit, then in the address bar it is directly after ‘&tag_ID’) and that’s it. wp_get_archives() will now only display posts from that category.
I found this in http://wordpress.org/support/topic/wp_get_archives-and-conditional-tags?replies=6#post-1578041 (thanks Paul!).
Posted on
A client using Hostmonster was doing some hair-pulling over what appeared to be a .htaccess problem while installing a Symphony site I developed. We thought it might be related to the fact it was running on a subdomain.
The server would give a blank page, and on the HTML source would show something like “500 SHTML wrapper”.
It turns out this happens when group write permissions are set on the script. Via the Hostmonster Cpanel File Manager, you can right-click the file, click permissions and uncheck “write” and the script should run.
The way I worked this out was: first, rename .htaccess to something like _htaccess, so we know that’s not getting in the way.
Next try viewing a file like favicon.ico (this was served correctly). Then upload a simple PHP script like phpinfo.php, with contents:
<?php phpinfo(); ?>
When I did this I was still getting the 500 error. I found in a Hostmonster forum someone had mentioned group write permissions, which I started experimenting with until it worked.
Posted on
This took me a little while to work out. I’m using PHP5′s SimpleXML to parse XML into a PHP object. The XML has entries like <HELLO-THERE>.
But you can’t use $xml->HELLO-THERE because it reads the hyphen as a minus.
Instead, use $xml->{“HELLO-THERE”}
Easy!