Understanding Theme Development

Themes control presentation layer of your of your site. It is responsible for user experience for your site’s content. Themes allow your same content to be presented differently to your visitors. Themes makes your content beautiful and accessible. Here we will go through various aspects that build a theme and how they apply presentation of your content. You also need to know about how to package a theme and install on your WordPress website. There are different strategies for building a theme, either adapt a base theme and make a child theme or use a theme framework or entirely build a new theme from scratch.

Installing a theme

Themes change the appearance of your website. It gives your website look and feel. It accomplishes these tasks by using various template files.

• FTP installation – It can be done by uploading your theme directory into /wp-content/themes/ folder. After uploading just activate the theme in Appearence->Themes
• Theme Installer – You can install the new theme from WordPress dashboard from version 2.8. This allows searching for available themes hosted in wordpresss.org or easily upload new theme using dashboard.  Also you can preview your theme before activating them.

Theme structure

A theme is a mixture of PHP files, CSS files and Javascript files.

• Template files  – These are PHP code files that control what is shown to the visitor. There are numerous types of template files are available. WordPress decides which template file to load based on content request.
• CSS files – A theme must have atleast one style sheet named style.css. The style sheet header must be coded according to WordPress standards.
• Image files – Image files are stored in genrally /images , /img or /assets folder.
• Js files – Normall js files re stored in /js folder in your theme directory
• Plugins – Occasionally themes need plugins to function correctly. Those plugins need to be installed in plugins directory.

Creating Themes

Themes can be developed in many ways. You can modify an existing theme to meet the needs of your specific needs in the project. These are normally called project themes. There are plenty of starter themes that are designed foundation to a project theme. There is another option called child theme , which inherits from a parent theme and you’ll override certain aspects in child theme. There are some frameworks which allow to to create child themes based on parent themes framework.  Also you can create your own theme from scratch.  If you want to modify an existing theme, then child theme is a better approach because it allows parent themes code intact, also allows updates to parent themes.

There are many considerations when developing a new project theme or modified child theme for your client or for yourself. In practise client could select an available theme with few modifications to quickly launch a site. But when your site goes beyond simple modifications and you might stuck up with poorly designed theme. For that reason it’s advisable to rebuild a similar theme client selected from scratch from a starter theme as the launching point.

Essential parts in a theme

There are few files that are essential parts of a theme. More file templates are added for more fine tuning theme.

Style.css

This file is required to make your theme work in WordPress. You can create a new theme by just creating only two files , style.css and index.php.  Even index.php file can be empty, WordPress automatically substitutes missing templates in your theme. While creating your style.css it’s needed to create header information which is read by WordPress core and helps to reference your theme in listings.

/*
Theme Name: My Theme
Theme URI: https://wp-learner.com/mytheme
Author: Mahesh Bhat
Author URI: https://wp-learner.com/
Description: Theme for my new site. Based on Twenty Fourteen
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: three-columns,left-sidebar, right-sidebar, responsive-layout,
custom-background, custom-header, custom-menu, editor-style,
featured-images, flexible-header, full-width-template, microformats,
post-formats, theme-options,translation-ready
*/

This is mostly self explanatory as in plugin information is added in main plugin file. You need to fill out theme name, theme url, author name, author url, licence, licence url, description, version, tags, etc.  When naming your theme you should come up with unique name to reduce name conflicts with any other existing themes. If you are starting a theme by starter theme , then then rename starter theme folder and make style.css header with your new theme descriptions.  Below the header information write down the CSS rules for your elements in the WordPres site.

Index.php – Showing your content

While creating your theme it’s essential to have some content in your Website.  The index.php file is the default template of your site. WodPress decides which template to use based on what visitor is requesting and determines if there’s a template file available for that information type. If the WordPress does not determine which template to use, it’ll try to use index.php for it. Usually index.php contains standard loop which displays blog posts in reverse chronological order. Following is an example code from twenty fourteen theme which ships with WordPress package.

<?php
get_header(); ?>

<div id="main-content" class="main-content">

<?php
	if ( is_front_page() && twentyfourteen_has_featured_posts() ) {
		// Include the featured content template.
		get_template_part( 'featured-content' );
	}
