This tutorial goes over how to use the Kirki toolkit to add a homepage panel with different settings and fields to add a homepage full width banner and text call to action.
In this tutorial I use the custom homepage template that we created in the last tutorial, so be sure to check out that tutorial if you need help adding a custom template to you WordPress theme.
Also, if you want to follow along with this tutorial you need to make sure you have a theme that is using the Kirki toolkit. I have a tutorial on how to add the Kirki Toolkit to a WordPress theme that you can review and implement to get you started.
From there, you can also go over the quick tutorial on how to add Typography settings to the WordPress customizer using Kirki.
If you are all set, follow the video and the steps below to add a homepage banner to your WordPress theme.
Update Notice in the markup below wrapped the Kirki settings with if ( class_exists( 'Kirki' ) ) { ... }. This makes sure the plugin is installed and the Kirki class exists before trying to run the code.
Add a Homepage Banner and Customizer Settings
- The first thing we want to do is create the homepage panel, section, and fields that we need for our homepage banner. To do that, add the following code to you
customizer.phpfile: - In the
template-home.phpfile we need to use the following code to display the data from our customizer fields: - Once you have the data displaying on the frontend, the only thing left to do is the CSS styles. Here is the Sass code used in the video:
- If you watched the whole video, you noticed I used a function called
get_template_parts. If you decide to use this in your theme, the code should look like the following: - Don’t forget to create the new
home/hero-banner.phpdirectory and file with the code for the template part. The code should look like the following:
