8. Styles
Custom styles go into the child theme’s stylesheet.
Storefront uses the SASS pre-processor
9. Fonts
Enqueue the Google fonts we want to use.
Dequeue the Google fonts we want to use in the
Storefront theme we do not need.
10. Storefront Hooks
Hooks or actions and filters are defined in the inc
directory of the Storefront theme.
There are 3 important files:
class-storefront.php
storefront-template-hooks.php
storefront-template-functions.php
19. Home Page Overrides
function storefront_homepage_content() {
while ( have_posts() ) {
the_post();
get_template_part( 'content',
'homepage' );
} // end of the loop.
}
I am the owner and web developer at Kool Kat Web Designs. I work with designers to create custom solutions for small to medium sized businesses and non-profits.
Mention that the theme itself does not have bells and whistles like sliders and page builders but is compatible with many that can be added on as plugins. It responsive, accessible
Mention schema markup is for SEO
Mention that I am using the free hamburger menu extension
Extensions include mega menus, pagination, reviews and other
Themes for book stores, toy stores, etc.
Build your Own Child Theme and Use Storefront Actions and Filters. Override Storefront functions.
We will discuss the third option today.
How to create a child theme. Style sheet includes parent template.
Note that we don’t need to enqueue stylesheet
For a Storefront child theme, parent and child CSS files are already enqueued. This works by checking if the theme is a child them and then enqueueing the stylesheet.
Once we have our child theme in place. We can begin the transformation. Our basic goal is to go from the out of the box Storefront theme to the specified design.
Once we have our child them in place. We can begin the transformation. Our basic goal is to go from the out of the box Storefront theme to the specified design.
Site still under development
Note: Storefront actually uses the SASS pre-processor. You may also use this in your own styles.
Storefront uses both Susy and Bourbon modules. In my project, I used SASS and imported the Susy modules, too. I used a GRUNT job to compile the SASS into CSS.
ENQUEUE
Use the WordPress action wp_enqueue_scripts without any priority so it is in place before the stylesheets
DEQUEUE
Use the WordPress action wp_enqueue_scripts with a high priority so it removed after the parent theme enqueues it
Note the separate calls to enqueue scripts so actions happen in the correct order. We are using Lato and Merriweather
1. class-storefront.php which sets up theme supports, scripts and widgets
2. storefront-template-hooks.php which defines the hooks and priorities
3. storefront-template-functions.php which contains the implementations
The next few items will all appear as part of the setup theme function
Remove unwanted elements from the home page. Replace the storefront credit with our own
This is the action we call to change the header. Show pics of original again.
Move around items. We want the secondary nav at the top before the logo. And we want the cart to be part of the secondary nav, not the primary. Notice that we call a couple of Storefront functions:
So, lets look at storefornt_secondary_navigation
Since the storefront theme uses if (function_exists) when calling storefront_secondary_navigation() we can easily override that function with our own code. In other words, the parent theme function will not get called because there is a function of the same name in our child theme
Here we call the secondary menu code to display the menu and add the header cart as part of that menu.
And since we removed the storefront_secondary_menu action, the search gets moved after the site branding as it is the next action. Of course, it is formatted differently, too. We use the standard woocommerce “get_product_search_form filter to separate out the search button.
Same principal of overriding functions
Again we use the principal of overriding functions
We also create a file content-homepage.php which displays the images, links and text for the home page. I used ACF repeater here to store this info.
Hopefully our goal is achieved!
Mention redirects for shop page and single product page