Categories
Elegant Themes

How To Make a Divi Child Theme

You can download and install the zip file at the end of this post once you have installed the Divi parent theme.

The download contains 2 files :

  1. A functions.php file containing PHP code which loads the parent themes style sheet from Divi.
  2. A style.css file which enables you to override the parent themes styles by adding custom CSS after the style sheet header.

Functions File

The functions.php file containing this PHP code :

Once you download and install this Divi child theme, you can then add custom PHP to this functions file.

Style Sheet

The style.css file contains a style sheet header :

Once you download and install this Divi child theme, you can then add custom CSS rules after the style sheet header in this style.css file which will over-ride your Divi parent themes styles.

Download Divi Child Theme

Get Divi Parent Theme

Related Child Themes

Categories
Free Tutorials WordPress Themes

Child Theme For Twenty Twenty

This free child theme for Twenty Twenty enables you to store your custom code like CSS, PHP & jQuery so it’s easy to find and doesn’t get lost when you update the parent theme.

child theme folder files

The child theme contains :

  • A folder named assets which contains a folder for your images and a folder for custom jQuery.
  • A functions.php file for all your global custom functions.
  • A style.css file for all your custom CSS rules. Simply copy over any CSS rules from the Twenty Twenty parent theme and modify them in your child themes style.css file.

Child Theme Installation

You’ll need to install the Twenty Twenty parent theme first and then you have 2 options.

You can :

Upload the folder to your wp-content > themes folder and activate the child theme from your Appearance > Themes page

OR

Install the zipped folder from your Appearance > Themes page as seen in the following video –

Theme Installation Video

Coming Soon!

Categories
WordPress Themes

Child Theme For iThemes

iThemes already includes a setting which enables you to generate a new child theme simply by clicking a button. See the following screenshot which shows you the setting:

create-new-child-theme

This built in parent theme functionality enables you to either:

  1. Activate an existing child theme or
  2. Create a new child theme

If you’ve just installed a iThemes parent theme then you’d choose the 2nd option and Create a new child theme.

If you’ve already created a new child theme, you can select it using the 1st option.

The 1st option also allows you to select a child theme you’ve created yourself rather than using the Create a new child theme functionality. The following screenshot shows 2 child themes available for selection.

The 1st is the child theme generated when you select Create a new child theme and the 2nd is a child theme you can create manually and upload to your WordPress installations themes folder.

activate-existing-child-theme

As you can see, there’s 2 ways to use a child theme with any iThemes parent theme.

Here’s a free child theme download which you can install after uploading any iThemes parent theme.

Download Child Theme for iThemes

Note: You will need to change the Template name in the child themes style.css file to match the directory name of your parent theme.

Example:

In the child theme download, you’ll find 2 files. A functions.php file and a style.css file. The style.css file contains the following header:

/*
 Theme Name:   Child Theme
 Theme URI:    http://wpsites.net/wordpress-themes/child-theme-for-ithemes/
 Description:  Child Theme for your iThemes parent theme
 Author:       Your Name
 Author URI:   http://wpsites.net/wordpress-themes/how-to-make-your-own-child-theme-for-wordpress-beginners-guide/
 Template:     new
 Version:      1.0.0
*/

Make the sure the Template name used is exactly the same as the name of your parent theme folder ( directory ). In this case the parent theme folder is named new so swap that out with the name of your parent theme folder.

All other information in the child themes style.css file header can be changed.

Here’s more on creating child themes for use with any parent theme.

Categories
Genesis Tutorials

Child Theme for Genesis – Free Download

Most new child theme Developers simply download the free Genesis default theme rather than create their own.

Its easier to modify an existing child theme than create your own.

But what if you want to build your theme using all your own CSS?

Here’s one way to create a child theme where you can add all your own custom styles and custom functions.

Create Genesis Child Theme

1. Create a new folder and name it something like child.

2. Using a code editor, create a new file named style.css and add the following header to the top of the file inside your child folder.

