Creating the Custom Template in the Genesis Framework

If you purchase through a link on our site, we may earn a commission. Learn more.

WordPress never ceases to toss at us some exceptionally useful features and capabilities that make our website development endeavor much more simpler and rewarding. Genesis happens to be another great addition to the ever growing list of WordPress goodies.
Table of Contents
WP Engine High Performance Hosting
BionicWP Hosting

WordPress never ceases to toss at us some exceptionally useful features and capabilities that make our website development endeavor much more simpler and rewarding. Genesis happens to be another great addition to the ever growing list of WordPress goodies.

Genesis, in its truest form, is a WordPress framework that can give you the free rein to glide past the restrictions or the lack of room that you may be encountering with the standard WordPress features. And there is a whole new level of diversity to Genesis, since it can handle a whole lot of facets of a WordPress website, which include its SEO structure, its security, its speed and so on.

Apart from its amazing features, Genesis is also very flexible in nature that gives you the freedom to make a number of customizations, based on your very specific requirements. In the following section, I am going to throw light on how you can create a custom template in the Genesis framework. The ensuing steps are easy to comprehend and understand.

Here We Go

To begin with, we will create a usual WordPress page that is defined by the standard features we have come to know of a typical WordPress setup. And then, we will add the page to the list of posts in respect to the categories they belong to.

As an example, let’s say we already have a page by the name of Genesis Movie Genre and there is also some content on the website. There is also a category of the same name on the website which shows the best movies of different genres respectively.

Now, what we intend to create here is a custom page template on the Genesis Movie Genres page that enlists the posts in Genesis Movie Genres category.

You might say that we also have the inbuilt Genesis archive at our behest, but the challenge with using it is the fact that we can’t find the suitable enough custom fields in the post editor that is meant to be used to align posts in category archives.

Let’s Create the Page Template

Now that we already have a page that is populated with certain posts and also a category, our default template looks like the one in the picture:

Our main purpose here is to extend the functionality above and beyond the defaults.

Let’s Create the Template File

Moving forward, we will create a new file that will be labelled with any name of our choice. Now that there is a page template with us, let’s use for Genesis Movie Genres. We will name it movie-genre-template.php

Here is the code for our custom page template:

<?php

/**

* Template Name: Movie Genres Template

* Description: Used as a page template to show page contents, followed by a loop

* through the “Genesis Movie Genres” category

*/

// Add our custom loop

add_action( ‘genesis_loop’, ‘cd_goh_loop’ );

function cd_goh_loop() {

$args = array(

‘category_name’ => ‘genesis-movie-genres’, // replace with your category slug

‘orderby’       => ‘post_date’,

‘order’         => ‘DESC’,

‘posts_per_page’=> ’10’, // overrides posts per page in theme settings

);

$loop = new WP_Query( $args );

if( $loop->have_posts() ) {

// loop through posts

while( $loop->have_posts() ): $loop->the_post();

$video_id = esc_attr( genesis_get_custom_field( ‘cd_youtube_id’ ) );

$video_thumbnail = ‘<img src=”http://img.youtube.com/vi/’ . $video_id . ‘/0.jpg” alt=”” />’;

$video_link = ‘http://www.youtube.com/watch?v=’ . $video_id;

echo ‘<div class=”one-third first”>’;

echo ‘<a href=”‘ . $video_link . ‘” target=”_blank”>’ . $video_thumbnail . ‘</a>’;

echo ‘</div>’;

echo ‘<div class=”two-thirds”>’;

echo ‘<h4>’ . get_the_title() . ‘</h4>’;

echo ‘<p>’ . get_the_date() . ‘</p>’;

echo ‘<p><a href=”‘ . $video_link . ‘” target=”_blank”>Watch It</a> | <a href=”‘ . get_permalink() . ‘” target=”_blank”>Show Notes</a></p>’;

echo ‘</div>’;

endwhile;

}

wp_reset_postdata();

}

 genesis();

What you should note above is that we are not doing away completely with the defaults. We are only making some modifications and after that, we are making use of a query for extracting posts from the genesis-movie-genres category. We then sort the posts by the post date.

The next step involves looping through the posts which the query has returned  and simultaneously, we printing certain elements

We also need to upload the above template in the WordPress theme we have, and it will be uploaded in the active child theme.

Using This Custom Template

Now, you need to access the page where we have to use the custom page template and there, head to the Page Attributes drop down menu. In this drop down, you can find the custom page template you created above. Save the page, close it and then reopen it. There you are, with the new custom template added to the options.

That’s all. Thus, against the popular opinion, making tweaks in the Genesis framework is a breeze. Do let us know in the comments if you have done some experiments of your own in Genesis.

Alyona Galea

Alyona is a WordPress enthusiast, focused on sharing interesting things she comes across during her work with this great CMS. She loves exploring new destinations and maintains a travel blog at www.alyonatravels.com

Discover more from our archives ↓

Popular articles ↓

8 Responses

  1. I use “TemplateToaster” framework for building templates and themes . Never used Genesis.

  2. Hi Emily,
    Very nice article. You have explained the ‘Genesis Framework’ in a professional manner. I want to know can I edit any other theme with this Framework?

  3. The code looks familiar. Glad it was helpful. 🙂

    BTW – You can create your own function name to whatever suits your code best. Nothing meaningful about ‘cd_goh_loop’ in this case. Maybe ‘custom_movie_loop’ or similar to make your code more self-documenting.

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Claim Your Free Website Tip 👇

Leave your name, email and website URL below to receive one actionable improvement tip tailored for your website within the next 24 hours.

"They identified areas for improvement that we had not previously considered." - Elliot

By providing your information, you'll also be subscribing to our weekly newsletter packed with exclusive content and insights. You can unsubscribe at any time with just one click.