Categories
Code Programming Uncategorized WordPress

Introducing Thirty Ten, my guide to creating a Twenty Ten Child Theme

WordPress 3.0 is introducing a new theme that is light years ahead of Kubrick (also known as the old WordPress default), that looks so good you won’t even mind running it on a live site. In addition to being a beautiful theme in it’s own right, it’s also easy to build upon and create your own child themes for. I’ll show you just how easy it is to make some substantial changes. We are going to move the two column Twenty Ten to a three column theme I’m going to call Thirty Ten.

I’m going to lay out a couple of ground rules for myself when building this theme:

  1. I’m not allowed to override any of the template files with my own version. I want this to be as easy to maintain as possible. This means that I have to use footer.php, header.php and all of the other files.
  2. No output buffers This means I can’t use an output buffer and then regular expressions to get around rule number one.
  3. I want the reader of this article to be able to take and borrow any piece of this theme and use it to modify their own theme Every part of this theme and tutorial is licensed under the GNU public license, just like WordPress

The first step is to create a theme folder and put a blank style.css and functions.php in it. This is where the bulk of the changes are going to come in. into our style.css document we are going to insert our header that looks like:

[css]
/*
Theme Name: Thirty Ten
Theme URI: http://aaron.jorb.in/thirty-ten
Description: A child theme of the 2010 default theme for WordPress.
Author: Aaron Jorbin based on work by the WordPress team
Author url: http://aaron.jorb.in/
Version: 1.0
Tags: black, blue, white, three-columns, fixed-width, custom-header, theme-options, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style
Template: twentyten
*/
@import url(‘../twentyten/style.css’);
[/css]

My next step is to follow the sage advice: “good artists borrow, great artists steal” and will use the 3c-fixed.css layout style from thematic. I also need to add a fix to make it work with the current Twenty Ten style in all browsers.

[css]
@import url(‘3c-fixed.css’);
#access{overflow: visible;}
#main{clear: both;}
[/css]

So in four lines of css, I’ve switched Twenty Ten from a two column theme to a three column theme. SWEET!

That’s how flexible twenty-ten is. I want to do more then that though, because that alone is boring. Let’s now move our navigation menu to be above our image. This step we are going to be almost as easy.

[css]
#header #access{
top: -240px;
position: relative;
}
#site-title {
margin:0 0 44px;
}
[/css]

All we are doing this time is making the site-title have a bit more of a bottom margin to bump down the image, and then filling that space with our menu. I also want to make a few cosmetic changes to the default link colors and also change the formatting in the footer a bit (which will make a lot more sense after you’ve read the rest of this tutorial) To do this I added the following css:

[css]
/* Change our default link colors */
a:link{
color:#fdb120;
}
a:visited{
color:#d00c0d;
}
a:hover{
color:#1143d8;
}
a:active{
color:#a67942;
}
/* Modify the footer to allow for a bigger description and nicer looking links */
#site-info{
width:250px;
}
#site-generator{
width: 535px;
}

#site-generator a{
background: none;
padding: 0 7px;
}

#jorbin-link a:link, #jorbin-link a:visited, #jorbin-link a:hover,#jorbin-link a:active {
color:#990000;

}
#generator-link a{
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(../twentyten/images/wordpress.png) no-repeat scroll left center;
color:#666666;
display:inline-block;
line-height:16px;
margin-left:1px;
padding-left:19px;
text-decoration:none;
}
[/css]

Speaking of the header image, as much as I like the default ones, I want to include some of my own. That’s incredibly easy and leads us to our first additions to the functions.php file.

For this component, Aaron Hockley of Hockley Photography was nice enough to let me use a few of his photos that are available for you to download and use with Thirty Ten. To register some additional headers I’m using the following function:

[php]
add_action( ‘after_setup_theme’, ‘thirtyten_setup’ );
function thirtyten_setup(){

/* Add additional default headers All Photos are by Aaron Hockley of Hockley Photography */
$thirty_ten_dir = get_bloginfo(‘stylesheet_directory’);
register_default_headers( array (
‘lights’ => array (
‘url’ => "$thirty_ten_dir/images/lights.jpg",
‘thumbnail_url’ => "$thirty_ten_dir/images/lights-thumbnail.jpg",
‘description’ => __( ‘Lights by Aaron Hockley’, ‘thirtyten’ )
),
‘train’ => array (
‘url’ => "$thirty_ten_dir/images/train.jpg",
‘thumbnail_url’ => "$thirty_ten_dir/images/train-thumbnail.jpg",
‘description’ => __( ‘Train by Aaron Hockley’, ‘thirtyten’ )
),
‘bridge’ => array (
‘url’ => "$thirty_ten_dir/images/bridge.jpg",
‘thumbnail_url’ => "$thirty_ten_dir/images/bridge-thumbnail.jpg",
‘description’ => __( ‘Bridge by Aaron Hockley’, ‘thirtyten’ )
)

));
}
[/php]

This will add three choices for default headers to your site. It keeps all of the original default headers that come with Twenty Ten. If I wanted to get rid of any, I could use unregister_default_headers and just pass the name of the one I wanted to get ride of. Another option would be to create my own version of twentyten_setup. If you do that, make sure you include all the parts of that function you want to keep.

Another change that I want to make is the read more link. Twenty Ten uses the function twentyten_excerpt_more to make the link say ” …Continue reading → “. I’m going to make my own version that says ” …finish reading ” followed by the blog title. I do this by first adding the following function:

[php]
function thirtyten_excerpt_more($more){
return ‘&nbsp;… <a href="’. get_permalink() . ‘">’ . __(‘finish reading ‘.get_the_title() .”, ‘twentyten’) . ‘</a>’;
}
[/php]

Next I just have to deregister twentyten_excerpt_more and register my own. By adding the following lines to the function thirtyten_setup that I created earlier, I make sure that we remove twentyten_excerpt_more after it’s been created:

[php]
remove_filter( ‘excerpt_more’, ‘twentyten_excerpt_more’ );
add_filter (‘excerpt_more’, ‘thirtyten_excerpt_more’ );
[/php]

The Next change I want to make is to some of the strings. I want to have a slightly unique footer and I also want to change the meta text on single pages. As I learned in mangling strings for fun and profit/by WordPress lead Developer Peter Westwood, using the WordPress internationalization functions allows me to change almost any string in WordPress (or in this case, Twenty Ten). I use the following code for that purpose:

[php]
class Thirty_Ten_Text_Wrangler {
function site_generator($translation, $text, $domain) {
$translations = &get_translations_for_domain( $domain );
if ( $text == ‘Proudly powered by <span id="generator-link">%s</span>.’ ) {
return $translations->translate( ‘Proudly powered by<span id="jorbin-link"><a href="http://aaron.jorb.in">Aaron Jorbin\’s Idea</a></span>, <apan id="hockley-link"><a href="http://www.flickr.com/photos/ahockley">Aaron Hockley / Hockley Photography</a>, and <span id="generator-link"> </span>’ );
}
return $translation;
}
function single_meta($translation, $text, $domain) {
$translations = &get_translations_for_domain( $domain );
// With Tags
if ( $text == ‘This entry was posted in %1$s and tagged %2$s. Bookmark the <a title="Permalink to %4$s" rel="bookmark" href="%3$s">permalink</a>. Follow any comments here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ ) {
return $translations->translate( ‘This entry was posted in %1$s and tagged %2$s. It can always be found at <a title="Permalink to %4$s" rel="bookmark" href="%3$s">it\’s permalink</a>. Follow any comments left here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ );
}
//Without
elseif( $text == ‘This entry was posted in %1$s. Bookmark the <a title="Permalink to %4$s" rel="bookmark" href="%3$s">permalink</a>. Follow any comments here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ ) {
return $translations->translate( ‘This entry was posted in %1$s. It can always be found at <a title="Permalink to %4$s" rel="bookmark" href="%3$s">it\’s permalink</a>. Follow any comments left here with the <a title="Comments RSS to %4$s" rel="alternate" type="application/rss+xml" href="%5$s">RSS feed for this post</a>.’ );
}

return $translation;
}

}
add_filter(‘gettext’, array(‘Thirty_Ten_Text_Wrangler’, ‘site_generator’), 10, 4);
add_filter(‘gettext’, array(‘Thirty_Ten_Text_Wrangler’, ‘single_meta’), 10, 4);
[/php]

