Working on a recent project I had to made use of ‘multiple column lists’, based on the article ‘CSS Swag: Multi-Column Lists‘ at A List Apart. For more control over the items in the list, I wanted to use the WordPress custom menus. This is the final result:

The CSS

The CSS is pretty straight forward. You can see a basic example here: http://www.alistapart.com/d/multicolumnlists/example6.html

Instead of using a different class for each and every list item, I wanted to use  ‘firstcolumn’, ‘secondcolumn’ and so on for the list items and ‘colheader’ for the items at the top.

/* http://www.alistapart.com/d/multicolumnlists/example6.html */
* html ul li{position:relative;}
ul li{line-height:1.2em;margin:0;padding:0;}
ul li.colheader{margin-top:-104px;} /* I'm using pixels here, but generally it is 'list item count' x 'line-height' (4*1.2) */
ul li.firstcol{margin-left:0em;}
ul li.secondcol{margin-left:160px;} /* a width + padding */
ul li.thirdcol{margin-left:320px;}
ul li a{display:block;width:145px;height:16px;padding:0 0 0 15px;margin:0 0 10px 0;}
ul li a:hover, ul li.current_page_item a{color:#adadad;}

This creates the basic CSS for the list items.

The PHP code

The wp_nav_menu function provides filters and an option to provide your own Walker class which we will use here. Basically, all we need to add is a item counter and add additional CSS classes at certain postitions. Based on the original ‘Walker_Nav_Menu’ class, not much needs to be added:

First, we need to have a variable ‘$item_count’ to keep the list items count:

class my_footer_menu_walker extends Walker {
var $item_count = 0;
/**
* @see Walker::$tree_type
* @since 3.0.0
* @var string
*/
var $tree_type = array( 'post_type', 'taxonomy', 'custom' );
....

Next, we need to modify the function ‘start_el’ by adding the previously declared variable and add our custom CSS classes to the generated list items:

function start_el(&$output, $item, $depth, $args) {
global $wp_query, $item_count;

$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

$class_names = $value = '';

$classes = empty( $item->classes ) ? array() : (array) $item->classes;
$classes[] = 'menu-item-' . $item->ID;

# START adding column classes
if($item_count <= 3)
{
$classes[] = 'firstcol';
}

if($item_count == 4)
{
$classes[] = 'colheader';
}

if($item_count > 3 &amp;amp;amp;amp;&amp;amp;amp;amp; $item_count <= 7)
{
$classes[] = 'secondcol';
}

if($item_count == 8)
{
$classes[] = 'colheader';
}

if($item_count > 7 &amp;amp;amp;amp;&amp;amp;amp;amp; $item_count <= 13)
{
$classes[] = 'thirdcol';
}
# END adding column classes

$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
$class_names = ' class="' . esc_attr( $class_names ) . '"';
....

Finally, at the end of the function we need to increase the counter:

...
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
$item_count ++;
}

The full code:

# Custom walker class for the wp_nav_menu
class my_footer_menu_walker extends Walker
{
	var $item_count = 0;
	/**
	* @see Walker::$tree_type
	* @since 3.0.0
	* @var string
	*/
	var $tree_type = array( 'post_type', 'taxonomy', 'custom' );

	/**
	* @see Walker::$db_fields
	* @since 3.0.0
	* @todo Decouple this.
	* @var array
	*/
	var $db_fields = array( 'parent' => 'menu_item_parent', 'id' => 'db_id' );

	/**
	* @see Walker::start_lvl()
	* @since 3.0.0
	*
	* @param string $output Passed by reference. Used to append additional content.
	* @param int $depth Depth of page. Used for padding.
	*/
	function start_lvl(&$output, $depth) {
		$indent = str_repeat("t", $depth);
		$output .= "n$indent<ul class="sub-menu depth-$depth">n";
	}

	/**
	* @see Walker::end_lvl()
	* @since 3.0.0
	*
	* @param string $output Passed by reference. Used to append additional content.
	* @param int $depth Depth of page. Used for padding.
	*/
	function end_lvl(&$output, $depth) {
		$indent = str_repeat("t", $depth);
		$output .= "$indent</ul>n";
	}

	/**
	* @see Walker::start_el()
	* @since 3.0.0
	*
	* @param string $output Passed by reference. Used to append additional content.
	* @param object $item Menu item data object.
	* @param int $depth Depth of menu item. Used for padding.
	* @param int $current_page Menu item ID.
	* @param object $args
	*/
	function start_el(&$output, $item, $depth, $args) {
		global $wp_query, $item_count;

		$indent = ( $depth ) ? str_repeat( "t", $depth ) : '';

		$class_names = $value = '';

		$classes = empty( $item->classes ) ? array() : (array) $item->classes;
		$classes[] = 'menu-item-' . $item->ID;

		# Hack for adding column classes
		if($item_count <= 3)
		{
			$classes[] = 'firstcol';
		}

		if($item_count == 4)
		{
			$classes[] = 'colheader';
		}

		if($item_count > 3 && $item_count <= 7)
		{
			$classes[] = 'secondcol';
		}

		if($item_count == 8)
		{
			$classes[] = 'colheader';
		}

		if($item_count > 7 && $item_count <= 13)
		{
			$classes[] = 'thirdcol';
		}

		$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item ) );
		$class_names = ' class="' . esc_attr( $class_names ) . '"';

		$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
		$id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

		$output .= $indent . '<li' . $id . $value . $class_names .'>';

		$attributes = ! empty( $item->attr_title ) ? ' title="' . esc_attr( $item->attr_title ) .'"' : '';
		$attributes .= ! empty( $item->target ) ? ' target="' . esc_attr( $item->target ) .'"' : '';
		$attributes .= ! empty( $item->xfn ) ? ' rel="' . esc_attr( $item->xfn ) .'"' : '';
		$attributes .= ! empty( $item->url ) ? ' href="' . esc_attr( $item->url ) .'"' : '';

		# A little hack to disable clicking on links
		$is_clickable = get_post_meta($item->object_id, 'link_disabled', true);
		$jsarg = ($is_clickable == '1') ? 'onclick="return false;"' : '';

		$item_output = $args->before;
		$item_output .= '<a'. $attributes .' '.$jsarg.'>';
		$item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
		$item_output .= '</a>';
		$item_output .= $args->after;

		$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );

		$item_count ++;
	}

	/**
	* @see Walker::end_el()
	* @since 3.0.0
	*
	* @param string $output Passed by reference. Used to append additional content.
	* @param object $item Page data object. Not used.
	* @param int $depth Depth of page. Not Used.
	*/
	function end_el(&$output, $item, $depth) {
		$output .= "</li>n";
	}
}

