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.