How to create a child theme in WordPress? - css

I am trying to create a child theme so I can customize the parent theme but it is not working what-so-ever. I did everything I can think of:
created a folder for my child theme under wp-content/themes
created a style.css stylesheet and saved it in the child theme folder:
/*
Theme Name: Twenty Thirteen Child Theme
Description: Twenty Thirteen Child Theme
Author: Ashley
Template: twentythirteen
Version: 1.0.0
*/
and I went to Appearance > Themes in WordPress but no child theme showed up. I have tried it multiple times and don't know what to do.

Pretty good tutorial here:
https://www.elegantthemes.com/blog/resources/wordpress-child-theme-tutorial. I've taken a snippet from it for the style.css file, and substituted bits with your info:
/*
Theme Name: Twenty Thirteen Child Theme
Description: Twenty Thirteen Child Theme
Author: Ashley
Template: twentythirteen
Version: 1.0.0
*/
#import url("../twentythirteen/style.css");
/* =Theme customization starts here
------------------------------------------------------- */
Be sure to link properly to the TwentyThirteen theme's style.css file (via #import); make sure you're using the right path. Then you can proceed as normal by visiting "Appearance > Themes".

here is a simple article
create child theme directory
create styles.css
create functions.php

Related

Divi + Woocommerce Child Theme

I have experience with Wordpress & Woocommerce but this is the first time I have used Divi + Woocommerce and it's been a while since I worked with WP so I may be a little rusty. I am a full stack developer so any technical answers are fine.
I have created a child theme without any issues but when I try to copy the Woocommerce folder into the child theme to make changes to the .php file (e.g. /child-theme/woocommerce/templates/content-product.php) as I have done before (non-divi) it doesn't override.
I have added the child theme comment to the child theme styles.css as follows
/*
Theme Name: Theme Child
Version: 1.0
Description: Child theme for Main theme.
Author: Me
Template: theme
*/
I needed to remove the subdirectory "templates" from the child theme woocommerce folder.
From here you can download the free Divi Child Theme: https://divireadythemes.com/download-a-free-blank-divi-child-theme/
/*
Theme Name: Divi Child Theme
Theme URI: https://YourURL.com/
Description: Divi Child Theme
Author: Areeb Saeed Raja
Author URI: https://YourURL.com/
Template: Divi
Version: Updated for Divi 3+
*/

About WordPress child theme

I have created wordpress child theme from parent theme "twentythirteen". My child theme name is "twentythirteen-child".It has following content.
/*
Theme Name: twentythirteen-child
Theme URI: http://www.example.com
Description: A Twenty Thirteen child theme
Author: WPBeginner
Author URI: http://www.example.com
Template: twentythirteen
Version: 1.0.0
*/
#import url("../twentythirteen/style.css");
Unfortunately my child theme replaces the parent theme and newly created theme is applying when i activate child theme and there is no parent theme style is applied on webpage.
How can i solve this problem?
Couple things to try:
Double check to make sure your template path in the header you posted actually goes to the twenty-thirteen theme. That could be why the base styles aren't appearing.
Your child theme needs it's own style.css - you can't import that. Read more on the WordPress Child Theme Codex Page.
Make sure you didn't copy over the entire directory into the child folder. That's a common beginner mistake.
Your child theme is supposed to override the parent theme. It supersedes any parent theme files you put into it. For example, if you put a different page.html in the root of your child theme, it would replace the page.html from the twenty-thirteen parent theme.

Wordpress Child Theme Css not Working

I am using the theme "inkness"
I have created a new folder named "inkness-child" and created there a css file named main.css
But nothing happens when I modify the main.css in the "inkness-child" theme, but it always works on the parent theme. I also used "!important", but still nothing.
And I also activated the child theme, but the modifications does not work.
Here is the code to main.css in the child theme:
/*
Theme Name: Inkness Child
Theme URI: http://click-victor.cu.cc/inkness-child/
Description: Inkness Child Theme
Author: Me
Author URI: http://click-victor.cu.cc
Template: inkness
Version: 1.0.0
#import url("../inkness/css/skins/main.css");
/* =Theme customization starts here
------------------------------------------------------- */
Can you please show me what could be wrong?
Try changing the name of child theme's css file to style.css
Note that the style.css file is enqueued automatically when you create the child theme.

How to activate the child theme in Wordpress?

