This national radio ministry website was originally created on WordPress, which worked well for years. However, eventually the theme lost support and was no longer actively supported by a development team. The ministry staff needed an easy-to-use interface to manage audio content and Scripture references.
Background and Challenge of This Project
I started working with Greg Lundstedt, Pastor of Equipping Bible Church, on this website upgrade in 2018, about five years after I first started attending services with the congregation. This was the same year I started working at Audigy and building professional websites on WordPress.
When I first started attending the church, their national radio broadcast website was already built on WordPress, but the theme was outdated and could no longer be updated.
I offered to build a new WordPress website that would allow us to upload the existing content and provide a better interface for the staff to continue to support the ministry. However, all the existing content was stored in the outdated theme, which would not be easy to migrate without advanced SQL code, which I was not familiar with at the time.
Greg and I were both interested in a more modern layout and design, and the staff needed a simple interface to be able to manage the audio content that included podcasting. So, I decided to keep the site on WordPress while updating the software with a new, flexible theme and free plugins.
Custom Website Solution
The existing website had a hero slider component and three columns of content on the homepage. So, I had to do some research for plugins that would provide these elements in a more updated, user friendly format.
Plus, the plugins needed to rely on my code as little as possible so that the team could have maximum control over the content and the presentation. With the advent of Gutenberg, I wanted to find some plugins that would interface well with WordPress’ new, free editor.
The theme I chose was GeneratePress, which has always been well-known in the WordPress community for having a very quick loading speed. Greg was willing to
The slider plugin I chose was Smart Slider 3. The free version of the plugin had great reviews, provided a page-builder type of editing experience, and gave maximum control over the content.
The next plugin I sought out was for managing the audio, post content, and podcasting. I saw several options, but the best one by far was Sermon Manager (pro version). This plugin was crucial for the successful operation of the ministry site, and it was a good fit for their needs.
The final major plugin I chose was GenerateBlocks. I originally went with Ultimate Gutenberg Blocks plugin, which has since changed its name to Spectra (associated with the Astra theme). Eventually, the Ultimate Gutenberg blocks I used on the homepage stopped working and needed to be replaced. This is why I switched to GenerateBlocks, which didn’t exist when we first started the upgrade.
The Sermon Manager Situation
One solution I learned in this project was to customize a PHP template provided by the Sermon Manager plugin so that the broadcasts page would suit their visitors’ needs without buying the pro version of the plugin.
Normally, if you want to adjust the appearance of the Sermon Manager plugin, you have to either buy the pro version or write a lot of CSS code. However, the developer provided a way to override PHP templates by adding a file of the same name to your child theme.
So, if I wanted to override the content-sermon-archive.php, I would copy the file, place the copy in my child theme, then make changes. It was a great feature provided by the developer, and I hope others who are able will purchase the pro version of his plugin.
Here’s what one plugin file said (not my code):
<?php
/**
* To edit this file, please copy the contents of this file to one of these locations:
* - `/wp-content/themes/<your_theme>/partials/content-sermon-archive.php`
* - `/wp-content/themes/<your_theme>/template-parts/content-sermon-archive.php`
* - `/wp-content/themes/<your_theme>/content-sermon-archive.php`
*
* That will ensure that your changes are not deleted on plugin update.
* ...This feature made it possible for me to make minor markup customizations without having to pay for the pro version or add my changes over again every time. I also didn’t have to do too much wild CSS or JS code.
For this reason, I would highly recommend this plugin, even though over the years it has been unclear if it was receiving ongoing updates and support. It seems to have been since purchased or taken over by WP for Church.
Great Developer Experience with GeneratePress
One tool I really appreciated getting to work with was the GeneratePress theme for WordPress, because the developer, Tom Usborne, set up the theme to provide many sensible filters/overrides.
Within my child theme code, I like to create a table of contents in the comment at the top of the file, which allows you to search for a specific code block and know where you are at while navigating through the file.
As an example, I just wanted to provide the theme setup function and some parent theme overrides:
if ( ! function_exists( 'ets_child_theme_setup' ) ) {
add_action( 'after_setup_theme', 'ets_child_theme_setup' );
/**
* Sets up theme styles, scripts, and functions
*
* @since 1.0
*/
function ets_child_theme_setup() {
// Add support for editor styles.
add_theme_support( 'editor-styles' );
// Enqueue editor styles.
add_editor_style( 'style.css' );
// 1.1 Enqueue styles and scripts conditionally based on the page that is showing
add_action( 'wp_enqueue_scripts', 'ets_child_theme_enqueue_assets' );
function ets_child_theme_enqueue_assets() {
/**
* Enqueue Styles
*/
// enqueue the child theme stylesheet
wp_enqueue_style( 'ets-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
// enqueue the following stylesheets if on the home page
if ( is_front_page() ) {
wp_enqueue_style( 'home-styles', get_stylesheet_directory_uri() . '/css/home-styles.css', array( 'ets-style' ), '1.0', 'all' );
}
// enqueue the following stylesheets if on non-search archive or single posts
if ( is_archive() && ! is_search() || is_single() ) {
wp_enqueue_style( 'broadcasts-styles', get_stylesheet_directory_uri() . '/css/broadcasts-styles.css', array( 'ets-style' ), '1.0', 'all' );
}
}
// 1.2. H1 Site Title - makes the site title on the home page an h1 for SEO purposes
add_filter( 'generate_site_title_output',
function() {
$ets_title = '<span class="title-top">Equipping</span> <span class="title-bottom">the Saints</span>';
return sprintf(
'<%1$s class="main-title" itemprop="headline">
<a href="%2$s" rel="home">
%3$s
</a>
</%1$s>', // this is the markup the following variables will be inserted into in their order
( is_front_page() ) ? 'h1' : 'div', // this is %1$s
esc_url( apply_filters( 'generate_site_title_href', home_url( '/' ) ) ), // this is %2$s
$ets_title // this is %3$s
);
}
);
// 1.3. No Images On Search Page - removes images from posts in search pages
add_filter( 'option_generate_blog_settings',
function( $options ) {
if ( is_search() ) {
$options['post_image'] = false;
}
return $options;
}
);
// 1.4. Custom Search Field Placeholder - adds a custom search field placeholder message to the page search bar
add_filter('generate_search_placeholder',
function() {
return 'Type here';
}
);
// 1.5. Custom Navigation Search Field Placeholder - adds a custom search field placeholder message to the nav search bar
add_filter( 'generate_navigation_search_output',
function() {
printf(
'<form method="get" class="search-form navigation-search" action="%1$s">
<input type="search" placeholder="Click to type" class="search-field" value="%2$s" name="s" title="%3$s" />
</form>',
esc_url( home_url( '/' ) ), // this is %1$s
esc_attr( get_search_query() ), // this is %2$s
esc_attr_x( 'Search', 'label', 'generatepress' ) // this is %3$s
);
}
);
// 1.6. Dashicons On Front End - adds dashicons on the front end when not logged in
add_action( 'wp_enqueue_scripts',
function() {
wp_enqueue_style( 'dashicons' );
}
);
// 1.7. Remove Google Fonts - the theme comes with a bunch of fonts we don't want to download, so this removes them
add_action( 'wp_enqueue_scripts',
function() {
wp_dequeue_style( 'generate-fonts' );
}
);
} // closes function
} // closes conditionalA few highlights from the code above:
- At the beginning of the theme init function, I enqueue the style.css file in the Gutenberg editor
- From item 1.1, you can see that I’m conditionally loading custom CSS for the homepage and for the broadcast styles
- Another interesting lesson I’ve gained from working with the GeneratePress theme is how to use the printf() and sprintf() functions, which allow you to filter variables into your markup efficiently and safely in PHP
If this project seems like something you could benefit from, feel free to let me know. Or, if you have any questions about how I selected the best free plugins, customized a plugin’s PHP template, or customized a high quality theme with a child theme in WordPress, I’d be glad to share some details.