The Menu

Left to do is tell the wp_nav_menu to use our custom walker class:

wp_nav_menu( array( 'container_class' => '', 'container' => '', 'theme_location' => 'footer', 'walker' => new my_footer_menu_walker ) );

That’s it. ;-)

Please leave your comments, I’d like to know how you modify your menus.

© 2010 Swiss WP | Permalink | 10 comments | Add to del.icio.us
Post tags: css, php, walker_nav_menu, wp_nav_menu

1. Prevent Direct File Access

# No direct file load
if (!empty($_SERVER['SCRIPT_FILENAME']) && 'functions.php' == basename($_SERVER['SCRIPT_FILENAME']))
{
die ('He's dead, Jim!');
}

Put this code on the top of your functions.php file. It prevents users from directly accessing it via URL (http://yourblog.com/wp-content/themes/yourtheme/functions.php).

2. Set Debugging Variables

# Debugging
define( 'IS_SITE_DEBUG', true ); // Really up to you how you use this variable
error_reporting(E_ALL); // Shows ALL PHP errors. Set to 0 on a live site

Mostly when I create new themes, I set up a debug environment too. It helps me find possible errors more easy. The variable ‘IS_SITE_DEBUG’ is really helpful here. It allows the output of additional debug information while developing a theme. For ex. I always output some WP internal stuff like the current wp_query object in separate DIV’s.

3. File Paths

# Template directory, includes Win/XAMPP compatibility
define( 'CURRENT_TEMPLATE_DIR', str_replace( '', '/', get_template_directory() ) );

I’m developing on Windows, so I need those backslashes replaced.

4. Theme Header

# Set up the WordPress theme header
function my_custom_header()
{
# Add a custom Stylesheet
wp_enqueue_style( 'yui_reset', get_bloginfo('template_url').'/css/reset-min.css', '', '2.7.0', 'screen' );
# Add custom JavaScript
wp_enqueue_script( 'js_main', get_bloginfo('template_url').'/js/js_main.js', array( 'jquery', 'jquery-ui-core', 'jquery-ui-tabs' ), '1.0.0' );
}
# Add only if on front end, never on /wp-admin/
if ( ! is_admin() )
{
add_action('init', 'my_custom_header');
}

Instead of adding all required Stylesheets & Scripts into your header.php file, you can add them to your functions file. This also allows you to define dependencies of your scripts, like jQuery, which will automagically be added to the header as well. Requires wp_head(); to be called in your theme’s header. More info on wp_enqueue_style and wp_enqueue_script.

5. Custom Functions / Template Tags

if (!function_exists('getAdvertisings'))
{
function getAdvertisings( $limit = 5 )
{
$ads = get_bookmarks( 'category_name=advertisings&limit='.$limit );
return $ads;
}
}

Creating custom functions or template tags can save you a lot of time and there’s absolutely no limit on the use. From returning a simple object with posts like the example above to custom data to…whatever comes to your mind. You can then use these functions anywhere in your theme with a simple call to the function.

6. Helpers

function is_even_number(&$i)
{
return ($i % 2) ? true : false;
}

Helpers are useful if you have to want to output something depending on a condition. The above example can be used to iterate through items and depending on the current item counter is even or odd, maybe output the item in a different color (think of colored table rows for ex.).

7. Prevent Access To WP-Admin

# Disable access to wp-admin for Subscribers
if ( is_user_logged_in() && is_admin() ) {
global $current_user;
get_currentuserinfo();
$user_info = get_userdata($current_user->ID);
if ( $user_info->wp_user_level == 0 )
{
header( 'Location: '.get_bloginfo('home').'/wp-login.php?redirect='.get_bloginfo('home').'/wp-admin/' );
}
}

Personally I think subscribers should not be allowed access to /wp-admin/. The above example does exactly this. You can change the wp_user_level variable to another role if you want to prevent other users from accessing the back end.

8. No External Stuff While Working Locally

function is_live_site()
{
if (isset($_SERVER['HTTP_HOST']))
{
$_live_site_name = "tacocode.com";
$_compare_to = $_SERVER['HTTP_HOST'];
$pos = strpos($_live_site_name, $_compare_to);
return ($pos !== false) ? true : false;
}
}

I use this function mostly in the footer. I don’t want to load Google Analytics or other external stuff while working on the localhost.

9. Validate Email Address

function is_email_valid($email, $mx_lookup = false)
{
if(eregi("^([_a-z0-9-]+)(.[_a-z0-9-]+)*@([a-z0-9-]+)(.[a-z0-9-]+)*(.[a-z]{2,4})$", $email))
{
if($mx_lookup)
{
list($username, $domain) = split("@", $email);
return getmxrr($domain, $mxrecords);
}
else
{
return true;
}
}
else
{
return false;
}
}

Sometimes you need to validate email addresses. I find this function very useful (credits to http://webdeveloperplus.com)

10. Shortened URLs

function get_tiny_url( $url )
{
$tiny_url = file_get_contents( "http://tinyurl.com/api-create.php?url=".$url );
return $tiny_url;
}

Very useful if you want to include a shortened URL of your post somewhere.

Note

As a best practice always check if the function name is unused by adding:

if (!function_exists('your_function_name'))

around your functions (see #5) and PHP Docs.

© 2010 Swiss WP | Permalink | 10 comments | Add to del.icio.us
Post tags: code, theme

Code to do a quick re-numbering of ‘a span’ items in a unordered list:

jQuery(document).ready(function()
{
    renumber_featured_nav();
});

function renumber_featured_nav()
{
    var ftabscount = 1;
    jQuery("li.ftab a span").each(function()
    {
        jQuery(this).html(ftabscount);
        ftabscount++;
    });
}

© 2009 Swiss WP | Permalink | No comment | Add to del.icio.us
Post tags: code

# Exclude categories | archive.php
if ( is_home() || is_category('one') || is_category('two') )
{
    $current_cat = get_query_var( 'cat' );
    $exclude_cat = 3;
    $current_page = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    query_posts("cat=$current_cat,-$exclude_cat&paged=$current_page");
}
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();

This, unfortunately, didn’t work. I then thought of filtering via custom queries. The problem with custom queries is that the filter is applied to each and every query on the page. If you do:

# Exclude categories | functions.php
function fd_remove_cat( $nada )
{
  global $wp_query;
  if ( is_home() || is_category('one') || is_category('two') )
  {
     $wp_query->query_vars['cat'] = '-3';
  }
}
add_action('pre_get_posts', 'fd_remove_cat' );

this will work, but it affects all other queries on the page as well. If you have some custom ‘query_posts’ in your theme, category 3 will be stripped out of all queries on the page.

I came up with this solution:

# Exclude categories | archive.php
if ( is_category('one') || is_category('two') )
{
    global $wpdb;
    $paged = ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1;
    query_posts(
        array_merge(
            array
            (
                'category__in' => array($cat),
                'category__not_in' => array(3,4),
                'paged' => $paged
            ), $wp_query->query
        )
    );
}
//The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();

The above code preserves the original query and adds/alter defined query variables (also see query_posts, ‘Preserving the Original Query’).

I hope this post keeps you from wasting time while trying to alter the wp_query.

© 2009 Swiss WP | Permalink | 13 comments | Add to del.icio.us
Post tags: code, custom_query, php, query_posts, theme

© 2009 Swiss WP | Permalink | No comment | Add to del.icio.us
Post tags: theme, themes

Now, let’s say you have a form with a few elements and depending on their selection or values one or more fields are added to the form. Since you cannot validate a hidden element (because the user can’t make a selection or enter anything), you cannot add validation rules. You need to add/remove this rules dynamic depending on the user’s input.

Actually, the code is very simple. All you have to do is to catch the ‘change’, ‘blur’ or whatever event from the ‘other’ element and attach a simple function to add the validation rule. To go with the demo form this is it:

jQuery( jQuery("input[name='howhelp']") ).change( function()
{
  if ( jQuery("input[name='howhelp']:checked" ).val() == "help" )
  {
    jQuery("#whathelp").rules("add", "required");
    jQuery("#problems").show();
  }
  else
  {
    jQuery("#whathelp").rules("remove", "required");
    jQuery("#problems").hide();
  }
});

Simple. Let’s see what the code does line for line:

• line 1 tells to fire a function if the radiobuttons status have changed
• line 3 checks if the current selected radiobutton’s value is equal to ‘help’
• line 5 adds the validation rule to the hidden select ‘whathelp’
• line 6 shows the hidden select
• the rest removes the validation rule and hides the select, in this case the value was not equal to ‘help’

With this code, you can validate pretty much any complex form with the validate plugin.

Further reading:

• jQuery
• jQuery Validation plugin
• jQuery Validation plugin (documentation)

I’d like to know how you validate complex dynamic forms, so please leave your comments here.

© 2009 Swiss WP | Permalink | 11 comments | Add to del.icio.us
Post tags: dynamic, form, validation

As you may have seen I have a guest post on this blog written by Matt from phuketvogue.com. Since I am the only registered writer/author on this site, all posts are marked as ‘written by Toxane’ or something similar. I thought it would be just fair for the guest writer, to mark these posts with the corresponding author name and a link back to the author’s site.

What I didn’t want was to have the guest authors as registered WordPress users on my blog, just to keep things simple (and save). I came up with the following solution:

In my theme folder I have my ‘functions.php’ file and I added the following code to it:

// Guest Posts
function theAuthor()
{
	$guestName = get_post_custom_values("guestName");
	$guestLink = get_post_custom_values("guestLink");

	if ($guestName)
	{
		if ($guestLink)
		{
			echo '<a href="'.$guestLink[0].'" target="_blank">'.$guestName[0].'</a>';
		}
		else
		{
			echo $guestName[0];
		}
	}
	else
	{
		the_author();
	}
}

The code checks if the post has a custom field ‘guestName’. If the field is found, the code further checks if there’s a custom field ‘guestLink’. If that field is found as well, the code returns the name of the guest author as a hyperlink back to the guest authors website. If there’s no ‘guestLink’, only the guest author’s name is returned. If both custom fields are missing, the code returns ‘the_author()’ which is the registered WordPress user.

Next I replaced all occurences of ‘the_author()’ in the theme files with ‘theAuthor()’

To mark any post in your WordPress Blog as a guest post, you just add a custom field ‘guestName’ and the name of the guest author as value. If you want the guest author’s name appears as a hyperlink, just add a custom field ‘guestLink’ and the web address of the guest author as value.

That’s it. Simple and fair for your guest author(s).

© 2008 Swiss WP | Permalink | 18 comments | Add to del.icio.us
Post tags: code, theme, themes

Mystery Man - the default Gravatar

I just had a problem with my own gravatar not showing up on my own site for the comments I wrote. First I thought that clearing the browser cache would solve everything. I was wrong. After clearing the cache, deleting cookies and checking my gravatar (http://en.gravatar.com/site/check/), I was really out of (quick) ideas. Then it suddenly hit me: a few days ago I changed a few things in my Blog’s user accounts. I added new accounts with different user rights and merged the old accounts with the new ones.

After having a look at WordPress’s gravatar code (wp-includes/pluggable.php), everything was clear: WordPress actually pulls the user id and gets the email address which is stored in the user account data for this id. This ensures that if a user changes the email address in the user account, it will always pull the new gravatar associated with the new email address. The user id – for registered users – is stored in the comments table for each and every comment.

That said, if you change user accounts and a user id changes, you need to run

UPDATE wp_comments SET user_id = new_user_id WHERE user_id = old_user_id

otherwise you’re going to have a lot comments from the mystery man…

© 2008 Swiss WP | Permalink | 4 comments | Add to del.icio.us
Post tags: gravatar, mystery man

First, we need a PayPal form with the donation stuff inside:

<form id="form_paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
  <input type="hidden" name="cmd" value="_donations">
  <input type="hidden" name="business" value="paypal@email.com">
  <input type="hidden" name="item_name" value="My Donations Subject">
  <input type="hidden" name="no_shipping" value="0">
  <input type="hidden" name="no_note" value="1">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="tax" value="0">
  <input type="hidden" name="bn" value="PP-DonationsBF">
  <label for="">Amount (US$) : </label><input type="text" name="amount" id="input_amount" width="10" class="text" />
  <input type="submit" name="submit" value="Donate" class="submit" />
</form>

More information about the PayPal donation buttons and the form code behind can be found here: https://www.paypal.com/cgi-bin/webscr?cmd=_pdn_donate_techview_outside

Next, we need to add some more code to the form where we want to show the various messages displayed by jQuery. These messages are set to be hidden (display:none;):

<input type="submit" name="submit" value="Donate" class="submit" />&amp;amp;nbsp;&amp;amp;nbsp;
<span id="msg_moreamount" class="icon_warning red" style="display:none;">PayPal takes $0.35 commission for a $1 donation. Please enter at least $1.35 , thank you!</span>
<span id="msg_noamount" class="icon_warning red" style="display:none;">Please enter the amount you wish to donate and try again.</span>
<span id="msg_activity" style="display:none;"> <img src="images/loader.gif" align="absmiddle" />&amp;amp;nbsp;Transferring to PayPal, please wait...</span>

The jQuery script which actually checks and validates the form looks like this:

jQuery(document).ready(function()
{
	// the minimum required value to be entered.
	// in this case PayPal takes $0.35 from a $1
	// donation, hence we ask for at least $1.35
	var minimum_value = 1.35;

	// attach this script to the form's submit action
	jQuery('#form_paypal').submit(function()
	{
		// check if there is an amount entered
		if (jQuery('#input_amount').val() > null)
		{
			// is the amount equal to or higher than the minimum_value?
			if (jQuery('#input_amount').val() < minimum_value)
			{
				// need more amount
				// hide messages, show more amount error
				jQuery('#msg_noamount').hide();
				jQuery('#msg_moreamount').fadeIn();
				return false; // prevent the form from submitting
			}
			else
			{
				// amount is more than minimum_value
				// hide messages, show activity
				jQuery('#msg_moreamount').hide();
				jQuery('#msg_noamount').hide();
				jQuery('#msg_activity').fadeIn();
				return true; // submit the form
			}
		}
		else
		{
			// no amount entered at all
			// hide messages, show no amount error
			jQuery('#msg_moreamount').hide();
			jQuery('#msg_noamount').fadeIn();
			return false; // prevent the form from submitting
		}
	});
});

The code is documented so it should be clear what each block does.

The final step is to add some CSS styling:

.red {color:#ff0000;}
.icon_warning {background:transparent url(../images/exclamation.png) left no-repeat;padding:4px;padding-left:20px;}
form#form_paypal input {padding:3px;border:1px solid #ddd;background:#fefefe;}
form#form_paypal input#input_amount {width:50px;}
form#form_paypal .submit {cursor:pointer;border-style:outset;}

If you want to integrate this form into your WordPress Blog then this is the way to go:

In your WordPress Theme folder (wp-content/themes/yourtheme/) create a new file named ‘donate.php’. To make the file available as a WordPress page template you’ll need to add the following code at the top of the file:

<?php
/*
Template Name: Donate
*/
?>

A donation form template for the default theme would look like this:

<?php
/*
Template Name: Donate
*/
?>
<?php get_header(); ?>
<div id="content" class="narrowcolumn">
  <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post" id="post-<?php the_ID(); ?>">
    <h2>Make A Donation</h2>
    <p>If you think you have benefited or I have helped you in some way, by using any of my
    WordPress plugins or themes, please consider making a donation. Donations support the
    continued development of my websites and help cover the hosting costs.
    Donations of any size are gratefully accepted. Thank you!</p>
    <form id="ppDonate" action="https://www.paypal.com/cgi-bin/webscr" method="post">
      <input type="hidden" name="cmd" value="_donations">
      <input type="hidden" name="business" value="paypal@email.com">
      <input type="hidden" name="item_name" value="My Donations Subject">
      <input type="hidden" name="no_shipping" value="0">
      <input type="hidden" name="no_note" value="1">
      <input type="hidden" name="currency_code" value="USD">
      <input type="hidden" name="tax" value="0">
      <input type="hidden" name="bn" value="PP-DonationsBF">
      <label for="">Amount (US$) : </label>
      <input type="text" name="amount" id="ppAmount" width="10" class="text" />
      <input type="submit" name="submit" value="Donate" class="submit" />
      <span id="moreAmount" class="warningIcon red" style="display:none;">PayPal takes $0.35 commission for $1 donation.
      Please enter at least $1.35 , thank you!</span>
      <span id="noAmount" class="warningIcon red" style="display:none;">Please enter an amount to donate and try again.</span>
      <span id="ppGo" style="display:none;">
      <img src="<?php bloginfo('template_url'); ?>/images/loader.gif" align="absmiddle" />Transferring to PayPal, please wait...</span>
    </form>
    <p><small>Info : once you click on 'Donate', you will be transferred to PayPal where you can enter your payment information.</small></p>
  </div>
  <?php endwhile; endif; ?>
  <?php edit_post_link('Edit this entry.', '<p>', '</p>'); ?>
</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Next you need to create a page in WordPress, call it ‘Donate’, ‘Make A Donation’ or whatever you want the page title to be. You can leave the page content empty as we will use our template file. Scroll down to the ‘Page Template’ section and select your page template (‘Donate’ in our case). Save & publish the page.

Hopefully this short tutorial will be of some use for you (if so, don’t forget to donate ;) ) and if you still have some questions feel free to leave a comment below.

© 2008 Swiss WP | Permalink | 62 comments | Add to del.icio.us
Post tags: code, donation, form, paypal, tutorial

A theme can optionally use a functions file, which resides in the theme subdirectory and is named functions.php. This file basically acts like a plugin, and if it is present in the theme you are using, it is automatically loaded during WordPress initialization (both for admin pages and external pages). Suggested uses for this file:

* Define functions used in several template files of your theme
* Set up an admin screen, giving users options for colors, styles, and other aspects of your theme

The “Default” WordPress theme contains a functions.php file that defines functions and an admin screen, so you might want to use it as a model. Since functions.php basically functions as a plugin, the Function_Reference list is the best place to go for more information on what you can do with this file.

Ok, there’s a load stuff you can read into about the WordPress functions, but not much is written about this mysterious file or exactly how to use it. Here’s some info:

Open the functions.php file in your theme folder (create the file if it’s not there). Add a function to it between <?php and ?> :

// Function example. Returns the actual date
function show_date() {
    echo date('Y-m-d');
}

To use the function in your theme, place this code somewhere (i.e. page.php) inside :

<?php show_date(); ?>

The date should be shown on your page where you inserted the code. Pretty easy, huh. More? Read on…

Including stuff in the template header

For my part I always need to load some stuff in the header, sometimes under certain conditions:

if (! is_admin() ) { // If we are not in the admin, load stuff
    add_action('init', 'load_my_script'); // on initialization, execute the function load_my_scripts
    add_action('wp_head', 'load_my_css');
}

function load_my_script() {
    // load myscript.js version 1.0, which is dependent on 'jquery' and refer to it as 'MyScript'
    wp_enqueue_script('MyScript', get_template_directory_uri().'/js/myscript.js', array('jquery'), '1.0');
}

function load_my_css() {
    // load myscript.js version 1.0, which is dependent on 'jquery' and refer to it as 'MyScript'
    echo '<link rel="stylesheet" href="' . bloginfo('template_url') . '/css/style.css" type="text/css" media="screen" />'."n";
}

You can check for certain conditions i.e. is_page(), is_home() and so on and add stuff to the header respectively. It makes more sense and saves you bandwidth if you load your JavaScript library which checks the contact form fields for errors only on the page on which the form appears.

Adding custom stuff

Personally I don’t like it when I work on a theme and while testing the theme locally, it needs to load stuff from the internet like the Google analytics code, sponsor banners and other things. I like it quick. The following code is a simple solution. If the page loads local, don’t load external stuff, if it’s on the server in the internet, then load everything. Sometimes, this speeds up things drastically.

In the functions.php add:

// Function to stop external things from being loaded while on localhost
function is_local() {
  $is_devbox = false;
  $this_host = gethostbyaddr($_SERVER['REMOTE_ADDR']);
  $this_host == 'localhost' ? $is_devbox = true : $is_devbox = false;
  return $is_devbox;
}

and in the template add:

<?php if(! isLocal() ) { ?>
// Add all your stuff here you don't want to load while on localhost i.e.
// your google analytics code.
<?php } ?>

Query the WordPress Database

There’s a widget for the recent posts. What if we don’t want to use widgets in our sidebar? We create the function:

function get_recent_posts($number) {
// code taken and stripped from wp-includes/widgets.php
if ( !$number || $number <= 5 )
	$number = 5;
else if ( $number < 1 )
	$number = 1;
else if ( $number > 15 )
	$number = 15;
else
	$number = $number;

$q = new WP_Query(array('showposts' => $number, 'what_to_show' => 'posts', 'post_status' => 'publish'));
if ($q->have_posts()) :
?>
<ul>
<?php  while ($r->have_posts()) : $r->the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php if ( get_the_title() ) the_title(); else the_ID(); ?> </a></li>
<?php endwhile; ?>
</ul>
<?php
wp_reset_query();  // Restore global post data stomped by the_post().
endif;
}

Place the following code in the template where you want to show the links to your latest posts:

<?php get_recent_posts(8); // latest 8 posts ?>

Or you could include a RSS Feed:

// Retrieving a RSS feed
function getRSS($uri) {
// http://codex.wordpress.org/Function_Reference/get_rss
$xAbspath = str_replace("","/",ABSPATH);  // Win/XAMPP compatibility
require_once($xAbspath.'/wp-includes/rss-functions.php');
echo '<ul>';
get_rss($uri);
echo '</ul>';
}

And on your page:

<?php getRSS('http://www.swisswp.com/feed') ?>

There’s really a lot of functionality you can add to your WordPress theme just by adding php functions to the functions.php file. A good start is the functions.php in the ‘default’ theme folder. It shows also how you can add a theme admin page. Go, modify your theme and add some functionality. But keep in mind: less is often more.

© 2008 Swiss WP | Permalink | One comment | Add to del.icio.us
Post tags: code, php, theme, themes