?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

		<?php
			if ( have_posts() ) :
				// Start the Loop.
				while ( have_posts() ) : the_post();

					/*
					 * Include the post format-specific template for the content. If you want to
					 * use this in a child theme, then include a file called called content-___.php
					 * (where ___ is the post format) and that will be used instead.
					 */
					get_template_part( 'content', get_post_format() );

				endwhile;
				// Previous/next post navigation.
				twentyfourteen_paging_nav();

			else :
				// If no content, include the "No posts found" template.
				get_template_part( 'content', 'none' );

			endif;
		?>

		</div><!-- #content -->
	</div><!-- #primary -->
	<?php get_sidebar( 'content' ); ?>
</div><!-- #main-content -->

<?php
get_sidebar();
get_footer();
?>

The functions get_header() – displays header information, get_sidebar() displays sidebar contents, get_footer() displays footer information. The important function to note down here is get_template_part(). The get_template_part() function will look for a template file in the current theme directory, first as the specific version using the second parameter and then for generic version ignoring second parameter.

<?php get_template_part( 'content', 'link' ); ?>

In the above example it looks for content-link.php template file and if not found it will look for content.php template file. Another advantage of this function is to breaking templates into smaller , manageable versions.

Header.php

This file includes everything at the top of your rendered page, until the content area. The header.php includes start of the HTML document, HTML header part, site logo and navigation. Sometimes it may include secondary navigation and sidebar. The contents of this template file are included using get_header() function.

Fooer.php

Everything that’s below your content area is included in footer.php. This normally includes additional navigation, site information , copyright and contact information. It is included by the function get_footer() .

Sidebar.php

Sidebar is everything that’s left or right to the content. It might have navigation elements, widgets , recent posts, additional information etc. You need to consider number of issues when working with sidebars, Sidebars can be staic or widgetized, it could be either in the left or right. Sidebars are included using get_sidebar() function.

 

Specific Templates for Content Display.

WordPress has variety of templates to meet the needs of every site type. A good theme defines most of these content display templates. It is not desirable to have index.php  to handle all kinds of content displays. That will make your index.php too big and messy to handle. Following are the template files that reside in a theme to display variety of content in WordPress.

Front-page.php : Show your front page.

It is a template file to display home page of the website. The home.php also serves the same purpose in older versions of WordPress. By and large creating a unique home page is a good marketing tool. Some themes use the conditional tag is_front_page() to display content for home page.

Archive.php : Show your older posts by Date

This template presents your older posts by date. It can be either by day, month or for an year. Following is an example taken from archive.php from the theme twentyfourteen.

<?php
						if ( is_day() ) :
							printf( __( 'Daily Archives: %s', 'twentyfourteen' ), get_the_date() );

						elseif ( is_month() ) :
							printf( __( 'Monthly Archives: %s', 'twentyfourteen' ), get_the_date( _x( 'F Y', 'monthly archives date format', 'twentyfourteen' ) ) );

						elseif ( is_year() ) :
							printf( __( 'Yearly Archives: %s', 'twentyfourteen' ), get_the_date( _x( 'Y', 'yearly archives date format', 'twentyfourteen' ) ) );

						else :
							_e( 'Archives', 'twentyfourteen' );

						endif;
					?>

The functions is_day() is to determine about day archive, is_month() for monthly archive and is_year() for yearly archive.  If you want to have archive template for a specific post type then you can define it as archive-post_type.php. 

Category.php : Showing posts for only one Category.

This template creates template file which is used for viewing only a single category. You can have different template files for different categories too. If you want to have specific template file for a category with ID =3 , then your category template file should be category-3.php. You can also define category template defined by slugs too, for example category-slug.php for a category with slug.

Tag.php : Showing posts for only one tag.

Similar to the category template files, tag template files can be for a specific tag. To create a tag template with an id 3 and tag of test, your tag template can be either tag-3.php or tag-test.php.

Single.php : Show a single post.

This is the most used template, which is responsible for displaying full content in single post. This is where your readers will read the full content. This should be more search engine friendly and visitor friendly. Hence it is always good to invest time in designing this template. Several times related content is added to keep the visitor more informed about what he is looking for.

Page.php : Display a single page.

This is used to display single pages. It is similar to single.php template except it doesn’t have date information. You can also create specific templates for posts using slug and id.

Attachment.php : Display post attachments.

This template works very similarly to single.php. This is commonly not used, instead image.php is used to display images in the gallery.

404.php : Display Error Pages.

This template is used when broken links are encountered. Normally it also displays a search box to help users navigate to correct page. If the database connection fails WordPress looks for db-error.php in wp-content directory and uses that to display error.

Author.php : Display all posts by author

