Useful WordPress Snippets for Theme Development

When working with WordPress theme files, referencing the WordPress Codex can be time consuming. Sometimes it is faster to create a cheat sheet which allows you to quickly reference some of the most common code snippets for theme development. Below is a short list I have compiled of some of the more common WordPress snippets I have used in the past.

Define and Link a Child Theme

Defining a child theme has changed over the past couple of years. Originally, the WordPress Codex recommended using the “@import” command to import a parent style sheet into a child theme style sheet. However, this is no longer a best practice. The current method for defining a child theme and linking a parent theme is as follows:

To define the WordPress child theme in your style sheet you can include the following code. However, the most important part of the code is “Theme Name”. This is was defines the name of your child theme.

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fifteen-child
*/

The next step is to import the parent style sheet with your child style sheet in the functions file.

[ad name=”gco Link units”]

<?php
function theme_enqueue_styles() {

    $parent_style = 'parent-style';

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( $parent_style ));
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Define a Page Template

Most WordPress themes will come with a default page template, but what if you wanted to add a custom page template without a sidebar or perhaps you wanted to create something unique. Below is the most basic WordPress snippet of code that will define your custom page template. After which you can then add whatever HTML or PHP you which.

<?php /* Template Name: Example Template */ ?>

Linking Images within a Theme

One of the most common actions when developing a theme is linking images within a theme folder. For example, for example you might have a sub-folder named “images” which you will want to reference. Below I will discuss a few ways to call images from a theme and from a child theme.

<img src="<?php bloginfo('stylesheet_directory'); ?>/img/image.png" />

or

<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/image.jpg" />

WordPress Snippets for Enqueuing Scripts

To enqueue is a process that we use in WordPress to add scripts to your theme. Using enqueue is the correct way to add scripts and style sheets in your functions file. Years ago when I started developing themes I noticed many poorly coded themes. Like many developers I initially took short cuts and either hard coded scripts into my themes or incorrectly scripted them into my functions file. Below I will show you the correct way to enqueue a script or style sheet.

<?php

/**
 * Enqueue scripts and styles.
 */
function my_scripts() {
	
	// Adding Bootstrap CSS
	wp_enqueue_style('my-bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');

	// Adding Genericons CSS
	wp_enqueue_style( 'my-genericons', get_template_directory_uri() . '/fonts/genericons.css' );

	// Adding your own stylesheet
	wp_enqueue_style( 'my-style', get_stylesheet_uri() );

	// Adding Bootstrap javascript
	wp_enqueue_script('my-bootstrapjs', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

?>

In the the example above you can see how to enqueue Bootstrap css and javascript.

Using Conditional Statements

PHP conditional statements in WordPress can be very useful, especially if you are developing a bespoke theme that interacts in specific ways. Below I will discuss some of the common uses for conditional statements.

<?php
	if ( is_front_page() && is_home() ) {
	  // Default homepage
	  
	} elseif ( is_front_page() ) {
	  // static homepage
	  
	} elseif ( is_home() ) {
	  // blog page
	  
	} else {
	  //everything else
	  
	}
?>

In this example, you can see how conditional tags help your theme interact based on what page you are on. You can even display content based on users that are logged in or not. To get a full list of WordPress conditional tags, visit the WordPress Codex on Conditional Tags.

I hope that you find this information useful and I expect that this article will continue to grow as I add more WordPress snippets. Feel free to share which WordPress snippets you find useful.