Posted on
I’ve been customising a theme that had a new version, getting the message “There is a new version of … available”. I didn’t want the end-user to update the theme, because I’d customised it so heavily. I know that any updates are going to need to be done by a WordPress theme developer.
After a while of searching through code, looking for add_action and add_filter hooks, and even delving into the database, I realised I could just edit the theme’s style.css and remove the “Version:” line from the WordPress specific CSS header right at the top. And the notification (and oh so dangerous link) went away!
Summary: Delete ‘Version’ line altogether from the theme’s /style.css file.
Posted on
I just updated my WordPress installation from 3.2 to 3.3. The upgrade was running but then the page directed to this message:
Briefly unavailable for scheduled maintenance. Check back in a minute.
The front page and wp-admin both showed this unstyled message. After a quick search I found that simply deleting the .maintenance file via FTP will remove this. Perhaps it’s a bug in this version, perhaps something went wrong. But after deleting that file everything seems to be working well. And I must say I like the design tweaks in WordPress 3.3.
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
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
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
1. Download all files from eg http://example.com, upload to eg http://localhost/example/.
2. Export mysql database from example.com
3. Create a local mysql database with the same user, password and database name. These can be found in wp-config.php
4. Import the database into your new local account
5. Log in to the database, and do:
update wp_options set option_value='http://localhost/example/' where option_id=1
You’ll now be able to log in at http://localhost/example/wp-admin, using the same username and password as http://example.com/wp-admin.
5. In WordPress, click ‘Settings’ and change the blog address to your local address.
6. Profit!
Posted on
I was asked to do some quick mods to client’s WordPress blog. He wanted to replace the banner image. He’s using WordPress 2.7 and has the default Kubrick theme.
This isn’t as easy as you would think as it’s generated by PHP so that the colours can be dynamically set.
Here’s what I did:
<div id="headerimg" style="background: url(<?php bloginfo('stylesheet_directory'); ?>/images/kubrickheader_NEW.jpg) no-repeat -1px 0">
Upload header.php and it should now be using your new header. I used the “-1px 0″ because the header was out of horizontal alignment by 1 pixel. I don’t know if that’s because of the header image he sent or if that’s the way WordPress’s dynamic banner image works. You might need to remove that part.
This probably isn’t the best way to do it but it’s a quick and easy solution.