How to Use WordPress Functions to Jump-Start Theme Development

Posted on Updated on

After a couple of years (or even months) of conceiving and evolving WordPress topics, particularly for purchasers, you start to realize that a lot of the functionality can be normalized or distilled down into a “starter theme or kit”. This helps get the development method started and going along apace.

The best first step in doing this, I’ve discovered, is to nail down most of the widespread purposes and include them in the functions.php. This functions.php document will need to be extended to meet the specific theme’s needs as new tasks arise, but it will supply a more than awesome beginning point for development.

There are about 13 key purposes that I like to start out with and will add to them as required…

1. Custom Menu Support

The navigation menu characteristic, introduced in WordPress 3.0, permits for the intuitive creation and maintaining of navigation menus in topics.

At the very smallest, a benchmark theme will need a main navigation list, possibly in the header and a secondary navigation list in the footer. To do this, we will register those two meal lists “Main list” and “Secondary list”
While this isn’t a particularly new feature, its still pleasant to wrap it in an if function_exists() just in case the client is attached in a pre 3.0 installation:

In the functions.php document, include the following:

if( function_exists( 'register_nav_menus') ) {
  register_nav_menus(
    array(
      'main_menu'=> __( 'Main Menu', 'cake'),
      'secondary_menu'=> __( 'Secondary Menu', 'cake'),
    )
  );
}

Now that the Menus are registered, we need to tell the theme where to output them. We’d like the Main Menu to appear in our header. So, in our header.php file, we include the following code:

<?php if( has_nav_menu( 'main_menu') ) { ?>
  <?php $defaults = array(
    'theme_location'  => 'main_menu',
    'menu'            => '',
    'container'       => false,
    'echo'            => true,
    'fallback_cb'     => false,
    'items_wrap'      => '<ul id="%1$s"> %3$s</ul>',
    'depth'           => 0);
    wp_nav_menu( $defaults );
  ?>
<?php } else{ ?>
  <ul>
    <?php wp_list_pages('title_li='); ?>
  </ul>
<?php } ?>

First, we check to see if we have a menu called ‘main_menu’ defined and if we do, we insert its contents here, otherwise we fallback to the default wp_list_pages() which we can further customize to display the links as we need.

If you’d like even further customization of the menu, see the WordPress codex page on wp_nav_menu() function.

We want the secondary menu to appear in the footer, so we open up the footer.php and include the following code:

<?php if( has_nav_menu( 'secondary_menu') ) { ?>
  <?php $defaults = array(
    'theme_location'  => 'secondary_menu',
    'menu'            => '',
    'container'       => false,
    'echo'            => true,
    'fallback_cb'     => false,
    'items_wrap'      => '<ul id="%1$s"> %3$s</ul>',
    'depth'           => 0);
  wp_nav_menu( $defaults );
  ?>
<?php } else{ ?>
  <ul>
    <?php wp_list_pages('title_li='); ?>
  </ul>
<?php } ?>

2. Style the Visual Editor

This function permits you to use made-to-order CSS to style the WordPress TinyMCE visual reviewer.

Conceive a CSS document named editor-style.css and paste your methods interior. As a placeholder, I like to start with methods in the editor-style.css file of the Twenty Twelve theme.

In the functions.php add the following:

add_editor_style();

If you don’t want to use the name “editor-style” for your CSS file and also want to move the file elsewhere, e.g. in within a css directory, then modify the function.

For example, I want to name my file tiny-mce-styles.css and I want it within my CSS directory; so my function will look like this:

add_editor_style('/css/editor-style.css');

While we’re at it, we might as well style the editor for right-to-left languages. In the theme directory, create a CSS file called editor-style-rtl.css and, at the very least, include the following:

html .mceContentBody {
  direction: rtl;
  unicode-bidi: embed;
}
li {
  margin: 024px 00;
  margin: 01.714285714rem 00;
}
dl {
  margin: 024px;
  margin: 01.714285714rem;
}
tr th {
  text-align: right;
}
td {
  padding: 6px 06px 10px;
  text-align: right;
}
.wp-caption {
  text-align: right;
}

Again, as a placeholder, the above styles are from the Twenty Twelve theme. Restyle and extend as needed.

3. Custom Avatar Support

Most persons commenting on blogs online have an avatar associated with them. If, however, they don’t and you don’t particularly like the WordPress default avatar choices, you can characterise your own.

To do so, include the following code in your functions.php:

