Special guests Joe LeBlanc and Simon Allardice join Ray Villalobos and Morten Rand-Hendriksen for a discussion of the new JS based framework hood.ie, WordPress brute force attacks, Government website design, jQuery 2.0 and no more support for IE8, and the neverending debate over HTML5 vs. natvie apps brought to the forefront again due to LinkedIn’s move from HTML5 to native.
The best way to learn a skill, to improve a skill, or to perfect a skill, is to put it to use and share it with others.
The first ever Theme Weekend will put this to practice. Twenty designers, developers, and WordPress enthusiasts will gather at The Network Hub in downtown Vancouver for a two-day weekend event on June 30th and July 1st, 2012 to collaborate and build WordPress themes.
Theme Weekend grew out of requests from members of the Vancouver WordPress Meetup Group for a more hands-on workshop-type event where everyone can learn more about building WordPress themes. This event combines skills, collaboration, team building, and a bit of good old-fashioned competition to produce a learning environment and some great free WordPress themes.
Saturday kicks off with a pitch session of theme ideas which are voted on, the most popular of which will move on to the next stage. Teams consisting of designers and developers and those in between will then be formed. Over the course of the two days, each team will design and build their chosen theme and make it available via GitHub.
To read all about it and get in on the fun, head over to WPYVR.org – the home of the Vancouver WordPress Community – for all the details.
Above is the slide deck for my WordCamp Victoria presentation entitled “10 WordPress Theme Hacks to Improve Your Site”. Unlike my regular presentation this one is entirely slides based which means if you just read the slides, you’ll get the gist of it. Below are all my code examples along with links to further information, example sites and related tutorials to give you some context. Knock yourself out!
Replace Site Title with a Linked Image
This is my number one pet peeve. When people visit a site they intuitively expect the logo or header image to be a link back to the home page, and it should be. When it’s not they (and I) get annoyed. Making your header image link back to your home page is not hard. All you have to do is wrap the header image code in a simple anchor tag that leads back to your root URL and you’re good to go. For simplicity the code looks like this:
The WordPress 3 custom menu function is built into the TwentyTen theme and most newer themes, but older themes usually just have hard-coded menus. Adding WP 3 custom menus to a theme is not hard though. It requires a function call in the functions.php file and a template tag in the template file of your choice (usually header.php and/or footer.php). Here’s that code:
Menus don’t have to be regular boring one or two word one-line elements. Because WordPress allows HTML in the Navigation Label you can add more interesting designs like we did on the 12×12 Vancouver Photo Marathon site. On this site we added a simple span tag around the text that displays under the menu heading and then used CSS to change how it displays. Sorry, no code examples – it’s just straight up CSS and out of context it makes no sense.
WordPress 3 Custom Background Images and Colours
The TwentyTen theme introduced a very cool custom background function built right into the admin interface (under Appearance -> Background). This is not a function found in TwentyTen but a core function found in WordPress. That means you can activate it in any theme. All you have to do is call it from the functions.php file:
The function injects CSS style code right into the HTML pages which means it’ll override your theme CSS file no matter what. That in turn is why it’ll work on any theme as long as you run WordPress 3.0 or higher.
Adding Featured Image (post-thumbnail) Functionality
Featured images are great, if you know how to use them. They also do way more than just displaying thumbnails (which is why I think the function should be renamed).
To activate the function add the following code to your functions.php file:
add_theme_support( 'post-thumbnails' );
This will add the function to you Admin panel. To display the featured image (in the size you want) in your theme use one of the following functions:
A custom category template can be made in one of two ways. Either create a file with the name category-ID.php where ID is the ID number of the category or category-slug.php where slug is the slug for the category. These files will automatically become the category tempaltes for the defined categories.
Custom Header, Sidebar and Footer
You can also create custom headers, sidebars and footers sort of the same way. You make and call them the same way. For example if you want a custom header you create a new header file called header-custom.php and then call it using the standard get_header() function with a small difference:
<?php get_header('custom'); ?>
where ‘custom’ can be anything.
Better Context Links
One of the things that bug me about standard WordPress themes is that they display links to the next and previous posts in the single post view. These links don’t really provide a lot of value. Instead you should be displaying the two latest posts from the current category. So I made a small theme add-in you can dump into your theme for some better context. The add-in adds links to the two latest posts in the current category including the title, publishing date and short description. To install it download the related.php file here (right-click and choose “Save As” – it’s a straight up php file), add it to your theme directory and call it using the following code in your single.php file: