Categories
Jorb.in Uncategorized WordPress

Constructing my new theme with Thematic

EDIT: I’ve switched to a Twenty Ten Child Theme

When I heard Ian Stewart’s announcement that he become an Automattician I figured it was a good idea to take a look at Thematic and see what it could do. I’ve mostly built my themes from scratch, but Thematic looked like it could streamline my work and hasten the development of sites. I figured if I’m going to try it out, I might as well give my site some love an a new theme. Thus Aaron.Jorb.In 3.0 was born.

I couldn’t believe how easy it was. Essentially Thematic makes theme development as easy as plugin development. Find the appropriate hook/filter and make the changes needed. For example, I wanted a slightly different loop for My Clients Category Page that also doubles as my Portfolio. By adding an action to wp_head, I am able to check if it is the My-Clients Category, and if so I can remove the default loop, add my own, and also add a notice to appear above the loop.

It’s also super easy to remove the sidebar. All I had to do was add an action to thematic_sidebar that returned false. Essentially Thematic has removed my need to make custom page templates when I want to keep 90% of the page the same.

Overall, redoing my site took about a third of the time that it took me to construct the last version. I would encourage anyone familiar with the plugin architecture of WordPress to take a look at Thematic. And the best part about it? It’s 100% gpl compatible and doesn’t cost a penny.

If you have any question how I added or did anything on here, please comment below.

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’ => ‘en’,
‘max_id’ => false,
‘since_id’ => false,
‘number’ => ’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->results;
//*/
foreach ( (array) $tweets as $tweet){
$tweetcontent = $tweet->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
Programming Uncategorized WordPress

Commit: The Story of Writing a WordPress Patch

Hanging out in the #WordPress irc channel or on the wp-hackers mailing list, a question that comes up from time to time is “How do I get a bug patched”. I recently had a patch committed, so I thought I would detail the process from start to finish to help others get an idea of the process. I can’t guarantee that others will have the same experience, or that even I will have the same experience next time, but this was how I had my first substantial patch committed to WordPress.

The process for me started by seeing a post by Jane Wells talking about a few UX enhancements she wanted to see handled during the recent patch sprint. One that I noticed hadn’t received any attention was Showing the status of an admin attempts an e-mail change under the new multisite configuration. I took a quick look at the relevent code and figured this was something I could patch.

Lesson 1: Make it easy for coders and non-coders to see the change

After I wrote my first iteration of a patch, I hopped into #wordpress-dev and Andrew Nacin recommended that I add a screenshot to make it easier for Jane to see the change.  I couldn’t agree more that this was a great idea. After all, why should you need to apply my patch & test it, or understand the code behind it just to comment on it.

Lesson 2: Just because you write the patch, doesn’t mean others don’t have good ideas for it

I then waited till I was in #wordpress-dev at the same time as Jane and brought up the ticket. This led to a conversation between Jeremy Clarke, jane and myself about the best way to let users know. During this time I went thought a few other iterations and shared those on the ticket. We didn’t come to a firm conclusion, and the next morning Nacin commented with a suggestion on the ticket.

Lesson 3: Sometimes one small change leads to another

The next day I once again headed to #wordpress-dev where Jane, Nacin, and I took another stab at it and decided that an inline warning box would give the proper notification without being distracting. While writing the final version of the patch I noticed that all warning boxes automatically moved to the top of the screen. Nacin took ownership of fixing this, made a few minor changes to my patch and committed changeset #13446.  Now not only will users be able to see pending admin e-mail changes, but developers can use the existing UI warnings inline.

Overall, the process to fix this UX bug took four people and multiple iterations.  I want to thank all three others for assisting me. While there are times that errors make it into the released version of WordPress, I hope this story gives you the idea of the effort that the core development team takes to make sure only the highest quality code and user experience for users.

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
Programming Uncategorized WordPress

WordPress Widget – Exclude some categories

I’ve often found a need for a simple replacement to the WordPress category widget that allows me to remove some of the categories. I whipped this up real quick for a client and thought others might find it handy. You can copy and paste it or download it from Google Code. Comment with any questions or suggestions.

 'Selective categories', 'description' => 'Show a list of Categories, with the ability to exclude categories' );
                $control_ops = array( 'id_base' => 'some-cats-widget' );
                $this->WP_Widget( 'some-cats-widget', 'Selective Catagories', $widget_ops, $control_ops );
        }

        function form ( $instance){
                $defaults = array( 'title' => 'Catagories', 'cats' => '' );
                $instance = wp_parse_args( (array) $instance, $defaults );
                ?>
                

"; wp_list_categories("exclude=$cats&title_li="); echo ""; echo $after_widget; } } function register_jorbin_widget(){ register_widget('limited_catagories_list_widget'); } add_action('widgets_init', 'register_jorbin_widget'); ?>
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
Programming Uncategorized WordPress

You Better Know the Basics

When you first start working with WordPress, you need to know that there are five languages you could be interacting with. You don’t need to be an expert at any of them (and in fact can want make amazing sites knowing none of them), but when you want to make a change to your theme or add a feature that no plugin exists for, it’s important to understand what each language is and how it fits in.

To start let’s take one step back and understand that WordPress is software that runs on a server and that allows users to manage content, and the content to be sent to a visitors browser.

Just had to get that little definition out there.  Now that we know that, let’s actually look at the four languages.

HTML – Hypertext Markup Language

This is the main form that the WordPress outputs the content (if we want to get specific, WordPress uses XHTML 1.0 for all it’s internal functions, but explaining that is beyond the purview of this document). HTML is a structured language that browsers can read to display a web page. Content is enclosed in tags that each have a specific meaning. Tags can (sometimes optionally and sometimes mandatory) contain a variety of attributes. An example of a tag is
[html]<a href="http://aaron.jorbin">Aaron Jorbin is cool</a>[/html]
Learning at least basic HTML is important if you want to be able to display content in a web browser. To learn more, I recommend:

CSS – Cascading Style Sheets

As the name hints, CSS is for styling a page. CSS allows you to style html elements. In WordPress, a theme’s style.css file is also the theme’s way of telling WordPress about the theme. If you open any theme’s style.css you notice that the comments at the top are structured in a key: value manner. CSS utilizes the ID’s, Classes and tags from your HTML. An example of some css is:
[css]#header ul{
width: 400px;
color: #990099;
border: 1px solid #009900;

}[/css]
This block will style all unordered lists that are inside an element with the header ID and give it a width of 400 pixels, color all the text with hex color 990099 and apply a 1 pixel solid border of the color 009900.

