Wordpress Tutorials
- Wordpress
- Directory and file structure.
- Wordpress configuration
- Htaccess Configuration
- WP-CONTENT user playground
- Increase file size loading in phpmyadmin on localhost.
- Fatal error: Allowed memory size of x bytes
- wordpress Dashboard
- How to set local host domain or Virtual host
- Header, index and footer page.
- How to create wordpress Themes
- Html to wordpress themes
- Child Themes
- Increase Upload Max Filesize
- wp_enqueue_style & script
- How to make plugin
- Create Plugin
- Insert data into table using plugin.
- Show data from database
- Hook & Filter
- Template Or Custom page template
- Custom Login template
- How to show post on diffrent page.
- Custom widgit
- How to use contact form 7 plugin.
- Wordpress Database
- How to use Duplicator plugin
- How to fix Fatal Error: Maximum Execution Time Exceeded in WordPress
- How to debuggin mode on in wordpress
- Auto update plugin and themes
- How to Transfer WordPress
- How to change a WordPress site URL
- Top 10 issues in wordpress
- wordpress website link
Wordpress setting
Wordpress Function
wordpress top 10 problems
Important Links
How to create wordpress child themes ?
A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child themes are the recommended way of modifying an existing theme.
Why use a Child Theme?
There are a few reasons why you would want to use a child theme:
How to Create a Child Theme ?
A child theme consists of at least one directory (the child theme directory) and two files (style.css and functions.php), which you will need to create:
1. The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. You can name this folder anything you want. It is recommended that the name of your child theme directory is appended with '-child'. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme 'twentyfifteen-child', indicating that the parent theme is the Twenty Fifteen theme.
2. The next step is to create a stylesheet file. This must be named style.css. Copy and paste the following code into the file you’ve just created:
file name :- style.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: twenty-fifteen-child
*/
// @import url("../twentythirteen/style.css");
// Now we can override styles from the parent theme...
body {
background: #eeeeee;
}
The two necessary items in the code above are the lines starting with “Theme Name" and “Template.” The theme name tells WordPress what the name of your theme is, and this is displayed in the theme selector. The template tells WordPress which theme it should consider as the parent theme. Most of the others are self-explanatory, with the exception of the text domain and the tags. The text domain is used for translating strings. The text domain should be unique for your theme and should be used whenever you use translation functions.The tags section is a list of tags that are used by the WordPress Theme Repository.
The only required child theme file is style.css, but functions.php is necessary to enqueue styles correctly (below).
3. The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme's functions.php. You will therefore need to create a functions.php in your child theme directory. The first line of your child theme's functions.php will be an opening PHP tag (<?php), after which you can enqueue your parent and child theme stylesheets. The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies.
This is the minimum requirement for creating a child theme. You can now go to Appearance » Themes where you will see Twenty Fifteen Child Theme. You need to click on activate button to start using the child theme on your site.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
Your child theme is now ready for activation. Log in to your site's administration panel, and go to Administration Panels > Appearance > Themes. You should see your child theme listed and ready for activation. (If your WordPress installation is multi-site enabled, then you may need to switch to your network administration panel to enable the theme (within the Network Admin Themes Screen tab). You can then switch back to your site-specific WordPress administration panel to activate your child theme.)
Some Notes For Theme Makers
If you make your own themes there are a couple of guidelines you may want to follow to make child theme creation easier. The two most important ones are learning the difference between get_stylesheet_directory() and get_template_directory() and creating pluggable functions.
The Right Directory
When linking to assets using the mentioned functions you should always be aware that the get_template_ family of functions will always point to the directory of the parent theme while the get_stylesheet_ family of functions will always point to the child theme’s directory.
Activating The Child Theme
Finally, activate the child theme at Appearance > Themes.
Example of child themes of style.css file.
/*
Theme Name: My Twenty Eleven Child
Theme URI:
Description: My Child theme
Author: Abbas Suterwala
Author URI:
Template: twentyeleven
Version: 1
*/
@import url("../twentyeleven/style.css");
body, input {
line-height: 1.75em;
background: #A9D0D6;
font-size: 11.5pt;
color: #5A6466;
font-family: Kreon, serif;
}
a {
color: #2A3436;
}
#site-title a {
font-family: "Open Sans",sans-serif;
font-size: 3em;
}
#access {
background: #FFFFFF;
}
#access a {
text-transform: uppercase;
text-decoration: none;
color: #1C1C1C;
font-size: 1.2em;
}
#access .current-menu-item > a, #access .current-menu-ancestor > a, #access .current_page_item > a, #access .current_page_ancestor > a {
background: #F2EBDE;
border: solid 1px #BFB5A4;
box-shadow: inset 0px 0px 0px 1px #fff;
text-shadow: 1px 1px 0px rgba(255,255,255,0.9);
}
#secondary {
background: #EEF5F6;
padding: 20px;
border: solid 1px #D6E0E2;
margin: 0 10px 0 0;
text-shadow: 1px 1px 0px rgba(255,255,255,1);
box-shadow: inset 0px 0px 0px 1px #fff;
}
.widget a {
text-decoration: underline;
color: #2A3436;
}
.widget a:hover, .widget a:focus, .widget a:active {
text-decoration: none;
}
#site-generator {
padding: 40px 40px 0 40px;
color: #302F2C;
background: #F2EBDE;
font-family: Kreon,serif;
border-top: solid 1px #BFB5A4;
box-shadow: inset 0px 0px 0px 1px #fff;
text-shadow: 1px 1px 0px rgba(255,255,255,0.9);
}
.entry-title, .entry-title a {
font-family: "Open Sans", sans-serif;
color: #2A3436;
margin-bottom: 1em;
font-size: 1.5em;
text-transform: uppercase;
font-weight: normal;
}
.left-sidebar #secondary {
margin-left: 3%;
}
Why should we use a WordPress Child Theme?
Following are the reasons to use a WordPress Child Theme:
How to Create a WordPress Child Theme?
Example of Child Themes :-
File name : style.css
/*
Theme Name: Foo Bar Child
Theme URI: http://example.com/foo-bar-child/
Description: Foo Bar Wordpress Child Theme
Author: Vincy
Author URI: http://itechtuto.com
Template: foobar
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, two-columns, right-sidebar, responsive-layout
Text Domain: foo-bar-child
*/
// here write all css.
.mydiv{
width:50%;
}
Example of Child Themes :-
File name : function.php
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
How does Child Theme work?
Unlike functions.php, all other parent theme files are overridden. Create a file in Child Theme folder with same name as in parent theme folder. When child Theme is used, file with same name will override it. Example you can override the header in Child Theme.
Not only overriding, a new file can be created in Child Theme. This can be used to introduce a new feature in the Child Theme.