HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development

How to Create a WordPress Child Theme | Step by Step

in Web Development, Wordpress
Reading Time: 2 mins read
483 10
0
how to create a wordpress child theme for beginners step by step
678
SHARES
3.1k
VIEWS
Share on FacebookShare on Twitter

Follow the following steps to create a WordPress child theme.

Step 1: Go to your themes folder

Step 2: Choose a theme you want to have a child theme

Watch the following video that covers the whole process of creating a child theme. Either way, continue on the rest of the steps:

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

Step 3: Create a new folder for the child theme.

Any name will do. The folder should be the same folder as your parent theme (not inside).

Step 4: Create two files inside the child theme folder.

Create a functions.php and style.css files inside the folder.

Step 5: Refer to the WordPress Theme Handbook.

Copy and paste the example theme basic info into your style.css file.

[css]

/*
Theme Name: Twenty Fifteen Child
Theme URI: http://example.com/twenty-fifteen-child/
Description: Twenty Fifteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfifteen
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentyfifteenchild
*/

[/css]

Copy and paste the enqueue function into your functions.php file.

[php]

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is ‘twentyfifteen-style’ for the Twenty Fifteen 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’)
);
}

[/php]

Step 6: Go to the wordpress admin dashboard and activate your child theme.

When you visit the website, it should the same as when the parent theme was activated. You’re done!

Done!

Now you can create modifications/changes in your child theme without affecting the parent theme’s core files.

 

 

Share271Tweet170Share68

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.