if( !function_exists('cake_addgravatar') ) {
  functioncake_addgravatar( $avatar_defaults ) {
    $myavatar = get_template_directory_uri() . '/images/avatar.png';
    $avatar_defaults[$myavatar] = 'avatar';
    return$avatar_defaults;
  }
  add_filter( 'avatar_defaults', 'cake_addgravatar');
}

What we’re doing here first, is checking to see if the function exists. If it does, we add a filter that tells WordPress to use our custom defined avatar as the default.

We are telling WordPress to find this avatar in our “images” directory inside the theme directory. Next step, obviously, is to create the image itself and upload it to the “images” folder.

4. Post Formats

The mail formats characteristic permits you to customize the style and production of mails. As of this composing, there are 9 normalized mail formats that users can choose from: aside, gallery, connection, likeness, extract, status, video, audio, and brief talk. In supplement to these, the default “Standard” mail format shows that no mail format is particular for the specific mail.

To add this functionality to your topic, include the following cipher in your functions.php, identifying the mail formats you’ll be taking advantage of. e.g. If you only desire the apart, likeness, link, extract, and rank Post Formats, your code should look like this:

add_theme_support( 'post-formats', array( 'aside', 'image', 'link', 'quote', 'status') );

5. Featured Image Function

The featured image function, as the codex explains, allows the author to choose a representative image for Posts, Pages or Custom Post Types.

To enable this functionality, include the following code in your functions.php:

add_theme_support( 'post-thumbnails');

We could halt there and depart it up to WordPress to define the thumbnail dimensions or we could take control and characterise them ourselves. We’ll do the last mentioned, conspicuously!

Let’s say we’re running a magazine site where the featured likeness will emerge in at smallest 3 different sizes. Maybe one large image if the post is boasted or is the newest, a medium dimensions image if its just a mail among the rest and a normal dimensions perhaps to appear elsewhere.

We take advantage of the add_image_size() function that instructs WordPress to make a exact replicate of our boasted image in our defined dimensions.
To do this, we add the following to the functions.php:

// regular size
add_image_size( 'regular', 400, 350, true);

// medium size
add_image_size( 'medium', 650, 500, true);

// large thumbnails
add_image_size( 'large', 960, '');

See how to work with the add_image_size() function to either soft crop or hard crop your images on the WordPress codex page.

6. Attachment Display Settings

Once we’ve defined the above image sizes (regular, medium and large) — and since by default WordPress doesn’t do it for us — we’ll add the ability to select our those image sizes from theAttachment Display Settings interface.

It would be nice if you could, when writing a post, insert the desired size image by selecting it from the dropdown as you normally would for the WordPress default sizes.

To do this, we add the following to our functions.php:

// show custom image sizes on when inserting media
functioncake_show_image_sizes($sizes) {
  $sizes['regular'] = __( 'Our Regular Size', 'cake');
  $sizes['medium'] = __( 'Our Medium Size', 'cake');
  $sizes['large'] = __( 'Our Large Size', 'cake');
  return$sizes;
}
add_filter('image_size_names_choose', 'cake_show_image_sizes');

With that in place, we can select our image sizes.

7. Add Feed Links (instead of old RSS code in head)

This one is easy. If you’ve been construction WordPress themes for a while, you’ll recall the days when you had to manually include cipher to output the RSS feed right in the header.php. This approach is cleaner and relies on the wp_head() activity snare to yield the essential code.

In the functions.php file, include the following:

// Adds RSS feed links to for posts and comments.
add_theme_support( 'automatic-feed-links');

Make sure that you have it in the header.php, right before end of &rgt;/head&lgt;

8. Load Text Domain

With this function you take the first step towards making your theme available for translation.

Its best to call this function from within the after_setup_theme() action hook i.e. after the setup, registration, and initialization actions of your theme have run.

add_action('after_setup_theme', 'my_theme_setup');
functionmy_theme_setup(){
  load_theme_textdomain('my_theme', get_template_directory() . '/languages');
}

Now add a directory named ‘languages‘ in your theme directory.

You can learn more about load_theme_textdomain() function on the WordPress codex page.

9. Define Content Width

Content width is a feature in themes that allows you to set the maximum allowed width for videos, images, and other oEmbed content in a theme.

That means, when you paste that YouTube URL in the editor and WordPress automatically displays the actual video on the front end, that video will not exceed the width you set using the $content_width variable.

if( ! isset( $content_width ) )
$content_width = 600;

WordPress also recommends the addition of the following CSS:

