Themes

  • A Theme defines the presentation or theming layer of the WordPress application.
  • Many themes can be installed but only one can be active at a time. Themes are activated from within the WordPress admin panel.
  • All files for each installed theme reside in their own directory in /wp-content/themes/.
  • WordPress includes a default theme. Examine the files in the default theme for working examples.
  • A theme must have at least the stylesheet file style.css and the index.php file present in it’s theme directory to be available in the admin panel.

style.css

/wp-content/themes/{my_theme}/style.css

/*
Theme Name: WattsWork
Theme URI: https://github.com/daniel-watts/dev.wattswork.wordpress.theme
Author: Daniel Watts
Author URI: http://wattswork.com/
Description: A responsive WordPress theme designed for the "dev.wattswork.com" website. Open for public use.
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: wattswork, minimal
Text Domain: wattswork
*/

index.php

/wp-content/themes/{my_theme}/index.php

  • The index.php file is the default template file for every front-end request, and is required for the theme to work.
  • All other template files fall-back to the index file.
  • Template logic and file includes for the theme should take place the index file.
/**
 * The main WattsWork Theme WP template file.
 *
 * @package WordPress
 * @subpackage WattsWork
 */

functions.php

/wp-content/themes/{my_theme}/functions.php

  • The functions.php file is the default fall-back file for every request and is where template logic and file includes for the theme should take place.
/**
 * The WattsWork Theme WP functions file.
 *
 * @package WordPress
 * @subpackage WattsWork
 */

Theme Features

  • Theme Features are functionality that may be optionally added to a theme.
  • Themes must register each individual Theme Feature. Registration functions should be called in the theme’s functions.php file.
  • Adding Theme Features usually means getting an editable field in the admin page for the post, and some template methods to print output to your theme.
Feature Registered with Description
Post Thumbnails add_theme_support('post-thumbnails') An image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this image is up to the theme.
Sidebars register_sidebar($args) A vertical column provided by a theme for displaying information other than the main content of the web page. Sidebars usually contain widgets that an administrator of the site can customize.
Navigation Menus register_nav_menus() Add customizable navigation menus to a theme. Using menus requires adding display code to theme files.
Theme Markup add_theme_support('html5', $args) Allows themes to explicitly choose to apply HTML5 markup for search forms, comment forms, comment lists, gallery and caption. The second parameter accepts one or more values indicating which HTML5 features to support and is a required parameter for forward compatibility reasons.
Title Tag add_theme_support('title-tag') Allows themes to use future-proofed title tags in the HTML <head> tag.
Custom Headers add_theme_support('custom-header') A custom header is an image that is chosen as the representative image in the theme top header section.
Editor Style add_editor_style() Allows links to a custom stylesheet file in the TinyMCE editor within the post edit screen.
Automatic Feed Links add_theme_support('automatic-feed-links') Adds RSS feed links to HTML <head> tag.
Content Width $content_width = 600; Set the maximum allowed width for any content in the theme, like oEmbeds and images added to posts.
Custom Backgrounds add_theme_support('custom-background') Provides for customization of the background color and image.
Post Formats add_theme_support('post-formats', array('{format name}')) An admin can change how each post looks by choosing a Post Format from a radio-button list in the Publish meta box when saving a post. Options are aside, gallery, link, image, quote, status, video, audio, chat
Theme Logo add_theme_support('custom-logo') Allows themes to add custom logos.
Selective Refresh Support for Widgets add_theme_support('customize-selective-refresh-widgets') Users of the Customizer can selectively refresh a preview mechanism without refreshing the entire preview window.

Sidebars

// /wp-content/themes/{my_theme}/functions.php

function wattsworkmorgue_register_main_sidebar() {
    register_sidebar( array(
        'name' => __('Main Sidebar', 'wattsworkmorgue'),
        'id' => 'main-sidebar',
        'description' => __('Widgets in this area will be shown on all posts and pages.', 'wattsworkmorgue'),
        'before_widget' => '<li id="%1$s" class="widget %2$s">',
        'after_widget'  => '</li>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2>',
    ));
}
add_action('widgets_init', 'wattsworkmorgue_register_main_sidebar');

Post Thumbnail

  • Post Thumbnail, also called the Featured Image, is an image that is chosen as the representative image for a Post, Page or Custom Post Type.
  • The Post Thumbnails feature can be enabled by calling the add_theme_support('post-thumbnails') function from the theme functions.php file.
  • At least one default thumbnail size must be defined, but any number of additional sizes can also be defined.
  • NOTE The Post Thumbnail is associated to the post in the database in the wp_postmeta table. The associated thumb ID is stored as the meta_value value with a meta_key called _thumbnail_id.
  • Post Thumbnails (codex.wordpress.org)
// /wp-content/themes/{my_theme}/functions.php

/**
 * Adds Post Thumbnail support to the theme.
 */
if (function_exists('add_theme_support')) { 
    add_theme_support('post-thumbnails');
    set_post_thumbnail_size(200, 9999); // Set the default thumb size to 200px wide with unlimited height.
    add_image_size('small-admin-thumb', 100, 100, true); // Set an additional thumb size of 50px wide by 50px tall and cropped.
}
// /wp-content/themes/{my_theme}/functions.php

/**
 * Adds a thumbnail column to an admin posts list.
 */
function add_admin_thumbnail_column($post_columns){
    $post_columns['featured_thumb'] = __('Featured Image');
    return $post_columns;
}

// Add a thumbnail column to the `posts` and `pages` admin post lists.
add_filter('manage_posts_columns', 'add_admin_thumbnail_column', 2);
add_filter('manage_pages_columns', 'add_admin_thumbnail_column', 2);

/**
 * Prints the thumbnail column content.
 */
function admin_thumbnail_column_content($column_name, $post_id){
    if ($column_name == 'featured_thumb' && function_exists('the_post_thumbnail')) {
        echo the_post_thumbnail('small-admin-thumb');
    }
}

// Get the content for the thumbnail column in `posts` and `pages` admin post lists.
add_action('manage_posts_custom_column', 'admin_thumbnail_column_content', 5, 2);
add_action('manage_pages_custom_column', 'admin_thumbnail_column_content', 5, 2);