How to Add a Background to Categories in the WordPress Storefront Theme without Plugins
While working on a store for a family friend, I ran into a rather annoying problem.
Wait…let’s back up.
I’m not the greatest web developer in the world, so I tend to run into problems a lot. Luckily, I’m incredibly tenacious and don’t give up easily. Unfortunately, I occasionally react to frustration poorly; VHS tapes have hit the wall ((a safe candidate for abuse since no one is going to watch them anymore)). It’s a serious problem because not only is losing your cool not…well…cool, it’s also really embarrassing and unprofessional. I once threw a glass at a tree…and missed ((even more embarrassing)). When I’ve whiffed at a development problem for hours my head feels like it’s on fire and every self-deprecating insecurity takes center stage in my head, giving ad nauseam performances about why I’m so terrible and worthless.
Thank goodness for breaks…and ritalin…………and anti-depressants.
So I’m pretty new to the WordPress game. After graduating Thinkful’s full-stack web development bootcamp last year, I had a brief stint with a company as a web developer. Coming from the professional classical music scene, I’m an operatic baritone ((adrian-rosales.com)), I was flabbergasted with the amount of money I could get. Unfortunately, I found that trying to balance a performance schedule with a full time job seeking to cut costs by squeezing mid/senior level work out of wet-behind-the-ears junior devs was not working.
Currently, I’m trying to move more towards UX Development ((I loved reading books by Kahneman, Norman, and Weinschenk)), and smile a bit too much when I whip up paper user flows and prototypes in Adobe XD. It might seem trivial or time-consuming to some, but it really saves you a *%$@ ton of time in the long run. Anyways, as I sniffed out contracts on Upwork and from colleagues, I kept seeing WordPress being the hotness for freelance jobs. So I bounced over to Udemy, threw my money at them and picked up some courses. I did do a full-stack bootcamp after all, it would be a waste to just let those skills atrophy because of a bad experience.
After getting through half of those courses, a family friend expressed interest in setting up a store. I thought of putting my newly acquired WordPress education to work and slapped up a WooCommerce store with the Storefront plugin……functional, but as exciting as warm, flat soda on a hot summer day.
Now not that the little fix I’m going to share makes StoreFront as exciting as the most recent Super Bowl was not, but I feel like it adds at least a little kick and expresses just the slightest understanding of priming your audience for the kinds of products you’re going to offer on a particular page…which I think is better. 🙂 Plus we are doing this without any plugins…so you don’t bog your site down with extra weight.
-Someone who (hopefully) will help me solve my financial problem(s) someday
I’m going to break down how I did it in a manner that would be easy enough for pissed off ‘Hulk-Developer me’ to understand before I chuck all my silverware into the forest. Hopefully it helps somebody out there (you).
- Make a Child Theme
We’re going to make a child-theme of the Storefront theme. So open up your WordPress main content folder for your particular site. This is the one that will have such folders as wp-admin, wp-content, wp-includes. Go ahead and open up wp-content in either Explorer, Finder, or whatever you use.
Inside wp-content, open up the themes folder. Now assuming you’re rocking the Storefront theme, you’ll see a folder called storefront go ahead and make a new folder in the themes folder and name it storefront-child.
Fire up your text editor of choice. I prefer VisualStudio Code but that’s really besides the point. In your text editor, open up your target WordPress site’s folder and navigate to the new folder we just made (storefront-child).
Create two files inside storefront-child
- functions.php
- style.css
In style.css enter the following code:
/*!
Theme Name: Storefront Child
Template: storefront
*/
These are the minimum lines you need in your style.css file for this to work.
In functions.php enter the following code:
<?php
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {
$parent_style = ‘storefront’; // This is ‘storefront’ for the Storefront theme.
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 ),
wp_get_theme()->get(‘Version’)
);
}
?>
This basically sets up your new child-theme, allowing you to fall back on the parent theme (“storefront”) and letting you use any custom styling rules you may write in your child-theme’s style.css file with CSS or what have you.
2. Isolate the cause of your problem
So, this process is different for everyone, normally I’d suggest professional help, like a therapist or a counselor, but honestly a trusted friend or someone you consider a confidant can work wonders t — …Oh…right, WordPress. 😅
Ok, so open up your inspector tools in your browser while in your boring Storefront category page and roll over the category title.
So copy that class name woocommerce-products-header__title into your clipboard, then roll over to your text editor. The goal is to find where that class is being used inside the regular non-child version of the Storefront theme.
In VisualStudio Code, at least, I can search the entire project for that class name by pressing Shift + Command + F then I paste that class name from the paragraph above. Then we can find every instance of that class being used in the entire project.
We can find that class in one other place that’s not in my storefront-child file:
archive-product.php that is part of the original storefront files.
(wp-content/plugins/woocommerce/templates/archive-product.php)
Go into that top result and take a look at that file, towards the very top, it gives us some instructions about how to set up a child theme version of the page.
* This template can be overridden by copying it to yourtheme/woocommerce/archive-product.php.
3. Setup your child theme to properly display your version of this file
So go back to our themes folder from a few steps ago. We have our storefront-child folder in there and we can target the instruction’s yourtheme folder and that to be one in the same. Open up storefront-child and create a new folder inside of it called woocommerce. Then open that new woocommerce folder in your text editor, create a new file called archive-product.php. Then copy the contents of the original archive-product.php file from the parent Storefront theme’s files and paste that gibberish into your child-theme’s archive-product.php file.
4. Alter it, Test it
Roll up into your new snazzy child-theme version of your archive-product.php file and find that class woocommerce-products-header__title and after the php entry but before the </h1> (closing of the header tag), enter some text, I recommend “[a space] sucks, where the video games at?”
Enter your WP Dashboard and activate your child-theme Storefront-Child, then roll over to your store’s Product page…any of them…Shop, or any of the pages for the categories you’ve set it up, it doesn’t matter…and your inner middle schooler’s inner monologue when they open a Christmas gift from Aunt Gertrude will be on display:
5. But we wanted a pretty picture!
Right. So let’s get into some of the meat and potatoes of how we’re going to get to the final result. In the child theme’s archive-product.php, I want you to find the <header></header> tag that is wrapping a bunch of php and the insolent little message we hardcoded. Then I want you to place a section tag and it’s closing section counterpart directly right after the first opening header tag and immediately right before the closing </header> tag. Then give the section tag the class of “woocommerce-header-background”
It should basically look like this:
<header class=”woocommerce-products-header”>
<section class=“woocommerce-header-background”>
<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>
<h1 class=”woocommerce-products-header__title page-title”>
<?php woocommerce_page_title();?>
sucks, where the videogames at?
</h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description — 10
* @hooked woocommerce_product_archive_description — 10
*/
do_action( ‘woocommerce_archive_description’ );
?>
</section>
</header>
Fire up your site again and if you open inspector tools and hover around over that area with the insolent text, you’ll notice something: your section you just made is wrapping the innards of all the stuff that was there before:
6. Where’s our picture?
So pushy! Okay…so now this might be considered out of vogue or bad practice and I’m a WordPress noob, so if I can figure out a better way of doing this I will edit the article and or give mad props to anyone that can spell it out for me. At any rate, I’m going to go into our child theme’s archive-products.php file and as an attribute to the section tag I created, I’m going to add some inline css styling by using the style attribute.
Go to the section tag and after the declaration of the class but before the closing > of the opening section tag, paste this into it:
style=”background: linear-gradient(transparent, #ffffff), url(‘https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/09/12/105447212-1536781636091mariomiyamoto-gettyimages-154746064.1910x1000.jpg?v=1536781772'); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”
The final line should look like this:
<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(‘https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/09/12/105447212-1536781636091mariomiyamoto-gettyimages-154746064.1910x1000.jpg?v=1536781772'); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>
I have utilized a linear-gradient combining transparency and the color white with an additional argument of a photo of Shigeru Miyamoto and Mario & Luigi. Also, there are some padding rules to set up the section the way I like, I’ve ensured the text is black, and I’ve made sure that the background-size covers the size of the section tag, because repeating images would look silly. Do all this, refresh your page after saving and you should see this:
7. Modularize dat %^&#!!!
By now we’ve got a cool looking header for each category that fades into the page itself, which is pretty snazzy if I do say so myself. However, each category page will literally have the same photo…which isn’t fly and will be really confusing (especially if you don’t sell video games).
To fix this, we’re going to have to utilize some PHP in the archive-product.php and the functions.php file of our child theme. Now the way I set up my categories in my shop, I used slugs (end parts of the url) to differentiate each category. So clothing would be something like (shop.com/clothing), fish would be (shop.com/fish), and so on. For us to programmatically load different pictures based on the url we are visiting, we’ll first need to roll into archive-product.php.
Go to archive-product.php and right under the line that says do_action(‘woocommerce_before_main_content’); but right before the closing php tag that looks like this ?> paste the following:
global $wp_query;
$cat_slug = $wp_query->query_vars[‘product_cat’];
$args = array(
“slug” => $cat_slug
);
Um…what?
So when WordPress loads up a url, my understanding is that it is querying the SQL database for particular information that pertains to the URL. It does this on every page and subsequently follows the markup and PHP code’s directions to make your page appear the way it does in each part of it. For the page of any given category, it is going to fetch all the products in that category as well as the name of the product category the page is for.
The code above gives us a global all encompassing variable of the wordpress query.
Then we create a variable called cat_slug and assign it to the result of digging into the wordpress query’s array called query_vars and fishing out the value of the key ‘product_cat’.
If you were to echo that on screen like so:
global $wp_query;
$cat_slug = $wp_query->query_vars[‘product_cat’];
echo $cat_slug
$args = array(
“slug” => $cat_slug
);
And then refresh…you’ll see the slug in the upper left hand corner.
Now what we want is to able to have our header html show up with all the right information and a different picture whether we are at Fish, Clothing, Tools, Shoes…whatever. In the PHP block right after the line echo $cat_slug create a variable called $args and make it equal an associative array with a key of “slug” equalling $cat_slug. Then right under it type the following:
categoryPageBanner($args);
This is a function we are calling (which we are about to create) that takes the $args variable we just made as an argument.
Now take a leap of faith with me and highlight/select & cut-copy the entire header html section…but delete that “ sucks, where the video games at?” part though. We don’t need it anymore. Also, delete the line that says echo $cat_slug. We also don’t need that.
Then go to functions.php and create the function categoryPageBanner($args) {…} like so:
<?php
function categoryPageBanner($args){
?>
/*Paste the HTML in here so it looks like this:*/
<header class=”woocommerce-products-header”>
<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(‘https://fm.cnbc.com/applications/cnbc.com/resources/img/editorial/2018/09/12/105447212-1536781636091mariomiyamoto-gettyimages-154746064.1910x1000.jpg?v=1536781772'); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>
<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>
<h1 class=”woocommerce-products-header__title page-title”>
<?php woocommerce_page_title();?>
sucks, where the videogames at?
</h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description — 10
* @hooked woocommerce_product_archive_description — 10
*/
do_action( ‘woocommerce_archive_description’ );
?>
</section>
</header>
<?php
}
?>
If you refresh now, you should be able to see the same thing as before. Now I want you to go to the inline styling we did in the section tag and clear out the contents of the url portion where we pasted that long image location address and instead place the following inside the parentheses:
<?php echo $args[‘photo’];?>
The line should look like this now:
<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(<?php echo $args[‘photo’];?>); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>
What’s happening here is that we are having the function load up our HTML for us and we drop into PHP to enter the url of the background image that we want with the value of whatever the key ‘photo’ is pointing to in our $args array.
“But wait…we didn’t set up any ‘photo’ key!” and this is true. We did not…but we will above this right after the definition of the function itself. Scroll up a bit in your functions.php file where you defined the function categoryPageBanner($args){…}.
Now right before the ?> php closing brace before the html we pasted, paste this:
if($args[‘slug’] == ‘clothing’) {
$args[‘photo’] = “https://longreadsblog.files.wordpress.com/2017/05/34474444071_827d60d72d_o.jpg?w=1200";
}
if($args[‘slug’] == ‘food’){
$args[‘photo’] = “https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1024px-Good_Food_Display_-_NCI_Visuals_Online.jpg";
}
if($args[‘slug’] == ‘fish’) {
$args[‘photo’] = “http://scibosnian.com/wp-content/uploads/2017/12/Grilled_Fish_Fillets_1.jpg";
}
if($args[‘slug’]== ‘alcohol’){
$args[‘photo’] = “http://ichef.bbci.co.uk/images/ic/640x360/p03r1528.jpg";
}
if($args[‘slug’] == ‘clothing-men’){
$args[‘photo’] = “https://filson.imgix.net/media/wysiwyg/campaign/902/20190201a/store-front/mens/cb2_filson_mens_vests.jpg?auto=format%2Ccompress&fit=max&ixlib=php-1.1.0&w=1920";
}
We set up some if statements where if the $arg’s “slug” key is “alcohol”, then we drop into a block where we define the $arg’s “photo” key as a particular link to a photo. We do this for each of our categories.
So your functions.php file should start like this ((don’t accidentally erase what comes at the bottom & don’t forget to make sure any necessary PHP brackets that the code afterwards needs to run are present))
<?php
function categoryPageBanner($args){
if($args[‘slug’] == ‘clothing’) {
$args[‘photo’] = “https://longreadsblog.files.wordpress.com/2017/05/34474444071_827d60d72d_o.jpg?w=1200";
}
if($args[‘slug’] == ‘food’){
$args[‘photo’] = “https://upload.wikimedia.org/wikipedia/commons/thumb/6/6d/Good_Food_Display_-_NCI_Visuals_Online.jpg/1024px-Good_Food_Display_-_NCI_Visuals_Online.jpg";
}
if($args[‘slug’] == ‘fish’) {
$args[‘photo’] = “http://scibosnian.com/wp-content/uploads/2017/12/Grilled_Fish_Fillets_1.jpg";
}
if($args[‘slug’]== ‘alcohol’){
$args[‘photo’] = “http://ichef.bbci.co.uk/images/ic/640x360/p03r1528.jpg";
}
if($args[‘slug’] == ‘clothing-men’){
$args[‘photo’] = “https://filson.imgix.net/media/wysiwyg/campaign/902/20190201a/store-front/mens/cb2_filson_mens_vests.jpg?auto=format%2Ccompress&fit=max&ixlib=php-1.1.0&w=1920";
}
?>
<header class=”woocommerce-products-header”>
<section class=’woocommerce-header-background’ style=”background: linear-gradient(transparent, #ffffff), url(<?php echo $args[‘photo’];?>); padding: 5vw; color: black; background-size: cover; padding-top: 10vw;”>
<?php if ( apply_filters( ‘woocommerce_show_page_title’, true ) ) : ?>
<h1 class=”woocommerce-products-header__title page-title”><?php woocommerce_page_title(); ?></h1>
<?php endif; ?>
<?php
/**
* Hook: woocommerce_archive_description.
*
* @hooked woocommerce_taxonomy_archive_description — 10
* @hooked woocommerce_product_archive_description — 10
*/
do_action( ‘woocommerce_archive_description’ );
?>
</section>
</header>
<?php }
/*the rest of the code*/
9. Success
If you roll into any of your category pages, you should see different pictures on each page.
Clothing:
Food:
Alcohol:
And that’s it!
That’s a wrap for my first Medium article. Maybe this is a really easy problem to solve for more experienced developers or WordPress junkies. However, I had a hard time finding the answer to this problem and hope that I can shorten other peoples’ frustration with this little lesson.
Have a great day!
-Adrian
🎼 (adrian-rosales.com)
💻 (adrian-rosales.io)