/*
Theme Name: Genesis Child Theme
Theme URI: http://example.com
Description: This is a blank child theme for the Genesis Framework.   
Author: You
Author URI: http://example.com
Template: genesis  
License: GPL-2.0+  
License URI: http://www.gnu.org/licenses/gpl-2.0.html  
*/

You’ll notice there’s no styling, so you have 2 choices:

  1. Load the style sheet from your Genesis parent theme.
  2. Or add your own CSS to style everything from scratch.

Load Parent Theme Style Sheet

  1. Using a code editor, Create a new .php file in your child themes root directory.
  2. Add the following PHP code to the top of the file.

Genesis Sample theme

Add Your Own CSS

If you prefer to add your own CSS to style your child theme, you can write the CSS from scratch or use any of the CSS from any StudioPress child themes you own as they are all GPL licensed.

Download Free Child Theme

Here’s the child theme which includes the code from this post in a zip file you can simply install as a new theme.

Download Genesis Child Theme

How To Use This Genesis Child Theme

  1. You need to install the Genesis Parent Theme first.
  2. Once you have installed the Genesis parent theme, you can install this child theme.

Genesis Parent Theme

Categories
WordPress Themes

Child Theme for Twenty Fifteen

This child theme should be installed like any other theme after the Twenty Fifteen parent theme is installed.

The child theme doesn’t include any custom code and is simply a blank theme containing a style.css and functions.php file as well as a images folder.

You can use any of the 3000+ code snippets here on wpsites.net to modify the default WordPress functionality and the Twenty Fifteen parent theme from the safety of your child theme.

2015 Child

version 1.0.0
Free child theme for the Twenty Fifteen default theme.

Download

Categories
Elegant Themes

Child Theme For Elegant Themes

Simply click this button to download the free Divi child theme. The Divi child theme has been created for use with the Divi parent theme by Elegant Themes.

Download Divi Child Theme Zip

How To Use This Child Theme

  1. You need to install the Divi parent theme by Elegant Themes first.
  2. Once you have installed the Divi parent theme, you can install this child theme.

About This Child Theme

The child theme contains 2 files.

  1. A footer.php file which includes modified footer links which you can customize yourself or simply delete the file altogether.

  2. It also includes a style.css file which contains CSS to customize the styling of the footer links and change the colors of the social icons in the footer. You can modify the CSS to your own liking or remove all the CSS entirely and add your own.

Demo Divi Parent Theme

Note : The Divi child theme requires the installation of the parent theme first before it can be activated.

Categories
WordPress Themes

Free Child Theme for Twenty Thirteen (2013 Custom)

2013 Custom is a free child theme for Twenty Thirteen, the latest default theme for WordPress. Its mobile responsive and highly regarded as the best coded default theme WordPress have released.

This 2013 Custom child theme includes the following features:

  • All the features of Twenty Thirteen
  • Full width after post widget area which displays content on all single posts
  • Full width after header widget area which displays content site width
  • Full width header widget.

Download ↓

Zip file also includes 2012 child theme.

That’s it.

Nice and simple with 2 custom widget area’s coded into the child themes header.php and single.php template files.

2013childtheme

Customizing Child Theme

The child theme files which you can use to further customize this theme include:

  1. functions.php for your custom PHP code
  2. style.css file for your custom CSS code

There’s also the header.php and single.php which you may want to customize further.

 Adding A Slider

To add a slider in the header, all you need to do is install the Soliloquy plugin and create a new slide show.

Paste the shortcode for the slider into a text widget and drag it into the Header Widget.

Display Slider on Home Page Only

The easiest way to do this is to install the Widget Logic plugin and add either of these conditional tags to the plugins logic:

is_home()

is_front_page()

Displaying Images In Slider

The free version of Soliloquy enables you to create a slide show of images

Displaying Videos in Slider

If you want to display a video slide show in the header, you’ll need to install the premium version of Soliloquy

Other Slider Plugins

There’s 2 other slider plugins i suggest to check out for use in this child theme.

Slide Deck – Offers both a free & premium version

Easing Slider – Also offers both a free & premium version

Widgets

Styling is such a personal thing that i decided not to ad any for the widgets.

