Author: Stasyuk Eugene 70 Tags: 18.12.2022

Recently I received a request to make a budget online store with an admin panel. Of course, in this question, I decided to use WordPress in conjunction with Woocommerce. One of the offered storefront eCommerce plugin themes is Storefront. The free version, as expected, does not offer a rich selection of settings. But, nevertheless, it turned out at least something similar to a modern online store. Here is the result:

storefront

The question of using corporate colors remained open. And plus, the inscription in the basement of the topic was very embarrassing:

storefront

Therefore, it was decided to additionally use a child theme. Full information about it can be found here.

How to include a child theme?

1) In order to create a child theme, we need to go to the themes folder: wp-content/themes.

Here we create a folder with the name of our theme and with the prefix child:
storefront-child

In fact, the folder can be named whatever you like. But for ease of use, it’s better to do it like this.

2) Next, go to the folder and create the required style.css file. In the file itself, we need to add comments. In order for the theme to work, we only need two fields:

    • Theme Name. (required) Child theme name.
    • Template. (required) Parent theme folder name, case-sensitive.

style-css

3) After that, go to the admin panel. Select Appearance -> Themes from the menu. In the proposed list of topics, select our child. Ready! Now we can work with her.

админка

How to work with a child theme?

Working with a child theme is quite simple. It is enough that you take the template file from the original theme, transfer it to your child theme and make changes to it. This way WordPress will use the template in Storefront-child instead of the existing file in Storefront.

As for the function.php file, WordPress does not replace the original code with our code, but only supplements it.

If we take as an example the online store that I did, then the changes were mostly cosmetic. In the arsenal of files that I used were:

  • header.php and footer.php in which I removed everything unnecessary.
  • The assets folder which contained the css folder with the style.css file. It so happened that it is more convenient for me to store styles in a separate folder, and not to edit the main style.css file. Here was the main layer of code that I set the appearance of the site.
  • functions.php – here I included the style file and also rewrote the function that adds information in the footer without using the storefront label:

It turned out something like this:
child-ready

child-ready

Other articles

How to import a large MySQL database into OpenServer

How to import a large MySQL database into OpenServer

How to import a large MySQL database into OpenServer

Perhaps everyone is used to importing a database using phpMyAdmin. But this platform has a limit on the weight of the file that can be uploaded. So if the database dump exceeds this quota, you can’t do it through phpMyAdmin. Today I’m going to show an alternative way to load the database – through the […]

How to pull svg content from img tag? svg

How to pull svg content from img tag?

How to pull svg content from img tag?

Graphics in svg format is a fairly convenient and widely used image format. For example, in an svg with css styles, we can change its color. And as we know, we can do this procedure only if there is markup on the svg page. But what if such an image is connected to the page […]