I create a new style.css and use it in child theme. And I create a new folder in wp-content and name it as themename-child and upload the style.css that I created. Now, I go to wp dashboard -> Appearance -> Themes and I look the child theme that I create. And I found this error:
Broken Themes
The following themes are installed but incomplete. Themes must have a stylesheet and a template.
Name Description
Accesspress Lite The parent theme is missing. Please install the "AccesspressLite" parent theme.
Is there anything that I need to upload? Please help me. I'm new in WordPress. Thank you!
No, the problem here is that you must specify the parent template in commented area of your child style.css
Example from Wordpress Codex
/*
Theme Name: Twenty Fourteen Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: twentyfourteen
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twenty-fourteen-child
*/
#import url("../twentyfourteen/style.css");
Line with
Template: twentyfourteen
is what your need. Your parent theme must be in corresponding folder, in this example, themes/twentyfourteen.
Also, in your parent template you must load style.css via get_stylesheet_uri() for child theme to work correctly.
Seems clear to me that you need to install the Parent Theme, which is required for child theme installation...
The parent theme is missing. Please install the "AccesspressLite" parent theme.
The whole purpose of the child theme is that it feeds it's adjustments into the parent theme, so you don't have to adjust parent theme settings.

How to create child theme?

I have enfold theme installed in my Wordpress site. i have tried following things
1)i have create one folder named - enfold-child
2)i have create two files in that folder
1) style.css
2) functions.php
3)screenshot of parent theme enfold
now i have placed code in style.css like this
/*
Theme Name: Enfold
Description: <strong>A superflexible and responsive Business Theme by Kriesi</strong> - <br/> Update notifications available on twitter and facebook:<br/> <a href='http://twitter.com/kriesi'>Follow me on twitter</a><br/> - <a href='http://www.facebook.com/pages/Kriesi/333648177216'>Join the Facebook Group</a>
Version: 2.2
Author: Kriesi
Author URI: http://www.kriesi.at
License: Themeforest Split Licence
License URI: -
Theme URI: www.kriesi.at/themes/enfold/
Template: enfold
*/
but when i am open themes in admin panel this message displays in enfold child - This child theme requires its parent theme, Enfold.
so where does i mistaken
my enfold parent theme has code like this
- /*
Theme Name: Enfold
Description: <strong>A superflexible and responsive Business Theme by Kriesi</strong> - <br/> Update notifications available on twitter and facebook:<br/> <a href='http://twitter.com/kriesi'>Follow me on twitter</a><br/> - <a href='http://www.facebook.com/pages/Kriesi/333648177216'>Join the Facebook Group</a>
Version: 2.2
Author: Kriesi
Author URI: http://www.kriesi.at
License: Themeforest Split Licence
License URI: -
Theme URI: www.kriesi.at/themes/enfold/
*/
/*
* PLEASE DO NOT EDIT THIS FILE!
*
* This file is only in your themefolder for WordPress to recognize basic theme data like name and version
* CSS Rules in this file will not be used by the theme.
* Instead use the custom.css file that is located in your themes /css/ folder to add your styles.
* You can copy a style rule from any of your css files and paste it in custom.css and
* it will override the original style. If you just want to add small css snippets you might also
* want to consider to add it to the designated CSS option field in your themes backend at: Theme Options->Styling
*/
Please help
you need not to do anything, you can download ready made enfold child theme.. just copy following link and paste into your browser's address bar...
https://kriesi.at/files/enfold-child.zip
if you want to create custom one, then check following link.
https://vimeo.com/67221517
I hope you will like it.. :)
You need to add code in style.css of child theme like as follows
/*
Theme Name: your child theme name
Theme URI: http://example.com/child-theme-url/
Description: your Child Theme desc
Author: your author name
Author URI: http://example.com
Template: enfold
Version: 1.0.0
*/
/* =Imports styles from the parent theme
-------------------------------------------------------------- */
#import url('../enfold/style.css');
Template : is the your parent theme folder name.
I hope this will help to resolve your problem.
You need to include Template: enfold in style.css of your child theme.
See this official wordpress docs link of Child theme http://codex.wordpress.org/Child_Themes & read especially this part:
....You can change each of these lines to suit your theme. The only
required lines are the Theme Name, and the Template. The Template is
the directory name of the parent theme. In this case, the parent theme
is the TwentyThirteen theme, so the Template is twentythirteen, which
is the name of the directory where the TwentyThirteen theme resides....

Resources