Theme Functionality

Summary: Learning about the different theme functionality in WordPress such as Custom Header, Sidebars, Navigation Menus, Pagination and Featured Images.

Custom Header

Custom headers allow site owners to upload their own “title” image to their site, which can be placed at the top of certain pages. These can be customized and cropped by the user through a visual editor in the Appearance > Header section of the admin panel. We may also place text beneath or on top of the header. To support fluid layouts and responsive design, these headers may also be flexible. Headers are placed into a theme using get_custom_header(), but they must first be added to our functions.php file using add_theme_support()

When we enable Custom Headers in our theme users can change their header image using the WordPress theme Customizer. This gives users more control and flexibility over the look of their site.

<?php
function themename_custom_header_setup() {
	$args = array(
		'default-image'      => get_template_directory_uri() . 'img/default-image.jpg',
		'default-text-color' => '000',
		'width'              => 1000,
		'height'             => 250,
		'flex-width'         => true,
		'flex-height'        => true,
	);
	add_theme_support( 'custom-header', $args );
}
add_action( 'after_setup_theme', 'themename_custom_header_setup' );

Displaying Custom Header

To display the custom header, function get_header_image() retrieves the header image. get_custom_header() gets the custom header data.

<?php if ( get_header_image() ) : ?>
	<div id="site-header">
		<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">
			<img src="<?php header_image(); ?>" width="<?php echo absint( get_custom_header()->width ); ?>" height="<?php echo absint( get_custom_header()->height ); ?>" alt="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>">
		</a>
	</div>
<?php endif; ?>

Sidebars

A sidebar is any widgetized area of our theme. Widget areas are places in our theme where users can add their own widgets. We do not need to include a sidebar in our theme but including a sidebar means users can add content to the widget areas through the Customizer or the Widgets Admin Panel.

To begin, register_sidebar() has several parameters that should always be defined regardless of whether they are marked as optional. These include x, y, and z.

name – our name for the sidebar. This is the name users will see in the Widgets panel.
id – must be lowercase. We will call this in our theme using the dynamic_sidebar function.
description – A description of the sidebar. This will also be shown in the admin Widgets panel.
class – The CSS class name to assign to the widget’s HTML.
before_widget – HTML that is placed before every widget.
after_widget – HTML that is placed after every widget. Should be used to close tags from before_widget.
before_title – HTML that is placed before the title of each widget, such as a header tag.
after_title – HTML that is placed after every title. Should be used to close tags from before_title.

<?php
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
	/* Register the 'primary' sidebar. */
	register_sidebar(
		array(
			'id'            => 'primary',
			'name'          => __( 'Primary Sidebar' ),
			'description'   => __( 'A short description of the sidebar.' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget'  => '</div>',
			'before_title'  => '<h3 class="widget-title">',
			'after_title'   => '</h3>',
		)
	);
}

Displaying Sidebar

<div id="sidebar-primary" class="sidebar">
	<?php dynamic_sidebar( 'primary' ); ?>
</div>

Navigation Menus

Navigation Menus are customizable menus in our theme. They allow users to add Pages, Posts, Categories, and URLs to the menu. To create a navigation menu we will need to register it, and then display the menu in the appropriate location in our theme.

function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => __( 'Header Menu' ),
      'extra-menu' => __( 'Extra Menu' )
     )
   );
 }
 add_action( 'init', 'register_my_menus' );

Displaying Menus

wp_nav_menu( array( 'theme_location' => 'header-menu' ) );

Pagination

The most common use for pagination in WordPress sites is to break up long lists of posts into separate pages. Whether we’re viewing a category, archive, or default index page for a blog or site, WordPress only shows 10 posts per page by default.

<?php if ( have_posts() ) : ?>

    <!-- Start the pagination functions before the loop. -->
    <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
    <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
    <!-- End the pagination functions before the loop. -->

	<!-- Start of the main loop. -->
	<?php while ( have_posts() ) : the_post();  ?>

	<!-- the rest of our theme's main loop -->

    <?php endwhile; ?>
    <!-- End of the main loop -->

    <!-- Start the pagination functions after the loop. -->
    <div class="nav-previous alignleft"><?php next_posts_link( 'Older posts' ); ?></div>
    <div class="nav-next alignright"><?php previous_posts_link( 'Newer posts' ); ?></div>
    <!-- End the pagination functions after the loop. -->

<?php else : ?>

	<?php _e( 'Sorry, no posts matched our criteria.' ); ?>

<?php endif; ?>

Featured Images & Post Thumbnails

Featured images also sometimes called Post Thumbnails are images that represent an individual Post, Page, or Custom Post Type. When we create our Theme we can output the featured image in a number of different ways, on our archive page, in our header, or above a post.

add_theme_support( 'post-thumbnails' );
if ( function_exists( 'add_theme_support' ) ) {
    add_theme_support( 'post-thumbnails' );
    set_post_thumbnail_size( 150, 150, true ); // default Featured Image dimensions (cropped)
    add_image_size( 'category-thumb', 300, 9999 ); // 300 pixels wide (and unlimited height)
}

Displaying Featured Image

<?php if ( has_post_thumbnail()) : ?>
    <a href="<?php the_permalink(); ?>" alt="<?php the_title_attribute(); ?>">
        <?php the_post_thumbnail(); ?>
    </a>
<?php endif; ?>