JS – JavaScript

Once the page is sent to a browser, if you want to make changes to how the page looks, you’re going to need to have the browser execute it. That’s where JavaScript comes in. JavaScript is primarily a client side scripting langauge. This allows it to change the way the page looks, such as by having a set of tabs that change the content of a panel or having an accordion that grows and collapses to show or hide some options. Am example of JavaScript is:
[javascript] $(document).ready(function(){
$(‘#contentheader’).click(function () {
$(‘#contentheader > h2’).toggleClass("hidden");
$(‘#contentheader &gt; h3’).toggleClass("hidden");
} );
});[/javascript]
.

PHP –PHP: Hypertext Preprocessor

This is where the bulk of WordPress is written and the bulk of where the magic happens. WordPress includes a large amount of functions that plugins and themes can use from tasks as simple as echoing a posts title to creating a custom taxonomy for posts. If you’ve ever opened up your theme’s index.php file, you’ve seen text that looks like:

[php]
<img src="<?php header_image(); ?&gt;" width="<?php echo HEADER_IMAGE_WIDTH; ?&gt;" height="<?php echo HEADER_IMAGE_HEIGHT; ?&gt;" alt="">
[/php]

The is from the header.php file from Twenty Ten and controls the display of the header images.

To learn more about PHP, I recommend the following resources:

SQL – Structured Query Language

This is the language used to speak with Relational Databases.   In WordPress, this is used to add, retrieve, update or delete a post or option.  As the name would suggest, it’s a very structured language.  You say what you want to do, to which table you want to do it and how you want it to go down.  An example of sql is:
[sql]SELECT `option_value` FROM&nbsp;`wp_options` WHERE `option_name` = ‘siteurl’ LIMIT 0,1;[/sql]
Running this query will tell you what WordPress thinks your site’s url is (if you didn’t change your table prefix).    Some more resources for understanding SQL are:

I hope these resources give you a better idea of the languages used inside WordPress.