Display a dynamic number of courses on Genesis Sample home page

Discover in this tutorial how to enter a number of entries from a CPT that is always kept up to date in the Genesis Sample home page by code.

One of the advantages of belonging to the OsomCode Club is that you can suggest future tutorials.

For example, a subscriber left me this comment:

Hey, Nahuai! I don’t know if I asked you this already or if I dreamt it, hahaha. Can you make a code or shortcode to automatically show the number of videos, courses (by CPT), subscribers, etc. that are on the web?
Like this: There are already more than 9 courses and 30 videos with 50 subscribers.
Or something similar.
I don’t know if I’ve explained myself well. Thank you!

There are several questions in this request. And the can be solved in different ways depending on the system you are using in each one (video platform, subscription plugin…).

So let’s go step by step:

In this tutorial you will discover how to add a snippet that allows you to display a number of courses that are automatically updated in the Genesis Sample home page, taking advantage of the tutorial to create a custom header on the home page.

Remember that although the example is made for Genesis Sample, you can apply it to any other Genesis child theme after making small changes to the code.

This is the final result:

Instructions for displaying a dynamic CPT number into the Genesis Sample home header (Hero)

1. Create a template for the home page

Genesis Sample lacks a dedicated blog template by default, so the first step is to create a home.php in the child theme’s root folder that contains the following code:

With this you generate the template that will be displayed in the blog page and you add a header section in Hero format.

Also, this block forces the full width design.

Unlike the tutorial where you entered the text from the customizer, in this case you add a snippet containing the number of entries from the CPT “Courses” and the number of normal entries (in this case, tutorials).

The part of the previous fragment that you should modify if you prefer to enter another type of CPT or change the text is the following:

To do this, simply replace ‘course’ with the CPT of your choice.

On the other hand, in this case you can modify the title from the snippet (in the hero-title section) but you also have the option to do it from the WordPress customizer by combining it with this tutorial.

2. Customize the CSS of the header

Once the template for the home page has been set up, all you have to do is assign the styles to make it look the way you want.

To do this, add this snippet at the end of style.css:

By inserting these CSS lines you ensure that the header is displayed correctly.

Now all you need is the last detail.

3. Add the background image

Finally, enter the image you want to use as your background in the /images/ folder of the Genesis Sample root.

There are 2 options:

1. Upload an image with the name hero-home.jpg (in this case you don’t have to do anything else).
2. Upload a photo with the name you want and edit the following CSS line replacing hero-home.jpg with the name of your file.

background: #222 url(images/hero-home.jpg) no-repeat

Make sure that the image has a generous width (1600-2000px) so that it is also suitable for high-resolution devices.

If you are interested in entering the number of courses (or other CPTs) via a shortcode in any text on your site (not just the home page), I can prepare a tutorial explaining the procedure. Ask me for it below.

Conclusions

Now you know the code to display a number of courses (or other entries) that are automatically kept up to date on the Genesis Sample home page.

Do you want to apply it to another Genesis child theme? Make a few adjustments and you’re done.

If you want to show the number of videos and/or subscribers, let me know through the contact form how they are created (video platform, subscription plugin….) o I can create a custom tutorial with your question.

Benefits of being a subscriber. 🙂