The final change is that I want to change how my authors page looks, or at least how posts show up on them. Twenty-ten makes it easy for child themes to have their own loop on a specific page type. All it takes is creating a loop-templatename.php  file and inserting your loop there.  So I made loop-author.php file and my custom loop lives there.

If you want to download this theme and use it for your own, you can Download thirtyten here. Also, take a look at to see this Twenty Ten Child Theme in action. And I’ve added all the code to a mercurial Google code site for you to easily make changes to. And finally make sure to comment below if you use it or do something cool with it so I can check it out.

UPDATE: I’ve added the ability to pick which style of three column theme you want.  Check out http://aaron.jorb.in/thirtyten/three-columns-three-ways/ to see the options.  And Follow the Thirty Ten subsite for more changes

Categories
Code Uncategorized

jQuery fix for tables lacking a thead

Every web developer that’s ever had to use jQuery knows just how much time it can save, and just how quickly it can fix a lot of problems. I recently had a case where I wanted to implement the jQuery Tablesorter plugin into a site that had a badly constructed table that I couldn’t change its construction. Tablesorter requires a table to be setup similar to:

[html]
<table id="tablesorter">
<thead>
<tr>
<th>name</th>
<th>something</th>
<th>something else</th>
</tr>
</thead>
<tbody>
<tr>
<td>Aaron</td>
<td>red</td>
<td>blue</td>
</tr>

</tbody>
</table>[/html]

The table I was working with lacked a thead and instead used the first tr as the head. It also added some styling classes for zebra striping that I wanted to get rid of so that tablesorter could add its zebra striping. Using jQuery, I was able to fix this up in just a few short lines:

[javascript]
$(document).ready(function()
{
$(‘table.example’).prepend(
$(‘<thead></thead>’).append($(‘.example tr:first’).remove())
);
$(‘table.example > tbody > tr’).removeClass(‘odd’);
$(‘table.example > tbody > tr’).removeClass(‘xx’);
}
);
[/javascript]

Line 1 starts jQuery. Line 2 selects our table and tells it to we are going to add something to the beginning of it. Line 3 takes the first tr, adds it to a new thead and removes it from the body. Lines 5 and 6 then remove the classes we aren’t going to use.

If you want to see this fix in action, take a look at a live demo. I hope this fix helps you out if you ever need to a jquery fix for a table with no thead. Let me know if you use it.

Categories
Code Uncategorized WordPress

More Twitter Shortcodes for WordPress

Building on my WordPress Shortcode How To, here are two more Twitter shortcodes. I’ve also added a new project on google code to track all of my shortcodes.

The first new shortcode is for twitter search. It’s logically enough

 [twitter-search phrase='#haikufriday']

