Picture Guide To Develop Custom WordPress Child Themesvinadmin17
A child theme is basically a theme that automatically adapts the theme and functional aspects of its parent theme. When you activate a child theme, WordPress tend to pick its code for design and functionality as well. Therefore if the child theme doesn’t get to consume any code for modifying existing functionality then WordPress will refer to the parent theme’s files while applying those to your website.
Below are three main reasons why you would want a child theme activated on your website:-
- To save and maintain modifications: The changes made on your theme’s files are lost while you update a parent theme.
- To keep your codes organized: You will need separate files for custom code snippets, and this will help you track your modifications.
- To Speed-up with the development: Since Child themes have their functionality from parent themes there is no need to rewrite the code and this makes the development easier and faster.
Steps involved in creating a child theme for your wordpress website:-
STEP 1: Start creating new theme directory in your WordPress install
- Log in to your cPanel account (or FTP client) and then go to your site’s theme directory (/wp-content/themes).
- Create a new directory for the child theme and give it the same name (Parent theme’s name). Naming the child theme with the same name is so far the best practices.
STEP 2: Creating a style.css file
Start filling up the empty theme directory of your brand new child theme. For this, we need to create a style sheet, and then add some code to define its name and its parent theme. The code will also import the parent theme’s style sheet while you create one for your child theme.
To deal with multiple style sheets you’ll have to add the corresponding code snippet as stated below:
Open the new child theme directory (/wp-content/themes/ (name of child theme) to create a new file of style.css.
Next, copy and paste the below given lines of code into the style.css file:
The values for theme name and template define the child theme’s name and tell WordPress which theme to consider as the parent theme. The imported line adds the parent theme’s CSS rules to the child theme. Hence, when you activate the child theme to your website you will get to see the content and styling.
At this stage your child theme is technically ready to go apart from the modifications you wish to make in the styling of theme. Add custom functionality to make changes in the styling as it can help you in adding a functions.php file to your child theme’s directory. Or you can simply skip Step 3 and move to step 4.
STEP 3: Building a functions.php file
WordPress developers usually tend to add some custom bits to improve the functionality to your WordPress theme. When you plan to modify custom code to your parent theme’s functions.php file, remember that the changes you make will be removed from when you update your theme. In order to not let this happen, do the changes you make to a separate functions.php file for the child theme. Navigate to your child theme directory (i.e. /wp-content/themes/your child theme name), and create a new file in it, and name it functions.php as shown in the image below.
Then, copy and paste the below given lines of code into the functions.php file:
We’ve simply added the PHP open tags to the functions.php file in the code given above. Add its code below the comment line (i.e. Line 2) for custom functionality.
Use the wp_enqueue_style() function to add multiple style sheets of your parent theme to your child theme without slowing down your site. To do this, simply add the following lines of code to the functions.php file:
STEP 4: Activating the manually developed child theme
Now that our child theme is good to go, activate it to our WordPress website and test it. Log in to your site’s admin panel and navigate to Appearance > Themes. You will see the new child theme added to your list of installed themes. Click the Activate button to and preview your site.
Final thoughts on customizing themes:-
How to customize child themes?
Once you are done installation and activation of your child theme on your website, you can move on with the customizing finally!
Here are few key points which you can or alter while preparing your theme’s design and functionality:
- By adding custom css styles
Navigate to Appearance > Editor and add it there, and also access the other files from this screen.
- Utilize Theme hooks
Action hooks will add custom functionality to your site’s theme, and filter hooks will modify existing functions.
- Including template files is a must
If you wish to make some large-scale modifications to your theme, for e.g. defining a new template, then you can create template files for your child theme as well, just by following the above mentioned steps for creating the style.css and functions.php files.