Theme creation basics

Posted on 1st February, 2015 Leave a Comment

Adding Widgets to your theme

Open your functions.php then find or add the register_sidebar function.

/*
 * WIDGETS
 *************************************************************/
// This is the function that holds all the new widget items.
if (function_exists('register_sidebar')) {

	/* The new widget is added below, give it a logical description and a name relevant to it's position in the website */
	register_sidebar(array(
		'name' => 'Footer',
		'id' => 'footer-one',
		'description' => 'Drag a text widget into this box and enter your company details.',
		'before_widget' => '<li id="%1$s" class="custom-class widget %2$s">', // Change the tag if you don't want a list item
		'after_widget' => '</li>', 
		'before_title' => '<h5>', 
		'after_title' => '</h5>'
		));

}

Then to display the widget area in the theme, because we’ve created a footer widget let’s include this call where it should be displayed.

<footer>
	<ul>
		<?php /* Add the widget between the html ul tags because we're wrapping the widget in li's 
			*/
			if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('footer-one')) : endif; ?>
	</ul>
</footer>

Adding new image sizes:

In your funcions.php

/*
 * ADD THEME SUPPORT FOR POST-THUMBNAILS
 *************************************************************/
add_theme_support( 'post-thumbnails' );
	set_post_thumbnail_size( 84, 84, true); // Sets the default post thumbnail to 84px x 84px
	add_image_size( 'custom-thumbnail', 250, 250, true ); // Creates a new image size and "true" crops the image.
	add_image_size( 'another-slide', 600, 480 ); // by removing the "true" the image is scaled.

To display these in our theme. For example if you want to include these in your home page loop.

// Below we're adding the default thumbnail to the header, to sit next to the post title.
<article id="post-<?php the_ID(); ?>">
	<header>
		<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail(); ?></a>
		<h1><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h1>
		<p>Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?></p>
	</header>
	<section>
		<?php the_excerpt('Read more on "'.the_title('', '', false).'" &raquo;'); ?>
	
	</section>
	<footer>
		<p><?php the_tags('Tags: ', ', ', '<br>'); ?> Posted in <?php the_category(', '); ?> &bull; <?php edit_post_link('Edit', '', ' &bull; '); ?> <?php comments_popup_link('Respond to this post &raquo;', '1 Response &raquo;', '% Responses &raquo;'); ?></p>
	</footer>
</article>

To display one of the custom sized image sizes we created then you would include the image name.

 // This will display the 600px x 480px thumbnail.
<?php the_post_thumbnail( 'another-slide' ); ?> 

Adding a new menu area:

In your funcions.php

/*
 * REGISTER NAVIATION MENU
 *************************************************************/

function register_my_menu() { //REGISTER NAV MENU
	register_nav_menu('header-menu',__( 'Header Menu' )); 
}
add_action( 'init', 'register_my_menu' );

Then add this to where you’d like to display your menu.

<nav class="header-menu">
    <?php // We use the menu name we used in the function above.
            wp_nav_menu( array( 'theme_location' => 'header-menu')); ?>
</nav>

Linking to files from your theme

Often you’ll need to add new css, js or even link to images within your theme. To get the themes directory you can use this.

<?php bloginfo('template_directory'); ?> 

/* USE IT IN YOUR THEME LIKE THIS */
<link rel="stylesheet" type="text/css" href="<?php bloginfo('template_directory'); ?>/css/other.css" media="screen">
<img src="<?php bloginfo('template_directory'); ?>/images/image.png">

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]