Like my last twitter shortcode, it caches the results for two minutes. It also includes some other options. You can specify the number of tweets using the number attribute. There is a default of 20. You can also specify a max and min tweet id using max_id and since_id . Finally, you can specify the language with the lang attribute. This defaults to English.
[sourcecode language=”php”]
function jorbin_firestream_search($atts){
extract(shortcode_atts(array(
‘phrase’ => false,
‘lang’ =&gt; ‘en’,
‘max_id’ =&gt; false,
‘since_id’ =&gt; false,
‘number’ =&gt; ’20’
), $atts));
if (‘phrase’ == false){
return false;
}
//*/ Build our search url and transient name
$transient = ‘tweet-‘. esc_sql($phrase) . ‘&l=’ . esc_sql($lang);
$url = ‘http://search.twitter.com/search.json?q=’. urlencode($phrase) . ‘&show_user=true〈=’. urlencode($lang) .’&rpp=’ . $number;

if ($max_id != false){
$url .= ‘&max_id=’ . (int) $max_id;
$transient .= ‘&m=’ . (int) $max_id;
}
if ($since_id != false){
$url .= ‘&since_id=’ . (int) $since_id;
$transient .= ‘&s=’ . (int) $since_id;
}

if ( $tweet_display = get_transient($transient) ){
// It’s allready been brought
}
else {

if ($search = wp_remote_get( $url ) ){

$results = json_decode($search[‘body’]);

ob_start();
$tweets = $results-&gt;results;
//*/
foreach ( (array) $tweets as $tweet){
$tweetcontent = $tweet-&gt;text;
$newcontent = preg_replace(‘%@([^\s]*)%’, "<a href="http://twitter.com/\\1">@\\1</a>", $tweetcontent);
echo "<div class="twitter_shortcode"><p>
<img class="twitter_shortcode_image" src="&quot;.esc_url($tweet-&gt;profile_image_url).&quot;"><span class="twitter_shotcode_username"><a href="http://twitter.com/&quot;.$tweet-&gt;from_user.&quot;">".$tweet-&gt;from_user."</a>&nbsp;—&nbsp;</span>". $newcontent ."</p>
</div>";

}
$tweet_display = ob_get_clean();
set_transient($transient, $tweet_display, 300);
}
else
{
$tweet_display = "I’m sorry, no tweets are availailable at this time";
}
}
return apply_filters(‘jorbin_tweet_content’, $tweet_display) ;
}
add_filter(‘jorbin_tweet_content’, ‘make_clickable’ );
add_shortcode(‘twitter-search’, ‘jorbin_firestream_search’);

[/sourcecode]
Like before, there are some classes for you to work with that should make it easy for you to theme these shortcodes. If you want for me to add more, comment below.

The second shortcode allows you to get and display a list of the most recent trends on twitter using the shortcode:

[twitter-trends]

This one doesn’t have any attribute. The output is in an unordered list with the class of twitter-trends.
[sourcecode language=”php”]
function jorbin_twitter_trends(){

$transient=’twitter-trends’;
$url = ‘http://search.twitter.com/trends.json’;

if ( $tweet_display = get_transient($transient) ){

}
else{
$search = wp_remote_get( $url );

$results = json_decode($search[‘body’]);
$trends = $results-&gt;trends;
ob_start();
echo "<ul class="twitter-trends">";
foreach ($trends as $trend){
echo ‘<li><a href="’ . esc_url($trend-&gt;url) . ‘"> ‘. esc_html($trend-&gt;name) . ‘</a></li>’;
}
echo "</ul>";
$tweet_display = ob_get_clean();
set_transient($transient, $tweet_display, 120);
}
return $tweet_display;
}

add_shortcode(‘twitter-trends’, ‘jorbin_twitter_trends’);

[/sourcecode]
If you use any of these, let me know. If there are any improvements or more you want to see, comment below.

Categories
Code Programming WordPress

WordPress External Cron Plugin

There are plenty of scripts out there that require you to request a page on a daily basis to perform certain tasks. Normally you can accomplish this by setting up a simple cron. And on a good host, that’s easy. But what if your host doesn’t have cron? Well if you run WordPress, you now can use my Hit an External Cron plugin. You can download it from Google Code. It’s a simple plugin that adds an options page under settings to enter the url you need to visit on a daily basis.

Not only am I releasing this plugin under the GPL, but if you continue reading I’ll explain to you everything under the hood.
Continue reading “WordPress External Cron Plugin”

Categories
Code Programming Uncategorized WordPress

WordPress Shortcodes: A how to by example

I love the WordPress shortcode api. I’m willing to stand on a roof and scream it. It makes so many aspects of developing a WordPress site so much easier. It allows you to add dynamic information to any post, page, and with a single line text widget. How easy you ask? Let’s look at some examples so I can show you just how easy it is to use.

A shortcode for this year

Sometimes you just want to include the year inline and there’s no reason you should have to change the blog posts every time you want to do it. Here’s a quick shortcode for the year.
[php]function show_current_year(){
return date(‘Y’);
}
add_shortcode(‘show_current_year’, ‘show_current_year’);[/php]
Just that easy. As you can see there are a few components to a basic short code. The first is a function that returns what we want the shortcode to return and the second is a call to add_shortcode with the first parameters being what we want the shortcode to be and the second is the function we want that shortcode to call.

A custom links list shortcode

So that last one was pretty easy. Maybe we should try something a little harder, like adding an unordered list of links that uses each links image. This time we also add an attribute to allow us to limit it to a specific category.
[php]
function show_bookmark_image_list($atts){
extract(shortcode_atts(array(
‘catagory_name’ => false
), $atts));
if ( $catagory_name == false )
$bookmarks = get_bookmarks();
else
$bookmarks = get_bookmarks("catagory_name=$catagory_name");
ob_start();
echo "<ul class=’link-image-list’>";
foreach($bookmarks as $bookmark){
echo "<li><a href=’".esc_url($bookmark->link_url) ."’><img src=’".esc_url($bookmark->link_image)."’ /></a></li>";
}
echo "</ul>";
$list = ob_get_clean();
return $list;
}
add_shortcode(‘show_bookmark_image_list’, ‘show_bookmark_image_list’);
[/php]
This time we added an attribute called Catagegory_name that we can then retrieve using the shortcode_atts function that also allows us to set a default incase no attribute is set. We then go through the list of bookmarks that we retrieve and echo out the results. Since we want our shortcode function to return the data, we wrap our echo is an output buffer. I prefer to use output buffers because it allows me to use echo (and makes the code more readable in my opinion), but you can also use string concoction and return the string if you want.

Most Recent Tweet

This was removed in August 2013 since it relied upon a non deprecated twitter api

Using Shortcodes inside Text/html widgets

Text widgets can be simple and are great for creating small blocks of content that you can place any where your theme allows. This simple hack will allow you to use shortcodes inside your text widgets. Just add the following single line to your theme’s functions.php file.
[php]add_filter(‘widget_text’, ‘do_shortcode’);[/php]
If you want to download and use these three simple shortcodes and enable the use of shortcodes in your text widgets, download this file, remove the .txt at the end of the file, upload it to your plugins folder, and activate the simple shortcodes plugin.

Those three simple sample shortcodes for WordPress should give you a bit of a base to create your own. What are your favorite shortcodes? What’s a shortcode that you wish existed? Comment below and let me know. Also let me know if there is any part of my code that you don’t understand, and I’ll try to help you understand it.

UPDATE

I’ve added two more twitter shortcodes. You can also download all of my shortcodes and follow along to the development of them on google code.

Categories
Code Uncategorized

A Basic Database and Content Backup Script

I presented an unconference session at the great WordCamp Portland and have cleaned up my backup script for WordPress (and really any db/single uploading/plugin/theme folder program). Comment here if you have any questions about how it works or suggestions for how to improve it. Like WordPress, it’s available under the GPL v2
[bash]#! /bin/sh

# config
DBPASSWORD=’password’
DBTABLE=’DB’
DBUSER=’user’
CONTENTPATH=’path/to/wp-content’
DESTINATION=’/destination/for/backups/’
# end config

DATE=`date +%Y.%m.%d.%k.%m | tr " " _`
echo
echo Licensed under the GPL version 2 http://www.gnu.org/licenses/gpl-2.0.html
echo Copyright 2009 Aaron Jorbin http://aaron.jorb.in
echo
echo $DATE start backup with mysqldump
mysqldump $DBTABLE –add-drop-table -h localhost -u $DBUSER –password=$DBPASSWORD –single-transaction > db.$DATE
echo mysqldump done, gziping it
tar cfz db.$DATE.tar.gz db.$DATE
rm db.$DATE
echo Database backup gzipped, Tarring up our WordPress folder
tar cfz mu.$DATE.tar.gz -C / $CONTENTPATH
echo copying files to backup folder
mv db.$DATE.tar.gz $DESTINATION/
mv mu.$DATE.tar.gz $DESTINATION/
echo Cleaning Up
#clean up files that are sitting there
find $DESTINATION -type f -mtime +14 -exec rm {} \;
echo Thank you for backing up WordPress.
echo —
echo The Poetic Code
echo Options, Comments, Posts and more
echo Safer then before[/bash]