How to make a child theme after style.css has been customized - css

I am working on a theme that has already been customized. Only one file in the theme has been customized, that file is the style.css. A child theme was NOT created before doing the customizations.
I would like to make a child theme so the customizations are not lost when the theme is upgraded. How do I add the customizations in the style.css to new child theme?
Thank you.

you should check your all files and folders of theme . sometime your theme has a dynamic css file like sass, less or other .... if you have a dynamic css file, you should customize that file ....
if you haven't dynamic css files, you can customize your main css file as you want.

Related

Child themes of twentysixteen theme

I am using twenty sixteen child theme. I need to modify the theme contents. What are the files I need to modify and how? Can anyone explain it in detail.
Advance thanks.
when i use child theme like this i get black screen
This is my site http://i.stack.imgur.com/snSX9.png How to extent the full width of my site..
Read the following documentation about the child themes
Child theme inherits all the functionality and styling of it's parent theme. If you are using child theme and a theme update is applied your changes won't be lost or overwitten
You can quickly create child theme for any theme, just follow the steps given below:
1 Create a folder and name it exactly your theme name; append -child in the name. e.g. creating child theme for twentysixteen theme would be called twentysixteen-child this folder should sit beside parent theme under wp-content/themes/
2- Your child theme should have three files.
style.css
functions.php
screenshot.png
3- In functions.php file you can override parent theme functions.
4 In style.css file you can override parent theme CSS code.
5 If you want to change header design then you have to override header.php file. For this copy header.php file of your parent theme and paste it inside your child theme folder. Now, you can modify the child theme header file as per your requirements.
6 Similarly, you can also override footer.php file in your child theme.
For more info have a look over below thread-
https://codex.wordpress.org/Child_Themes
You need to create at-least one child-theme directory and two main files (style.css & functions.php) under child theme directory. I have given example using Twenty-Thirteen WordPress theme. Step by step explanation is given

Wordpress Mezzanine Flat Theme - shortcode.php in ChildTheme

It seems that an edited copy of shortcodes.php in child-theme of mezzanine flat theme is not working (does not override the parent theme)
I tried copying the whole lib folder where shortcodes.php is located but still not working. Is there anything I need to do to make it work? Other common pages of wordpress (i.e. header and page) override smoothly on child pages.
Thanks in advance.
You can't override shortcodes.php because the child theme replace only template files
But you can create a new file, like custom_shortcodes.php with your custom shortcode, save in your child theme and then include it in functions.php ( include 'custom_shortcodes.php'; )

Wordpress, Gantry Framework, Child Theme?

Does anyone have experience with Gantry Framework?
I am wondering if it is possible to create a child theme based off of the default? Where would I put my css file and can I build off of the current css instead of starting from scratch while still separating my css from the default theme?
Apart from the usual process of creating a WordPress child theme (create a directory, with proper style.css and functions.php), Gantry requires a specific procedure.
You'll need to copy two files from the parent directory to the child theme directory, keeping the structure:
/gantry/theme.yaml
and
/includes/theme.php
Then, edit the copied theme.yaml: the parent must be your parent theme directory name.
On the theme.php, select all text and replace with this:
// Initialize theme stream.
$gantry['platform']->set(
'streams.gantry-theme.prefixes',
array('' => array(
"gantry-themes://{$gantry['theme.name']}/custom",
"gantry-themes://{$gantry['theme.name']}",
"gantry-themes://{$gantry['theme.name']}/common",
"gantry-themes://{$gantry['theme.parent']}",
"gantry-themes://{$gantry['theme.parent']}/common"
))
);
As for css, you must create this file, within your child theme directory:
/custom/scss/custom.scss
It can be formatted in either SCSS or CSS, and will override the theme's core style sheet files.
Creating a Child Theme is very easy.
All you need to do is create a directory in your theme directory, and name it something like "Gantry-child". Inside that folder, add a file called "style.css". Once this is done, you just need to add the Theme Information that tells Wordpress the Child Theme's Name, Author, and Parent Theme.
Inside the new style.css, add:
/*
Theme Name: Gantry Child
Template: rt_gantry_wp
*/
The most important part that lets Wordpress know that this is a child of the Gantry Theme is the "Template" section. This is the name of the PARENT directory in your Themes folder.
What this will do is create a new theme that inherits all of the parent theme's functions. If you also want to inherit the existing parent theme stylesheet, add to style.css:
#import url("../rt_gantry_wp/style.css");
Hopefully this should get you started. Once that's done, you can add your own header, footer, index, functions, or anything else you can think of to extend the parent theme's functionality.
Hopefully this helps get you started.

Wordpress theme css file

According the Wordpress' doc, when we create theme, we need to create style.css file in the same place with other files like header.php, footer.php, however, to make a better organization of files, I put all css files in a sub folder.
Then there comes the problem, when I go to the admin area, Appearance -> Editor, I can not see the sub folder so can not edit those css file in the sub folder.
Please help, thanks.
create style.css on your theme folder and have it's content:
/*
Theme Name: Your theme name
Theme URI: http://example.com/
Description: Your theme description
Author URI: http://example.com/
*/
#import('themesubfolder/yourfile.css');
There seems to be a problem in WordPress (still existing at version 3.3.1 as far as I can tell) where CSS files in a sub directory of a child theme are not recognized. For me, the problem isn't only with not seeing such files in the "editor." CSS files that are in subdirectories simply do not work.
Yes, you can use #import in your main CSS file to include another CSS file that's in the child theme's directory, but it must be at the same level as the main CSS file. After several hours of frustrating experimentation, my conclusion is: CSS files that are in a sub folder of a child theme are ignored.
Do one thing, delete old CSS file and replace it with new CSS file, if you have two-three CSS then d'nt worry about that, place other CSS file with Header.php, footer.php, index.php...
Call that CSS file with "/FILE NAME"

How do I use new add_editor_style() function in wordPress?

I found this article:
http://www.deluxeblogtips.com/2010/05/editor-style-wordpress-30.html
I created a child theme using the Twentyten theme as a parent. I am trying to have the WYSIWYG editor use a custom stylesheet.
I added this to my functions.php file:
add_editor_style();
Then I created an editor-style.css file in my child theme's folder and added this:
html .mceContentBody {
max-width:591px;
}
When I go to the WYSIWYG editor and use firebug to check the css that is affecting the .mceContentBody element, I can see that is using my stylesheet, but it is being overrriden by the default editor-style.css sheet from the twentyten theme.
How can I force it to use my editor-style.css file and not the default one?
add_theme_support('editor_style');
before
add_editor_style('tinymce-styles.css');
assuming that your custom css is in your template's root folder.
Try redeclaring twentyten_setup in your theme's functions.php file. Just copy and paste the whole function from twentyten to your theme.
Check your CSS for errors. I spent hours pulling my hair out wondering why wordpress wasn't using my stylesheet. It wasn't even getting included. Turns out i had an extra { in my css.

Resources