Theme Support Generator

GigaBook Web Developer Tools

WordPress theme features allows you to turn on certain WordPress features that you want your theme to support.

Coveloping has a Theme support generator that allows you to generate all the code you need to add these features to your theme. In this tutorial we're going to investigate what these theme features are and how you will use them.

Content Width

Content width features allows you to tell WordPress what the maximum width is for the content area on your theme. This is needed by WordPress so that it knows how much to limit things like images and oEmbed on your site. If you set the width to 600px then WordPress will know whenever it needs to insert content on the page that it should be larger than 600px.

This width will also apply to any plugins that add content to the page it will know not to add them larger than 600px by using the value in the variable $content_width.

The content width can be defined by adding the content width variable to the functions.php file.

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

Automatic Feed Links

Adding theme support for automatic feed links will add the RSS meta information to the head of your website. Adding the RSS feed to the head of your website this will make it easy for your visitors or RSS readers to discover your RSS feed and subscribe to your website feed. Whenever someone subscribes to your RSS feed they will be updated whenever you have new content published on your site, this is a great way to keep your readers coming back for your content.

Use the below code to in your functions.php file to automatically add this to you head tag.

add_theme_support( 'automatic-feed-links' );

Custom Backgrounds

A custom background will automatically add a css class populated with the background colour change or image you decide to add to your theme.

You can choose to either use a colour or a image URL as the background of your site, the purpose of the background theme feature is to add CSS code to your head tag with the CSS background.

$defaults = array(
'default-color' => '',
'default-image' => '',
'default-repeat' => '',
'default-position-x' => '',
'default-attachment' => '',
'wp-head-callback' => '_custom_background_cb',
'admin-head-callback' => '',
'admin-preview-callback' => ''
);
add_theme_support( 'custom-background', $defaults );

An example of this if you want to define the background colour to be #eeeeee then you will use the following code.

$args = array(
'default-color' => 'eeeeee'
);
add_theme_support( 'custom-background', $args );

This CSS will be added to the head tag as an inline style output like the following.

Custom Headers

Custom headers allows you to upload an image to use as the focus point at the top of your website, which is done by using the following code.

$defaults = array(
'default-image' => '',
'width' => 0,
'height' => 0,
'flex-height' => false,
'flex-width' => false,
'uploads' => true,
'random-default' => false,
'header-text' => true,
'default-text-color' => '',
'wp-head-callback' => '',
'admin-head-callback' => '',
'admin-preview-callback' => '',
);
add_theme_support( 'custom-header', $defaults );

An example of how to use this would be

$args = array(
'width' => 980,
'height' => 60,
'default-image' => get_template_directory_uri() . '/images/header.jpg',
);
add_theme_support( 'custom-header', $args );

To output this in your theme you will nee to use the following functions which make up the code example

  • header_image
  • get_custom_header()->height
  • get_custom_header()->width
<img src="<?php header_image(); ?>" alt="" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" />

Post Thumbnails

Post thumbnails is actually called featured images in the edit post screen, they allow you to add a featured image to your content whether this be posts, pages or custom post types. On the edit post screen there will be a box on the right side under the publish meta box for you to add a featured image to your post.

To enable featured images to your theme you need to use the following code.

add_theme_support( 'post-thumbnails' );

Having this turned on will add a box on your edit screen like this.

featured-image

To display the post thumbnail (featured image) on to your theme then you will use the following code in your theme.

if ( has_post_thumbnail() ) {
the_post_thumbnail();
}

Post Formats

A post format is a setting to can assign to a post in order to easily change it's presentation. You can select any or all of the supported post formats to include on your your theme allowing you have different types of posts, the default post formats are:

  • aside
  • gallery
  • link
  • image
  • quote
  • status
  • video
  • audio
  • chat

For example if I only wanted the chat and audio post formats I would use the following code.

add_theme_support( 'post-formats', array( 'audio', 'chat' ) );

There are a few ways you can use this in your theme to display the content differently:

  • You can either use the post_class() function which will output the format in the CSS class to change using CSS.
  • Use different content files per format to have a completely different styling and layout for each format.

If you decide to just use the CSS approach you are search for a CSS class with the same format as below.

.format-audio
{
// styling for the audio post format
}

The second approach is creating a separate content file in your theme for the different post formats.

- content.php
- content-single.php
- content-audio.php
- content-video.php

To discover the current post format you need to use the function get_post_format() along with the get_template_part() function. Put the following inside your single.php file to be able to display the different post formats in a completely different way.

get_template_part( 'content', get_post_format() );

Title Tag

For WordPress 4.1 you've been able to automatically add the title tag to the head.

add_theme_support( 'title-tag' );

Editor Style

The editor style allows you to include a new stylesheet to use to display the tinyMCE editor.

If you want to add an editor style to your theme then you can use the function add_editor_style().

add_editor_style();

This will look for a file in your theme called editor-style.css and use this to style the editor.

Theme Markup

The theme markup features allows you to tell WordPress to display it's default code in HTML5. For example the search form is a piece of default HTML that WordPress will display by it has 2 options normal HTML or HTML5 which will come with new features such as form validation.

Add the following to the functions.php file to enable the different HTML5 theme markup features.

$args = array(
'search-form',
'comment-form',
'comment-list',
'gallery',
'caption'
);
add_theme_support( 'html5', $args );

Theme Support Generator

Using the WordPress theme support generator you can create the code to add any of the above to your theme.

Sign up now for your free trial

Join Coveloping membership from $4.99 a month and get your first month free, cancel at any time


Start Now

Need help with your website? Hire a coveloping freelancer - fill out our quick form with your requirements and we'll get back to you with an estimate and availabilty. Find out more...

Code Copied!