If you want to change the width or add any styling, you’ll need to add the CSS code in the style.css file to suit your needs.

Header

If you don’t want to use either of the header widgets, simply make sure neither is populated with any widgets.

You can them use the default header image feature with or without header text located under the Appearance tab.

If you have added a header image and also populate either of the header widgets, you’ll find they output your widget content below the header image.

Download 2013 Custom ↓

Categories
WordPress Themes

Free Twenty Twelve Child Theme 2012C

If you plan on customizing a free theme, Twenty Twelve would have to be one of the best to go with.

That’s the reason i’ve decided to spend some time and create a free child theme.

This will enable you to add your custom coding without worrying about losing it when you update the Twenty Twelve parent theme.

Like To Download 2012C

[like-to-dl theme=”blue” url=”http://wpsites.net/wp-content/uploads/2012/12/2012C.zip” like_url=”http://www.facebook.com/wpsites.net” message=”Click Like to Download 2012C Theme!”]

Download Not Working?

Click here to download 2012C from Facebook

What’s Included In 2012C

The 2012C child theme includes the following:

  • Everything in Twenty Twelve – Download here (You’ll need this installed first)
  • Content Columns
  • Colored Content Boxes
  • 3 Footer widgets
  • Header slider code (Displays after title & before navigation menu)

Content Columns

Simply add the HTML to your HTML/Text editor to display your content in columns.

Your first content column here.
Your first content column here.
Your first content column here
Your second columns content here.
Your first content column here.
Your first content column here

Colored Content Boxes

Use this code to create content boxes.

Includes 6 colors.

Content Box Code

Read Me File

You’ll find a read me file in the download which includes the code for creating the content boxes and content columns if needed.

Header Slider

The slider code for displaying the slider images is ready in the header.php file.

All you need to do to activate it is to install the plugin.

Important

If you’re not going to install the Nivo slider (Lite) plugin and use it immediately after installation of 2012C, please go to your header.php file and remove the line of code from line 38 (otherwise you may get an error message which won’t be fatal)

Footer Widgets

You’ll find 3 footer widgets have been added to 2012C.

2012C Footer Widgets

2012C Demo

2012C Child Theme Demo

So what do you think?

Categories
WordPress Themes

Twenty Eleven Child Theme for WordPress – Free Download

Twenty Eleven Child ThemesThe default theme for WordPress, Twenty Eleven is one of the most popular free themes as its already included in every new WordPress installation & update.

The only problem is Twenty Eleven will be exactly the same as everyone else is using unless you customize your parent theme by adding, editing and changing both the PHP code for custom functions and the CSS code for custom styling & decoration.

Adding, editing & changing WordPress code in your parent themes files presents another problem. When you update, all your customization will be overwritten by the new files in the update.

The solution in order to avoid losing all your custom coding when updating your Twenty Eleven parent theme is to use a child theme.

Download Free Twenty Eleven Child Theme

Note: You must install the Twenty Eleven parent theme before you install the child theme.

I have already shown you how to make a child theme for WordPress however you may also try this pre made child theme and edit, add and change the code to your own unique specifications.

After installation, you can easily customize your themes styling ( CSS code) like a pro using Firebug without having to write any code!

This post offers a free download specifically created for the Twenty Eleven default theme for WordPress.

The Twenty Eleven Child Theme is completely blank with no custom coding included so you can add all your own custom CSS & PHP code so its unique.

Installation

Firstly, upload and install Twenty Eleven. Then upload, install & activate the child theme using the built in installer in WordPress.

Install Themes ‹ WordPress Sites — WordPress

Here’s an article explaining step by step how to install & change themes for WordPress beginners.

Categories
WordPress Themes

How To Make A Child Theme

Making a basic child theme is a lot easier than you think.

But why would you need your own child theme?

If you have made any design changes using CSS code or created functions in your themes functions.php file then you may want to save this work in a separate folder.

If you don’t save your custom code modifications, they will be lost when you update your parent theme!

This separate folder is called a child theme and over rides your parent theme which could be Twenty Eleven or any other parent theme.

There’s 2 ways to create a child theme in WordPress:

  1. You can use the @import rule in your child themes style.css file
  2. Or you can use wp_enqueue_scripts in your child themes functions.php file (This is the preferred method)

Downloads – Child Theme Examples

This child theme will only work if you have the Twenty Eleven parent theme installed. If you are using another theme, you need to modify the style.css in this child theme to import your parent themes file.

This is an example of using the @import rule in a child themes style.css file

Download Twenty Eleven Child Theme

This is an example of using the wp_enqueue_scripts function in a child themes functions.php file

Download Twenty Fourteen Child Theme

Twenty Sixteen Child Theme – Free

This child works with the Twenty Sixteen child theme for WordPress which must be installed before you install this child theme.

Note: This child theme only works with WordPress 4.4 which will be released on December 4th 2015. Use the WordPress beta tester plugin if you want to use Twenty Sixteen however its not advisable to use a beta version of WordPress on a live site unless you know what you are doing.

Download Twenty Sixteen Child Theme

Create Child Theme Using wp_enqueue_scripts

There’s only 2 files you need to create inside your child themes root directory:

  1. A functions.php file
  2. And a style.css file

Here’s how to create the functions.php file which loads your child themes style.css file.

  1. Simply create a new file using a code editor like Notepad++ named functions.php
  2. Add the code from the Gist labelled functions.php below
  3. Save the file in your child themes root directory

You can then create a new file named style.css in your child themes root directory and add your custom CSS modifications to the file. This custom CSS will over ride your parent themes CSS as its loaded afterwards.

Another Way To Create Child Theme

You can also use the following PHP and CSS to create a child theme.

  1. Create a new file named functions.php and paste the PHP code into that file.
  2. Create a new file named style.css and paste the CSS in that file.

Both files should be placed in the root directory of your child theme.

Here’s the code:

Video – Create Child Theme

This video shows you how to make your own child theme using the Twenty Sixteen parent theme as an example. You can use this video as a guide to create a child theme for any parent theme.

The video uses the wp_enqueue_scripts function to load the child themes style.css file after loading the parent themes styles.

Create a Child Theme Using @import

The contents of the style.css file will include the custom CSS code you have added to make changes to your original parent themes styling. Plus a few lines which all child themes include. Here’s how to do it:

1) Login to cPanel

