5 useful tips on developing WordPress theme

I always find WordPress interesting when it comes to functioning it. WordPress, in a nutsell, is a blog engine, which give you the capabilities of, creating entries in a page, create pages, comment here and there. But recent update of WordPress helps so much on developing it into all other kind of website.

Here are a few which I personaly think a good hack to develop a website other than a weblog using WordPress.

Feature entries / Specific categories update

WordPress feature slider

This is useful when it comes to a web magazine or a business blog.

<?php
wp_reset_query();
query_posts(‘showposts=’5&cat=Feature’);
if (have_posts()) : while (have_posts()) : the_post();
?>

<h1><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></h1>
<?php the_content(); ?>

<?php endwhile; endif; wp_reset_query(); ?>

The wp_reset_query(); is to destroy the specific query. Since it reset the query, you are free to add as much as you want on your design.

Widgetize

WordPress widgetized

This is, almost certainly a feature never missed. But how to write a good one and understandable? Name it and style it. The widget code looks like this:

if ( function_exists(‘register_sidebar’) )
register_sidebar(array(
‘name’ => ‘Sidebar’,
‘before_widget’ => ‘<div class=”sidebox”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2>’,
‘after_title’ => ‘</h2>’,
));

On the ‘name’ => give it a name on each and every widget you designed. Some theme has more than 5 widgetized areas.

Theme options

WordPress theme options

Themeforest blog has a great tutorial about how to create a theme option. However, how you develop it is the key.

What can a theme option possibly do? Here are list of what I did after the tutorial.

  • Enable disable – Almost any thing, from breadcrumb, social icons and etc.
  • Feature slider with category name and number of entries
  • Twitter username and it’s number of update or enable/disable the update
  • Changing stylesheet

It may seems hard to create on, but it definitely easier if you understand how it work, even you’re a PHP noob, like me :) Below I compiled a list of auto-generated checkbox, text form, textarea and select input.

$settings = array(
‘desc’ = “Something about the description’,
)

$themename = “WP theme option”;
$shortname = “mythemename”;
$options = array (

array(
“name” => “Function name”,
“id” => “a_message”,
“std” => $settings['_message'],
“type” => “textarea”,
“note” => “A message.”,
),
array (
// More function //
),

);
function mytheme_admin() {
global $themename, $shortname, $options;
if ( $_REQUEST['saved'] ) echo ‘<div id=”message” class=”updated” style=”position: absolute; top: 0px; right: 0px;”><p><strong>Settings saved</strong></p></div>’;
if ( $_REQUEST['reset'] ) echo ‘<div id=”message” class=”updated” style=”position: absolute; top: 0px; right: 0px;”><p><strong>Settings reset</strong></p></div>’;
?>

<form method=”post” action=”">

<?php } elseif ($value['type'] == “text”) { ?>
<p>
<h2><?php echo $value['name']; ?></h2>
<input onfocus=”this.select();” name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>” type=”<?php echo $value['type']; ?>” value=”<?php if ( get_settings( $value['id'] ) != “”) { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>” />  <?php echo $value['note']; ?></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “textarea”) { ?>
<p>
<h2><?php echo $value['name']; ?></h2>
<textarea name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>”><?php if ( get_option( $value['id'] ) != “”) { echo stripslashes(get_option( $value['id'] )); } else { echo stripslashes($value['std']); } ?></textarea>
<?php echo $value['note']; ?></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “select”) { ?>
<p>
<h2>?php echo $value['name']; ?></h2>
<select name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>”>
<?php foreach ($value['options'] as $option) { ?>
<option <?php if ( htmlspecialchars(get_option( $value['id'] )) == htmlspecialchars($option)) { echo ‘ selected=”selected”‘; } elseif ($option == $value['std']) { echo ‘ selected=”selected”‘; } ?>><?php echo $option; ?></option>
<?php } ?>
</select></p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “checkbox”) { ?>
<p>
<h2>?php echo $value['name']; ?></h2>
<?php if(get_settings($value['id'])){ $checked = “checked=\”checked\”"; }else{ $checked = “”;}?>
<input type=”checkbox” name=”<?php echo $value['id']; ?>” id=”<?php echo $value['id']; ?>” value=”true” <?php echo $checked; ?> />  <?php echo $value['note']; ?>
</p>
<?php echo $value['div']; ?>

<?php } elseif ($value['type'] == “header”) { ?>
<?php } }?>

<div style=”clear: both; padding: 20px; overflow: hidden”>
<input name=”save” type=”submit” class=”button-primary” value=”Save changes” /><input type=”hidden” name=”action” value=”save” /></form>
<form method=”post” action=”"><input name=”reset” class=”button” type=”submit” value=”Reset” /><input type=”hidden” name=”action” value=”reset” /></form>

<?php }
add_action(‘admin_menu’, ‘mytheme_add_admin’);
foreach ($options as $value) { if (get_settings( $value['id'] ) === FALSE) { $$value['id'] = $value['std']; } else { $$value['id'] = get_settings( $value['id'] ); } }
foreach ($settings as $k=>$v) { $var = $shortname.’_’.$k; if (!empty($$var)) $settings[$k] = $$var; }
function dp_settings($key) { global $settings; return $settings[$key];}
?>

There, I placed all the possibility use of the options. Text, textarea, checkbox and dropdown select. Go wild with your creativity!

Page template

WordPress page template

Sometimes, you can’t get away from create a page with a unique design. That’s what most web designer will do, even a blog.

<?php /* Template Name: Template name */ ?>
<?php get_header(); ?>
Your content is here
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Web designers likes to custom design a profile page on their weblog. That is when the page template comes to play.

Custom homepage without setting

WordPress static setting

Some of us like to use the static option to set a specific homepage. But that will only help query run more and longer. To shorten it and go straight into the custom design, this code:

<?php if(is_home()) { ?>

<?php include(‘custom_design_content.php’); ?>

<?php } else { ?>

<?php get_header() ?>
<div id=”content”>
<?php include(TEMPLATEPATH . ‘/post/feature.php’); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php include(TEMPLATEPATH . ‘/post/post.php’); ?>
<?php endwhile; ?><!– END Loop –>
<?php pagination(); ?>
<?php include (TEMPLATEPATH . ‘/post/pagenavi.php’); if(function_exists(‘wp_pagenavi’)) { wp_pagenavi(); } ?>
<?php else : ?>
<?php include(TEMPLATEPATH . ‘/post/none.php’); ?>
<?php endif; ?>
</div><!– END Content –>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

<?php } ?>

So if it is on homepage or index page, it will directly show custom_design_content.php instead of the normal blog entries listing.

However, the big down side is that it cannot use static to show a blog entries page.

WordPress 3.0 was said to be better developed and was like a CMS instead of blog engine. Can’t wait for the release now :) Let’s see if the release helps cut short all the tips and hacks we usually found online.

Share this article Digg it StumbleUpon del.icio.us

Some related articles you might be interested:

Leave a reply