.size-auto,
.size-full,
.size-large,
.size-medium,
.size-thumbnail {
  max-width: 100%;
  height: auto;
}

While this is helpful, its a bit hefty presented. It characterises the content width for all content. What if you liked videos of a larger breadth on sheets than in posts and an even bigger dimensions in a made-to-order post type? Currently, there is no way to characterise this. There is however a feature request proposing the inclusion of the $content_width variable into the built-inadd_theme_support().

10. Dynamic Sidebar

Your typical theme will have at least one sidebar. The code to define the sidebar is pretty straightforward.

Add the following to your functions.php:

if(function_exists('register_sidebar')){
  register_sidebar(array(
    'name'=> 'Main Sidebar',
    'before_widget'=> '<aside id="%1$s">',
    'after_widget'=> '</aside>',
    'before_title'=> '<h3>',
    'after_title'=> '</h3>',
  ));
}

This registers and defines a sidebar named “Main Sidebar” and its HTML markup.

You can learn more about the register_sidebar() function on the WordPress codex page.

You’ll routinely find the need to have more than that one sidebar so you can just copy/paste the above code and change the name.

There is also a register_sidebars() function that will allow you to register and define multiple sidebars all at once but it doesn’t give you the flexibility of giving each new sidebar a unique name.

11. Custom “more” Link Format

If you’re displaying excerpts of your posts on a blog index page, by default WordPress will show [...] to indicate there’s more “after the jump”.

You will most likely want to add a “more link” and define how that looks.

To do this we need to add the following code to our functions.php:

functionnew_excerpt_more($more) {
    global $post;
  return'...

<a href="'. get_permalink($post->ID) . '"class="read_more">read more →</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

This adds an ellipses ‘‘ right after the excerpt and includes a read more link after two break tags. You can rename and style the read_more CSS class for the link as desired.

12. Basic Pagination

Each theme might have different pagination needs but it’s always safest to start with a nice default functions: previous_posts_link() and next_posts_link().

functioncake_content_nav( $nav_id ) {
  global $wp_query;

  if( $wp_query->max_num_pages > 1) : ?>
    <nav id="<?php echo $nav_id; ?>"class="content_nav clearfix">
      <ul>
        <li><?php previous_posts_link( __( '← newer ', 'cake') ); ?></li>
        <li><?php next_posts_link( __( 'older →', 'cake') ); ?></li>
      </ul>                
    </nav>
  <?php endif;
}?>

13. Redirect After Theme Activation

If you have special instructions in your theme eg. in your theme options page that you’d like the user to see when they first activate the theme, you can use the following function to redirect them there:

if(is_admin() && isset($_GET['activated']) && $pagenow == "themes.php")
  wp_redirect('themes.php?page=themeoptions');

Pay special attention to the wp_redirect() function. Make sure to replace the ‘themes.php?page=themeoptions‘ with the URL of your page.

14. Hide Admin Bar (During Development)

During wordpress development, I sometimes find the WordPress admin (tool) bar to be quite distracting.

It’s in a fixed position at the top of the window and depending on my layout can cover some elements of the header.

While still designing and developing, I like to hide the admin bar with this handy function.

show_admin_bar( false);

Do you have any favourite functions for jump starting WordPress template development? What functions would you like to see? Let us know in the comments.

Advertisements

5 thoughts on “How to Use WordPress Functions to Jump-Start Theme Development

    tapis d'éveil bébé said:
    November 6, 2013 at 8:43 am

    Hmm it seems like your blog ate myy first comment (it was super long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog.
    I as well am an aspiring blog writer but I’m still new to everything.
    Do you have any helpful hints for novice blog writers?
    I’d definitely appreciate it.

    lit parapluie pas cher said:
    November 7, 2013 at 2:35 pm

    Wow, fantasticc blog layout! How long have you been blogging for?
    you made blogging look easy. The ovberall look
    of yiur website is great, as well ass the content!

    touchpascher.info said:
    November 7, 2013 at 4:45 pm

    I am regular reader, how are you everybody?
    This post posted at this web page is actually nice.

    Pamela Weber said:
    November 11, 2013 at 4:00 am

    I am truly happy to glance at this blog posts which contains
    lots of valuable data, thankjs for providing such information.

    Montre said:
    November 19, 2013 at 10:10 am

    Amazing issues here. I’m very satisfied to see your post.
    Thank you so much and I am having a look forward to contact you.
    Will you please drop me a e-mail?

Comments are closed.