2) Using File Manager, navigate to wp-c0ntent/themes which is where your current parent theme is located

3) Click on New Folder and name the folder the same as your parent theme but also include – child at the end

Example: thesis-child or twentyeleven-child. I’ve named mine canvas-child

New Child Theme Directory

4) Create a new file using notepad and name it style

5) Add this information to the top of the file

/*
Theme Name: parenttheme-child
Author: Your name here
Template: parenttheme
Version: 0.1.0
 */

The 2 most important and compulsory details are:

  1. Theme Name – The name you have given your child theme i.e canvas-child or twentyeleven-child
  2. Template – Directory name of your parent theme (case sensitive) i.e canvas or twentyeleven or thesis

6) Add this line of code as well below the above detail in your child themes style.css file

@import url("../twentyeleven/style.css");

Make sure you name the blue part the same as your parent theme i.e twentyeleven or canvas or thesis (Not the name of your child-theme).

This will import your parent themes style.css file

Custom CSS Child Theme File

You can now add any custom CSS code changes you want to make into your child themes style.css file rather than use your parent themes style.css or custom.css file.

Tip: A great way to customize your site is to copy and paste CSS code from your parent themes style.css file into your new child themes style.css file and make custom changes to it there.

7) Now go to Appearance > Themes and activate your new child theme. It will only work if the parent theme is installed.

Conclusion

Whenever you update your parent theme, all your CSS changes will not be overwritten as they are in your new child theme directory which you have just created.

You could also add a screen shot 300 x 250 and simply name it screenshot. Import the screen shot into the child theme folder and it will show up in the backend of your WordPress admin panel like your parent theme’s image does.

Child Theme Screen shot

Here’s what the inside of your child theme directory will look like. Pretty simple but a great start to making your own theme.

Child Theme Contents

Related Tutorials