This template will group all posts by an author and displays it.  This also can display more information submitted by author , like author information , social links etc.

Comments.php : Display comments and comments form

This template file handles comments, trackbacks and pingbacks, also displays comment input form for both logged in users and anonymous users. This is one of the complex theme file. To include comments functionality in your template use comments_template() function. The function comment_form() handles actual rendering of the comment input form.

Search.php : Display search results page

This template is used to show search results . The resulting posts are normally shown with excerpts. If not results are found normally as a alternative tag cloud or categories or recent posts are presented to the user.

Searchform.php : Display search form

This template is automatically used to display a search form. You can use get_search_form() to display search forms in templates.

Functions.php: Adding functionality to your templates

It is not a display template. If your templates need some special functionality that code can be placed in this file. WordPress automatically includes functions.php so that library code present in this file can be used by templates. Normally this file has setup information for your menus and sidebars and other helping functions. It is also used to enable or disable certain WordPress features for your theme. This file is used to establish navigation menus and their locations. Also it is used to establish widget areas and their configuration.  You can create custom functions.php file and include it in functions.php. The theme control panel if required can also be created in functions.php.

Custom Page Templates

Occasionally you want to have a specific page that requires a unique layout, relative to the rest of the website.  WordPress has a feature called page templates which can be assigned to a page in the administrative section. To create a page template file is easy. Just add the following lines at the special comment section of the page.

<?php
/*
Template Name: My Page Template
*/
?>

It is best practise to store the page template files in a separate template files. Custom page templates are a great way to add non-specific WordPress.

Menu Management

Menu provide a meaningful navigation system to your website. Use the register_nav_menu() function to register menu locations on your theme.

<?php
// This theme uses wp_nav_menu() in two locations.
register_nav_menus( array( 
'primary'=> __( 'Top primary menu', 'My Theme' ),
'secondary' => __( 'Secondary menu in left sidebar', 'My theme' ),
)
 );
?>

The above code will notify WordPress about menu locations available and identified.  To place the desired menu in your template file, use the wp_nav_menu() function.

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

This will display menus located at primary in the template. Normally menus are included in header and footer templates.

Widget Areas

Widget areas allow blocks of content to be fixed in them. Creating widget areas is very similar to setting up menus. This accomplished by register_sidebar() function.

<?php
register_sidebar( array(
'name'=> __( 'Primary Sidebar', 'My Theme' ),
'id'=> 'sidebar-1',
'description'=> __( 'Main sidebar that appears on the left.', 'My Theme' ),
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h1 class="widget-title">',
'after_title'=> '</h1>',
)
 );
?>

The next step is add this Widget Area into your theme.  Widgets can be anywhere in your template.

<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
<div id="primary-sidebar" class="primary-sidebar widget-area" role="complementary">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</div><!-- #primary-sidebar -->
<?php endif; ?>

The function is_active_sidebar() decides if widget area has any content. The function dynamic_sidebar() takes the responsibility of displaying widgets in the area.

Post Formats

Post formats are essentially a way of customizing display of certain types of posts. WordPress currently supports many different styles of post formats. Those are aside, audio, chat, gallery, image, link, quote, status, video etc. To enable post formats in your theme use add_theme_support() function

<?php add_theme_support( 'post-formats', array(
'aside', 'image', 'video', 'audio', 'quote', 'link', 'gallery',
) ); ?>

This allows different posts to show in different styles based on their format.

Theme Hierarchy and Child Themes

Child themes let you to take an existing theme or framework , use the best parts of it and then extend and modify it according to your needs. You can make countless theme variations through theme inheritance. Updates to your parent theme or framework does not overwrite your customizations. To make your theme child of another theme you need to add a line to header information in your style.css file.  The template specifies about parent theme.

/*
Theme Name: A My Theme Child Theme
Theme URI: https://wp-learner.com/mytheme
Description: A sample child theme
Author: Mahesh Bhat
Author URI: https://wp-learner.com
Template: mytheme
Version: 1.0
*/

The next step is to import style.css from the parent theme

/* import the base styles */
@import url('../mytheme/style.css');

And override the styles rules from the parent theme. WordPress looks for a template file in your child theme’s directory , and if not found it will resort to parent themes directory and loads the appropriate template file from there.  You can also create your own functions.php file. The functions.php from both parent and child themes are loaded automatically.

This is how you can use themes to organize, structure and present content. A theme which looks amateurish can hurt the creditability of your site, whereas a sharp , professional theme can enhance the whole experience.