Create child themes in WordPress with just one click

Although creating son themes for WordPress is really easy, how about creating them with a single click ?, without leaving the WordPress desktop, what do you want?

The plugin will create a son theme of your active theme, with the style sheets, which will be activated instantly so that the updates of the parent theme do not kill your modifications.

Of course, the modifications of your child theme and you have to introduce them in the new theme son.

Once you have created your child theme you can deactivate, even delete, the plugin without any problem. Your son theme will be there for what you need.

As you see, simple and fast, perfect. And there is always a plugin for anything we need.

How to load styles effectively in a child theme • WordPress Help

The mode recommended in the codex and even in the plugins plugins to create themes children is to load the style sheet of the top theme (or parent theme) using @import in the style sheet of the child theme, like this:

But this entails a series of problems .

Speed ​​

The use of CSS with @import in an external stylesheet can add additional delays while loading the web .

Media query compatibility in Internet Explorer

Media queries do not are supported by Internet Explorer 8 and earlier versions, so for media queries are compatible with Internet Explorer 8 and earlier JavaScript uses c ss3-mediaqueries-js and respond.js .

In an ideal world we would not mind not being compatible with older versions of Internet Explorer but the installed base is still too huge to be ignored.

A possible solution would be to copy the media queries of the superior theme and include them in the son theme but it would be complicated if there are changes in the average queries.

The solution

 father son in reverse

The solution happens because, instead of using @import we add a bit of PHP to the file functions.php of the son theme:

You can find topics in which the sheet of styles of the child theme load before the top theme. These topics usually carry a code of this type in its header:

And the solution would be to use this other PHP code in the file functions.php :

In any case this system is more efficient than the use of @import which is not that it does not work , but if you know a better way to do things, why not use it?

The example son theme that I posted the other day already uses this method, by the way.

NOTICE ]: This publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

Sample child theme – WordPress Help

Surely you will already know how to create a son theme also known as " child themes "And, knowing its advantages and disadvantages I'm sure that more than once you've considered creating it but, due to doubts, fear or ignorance, you have not dared. No problem, here you have an example son theme that you can use .

 child theme wordpress

In the blog we have even seen how to create them without even touching code, with a plugin, but come on, which is really easy, and here you have a example son theme to download and use as a template for your projects .

In the download you will find the following files:

  • style.css : the base style sheet of the child theme, where you can add the custom CSS classes you need
  • functions.php : the file so that everything works, with the enqueue needed, and where you can add custom functions
  • screenshot.png : a capture to identify it, simple, but it's worth it.

You do not need more to start customizing your child theme. Once you download it, and before you start using it, you should keep some tips in mind:

  1. Install and activate the child theme as you would with any other theme.
  2. Open the file style.css ] in the editor to change where it says name-folder-theme-parent by the exact name (case sensitive too) of the folder name of the parent theme. For example, if it is going to be a child theme of Divi you will have to replace name-folder-theme-parent with Divi which is what the folder is called when you install it in your WordPress.
  3. If your theme does not do enqueue automatic from the style sheet of the theme you can do enqueue manually by activating the line name-folder- theme-son of file functions.php . of the example son theme (you remove the two bars // in front of that line), that is, you pass this:

    to this other:

You see that in this example we do not use @import ] as on other occasions but we do enqueue since it is much better for the rendi of your site. Come on, that all the subjects should do enqueue as _s .

Nothing else, just use this example son theme as a base template for yours, easier impossible.

[download id=”81142″]

References and more information:

(Note: in case you have not noticed some of the links in this entry are of affiliation, so if you buy a product it costs you the same but you pay me a coffee)

NOTICE : this publication is two or more years ago. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

Create and modify child themes without touching a line of code

Create son ​​themes, known as child themes is a fantastic way to make changes to a theme WordPress without losing changes in case of updates. Now, it is a process that, despite how easy it is to create child themes a lot of people get uphill because of their irrational fear of touching code.

 child theme wordpress

For those who prefer not to mess with codes, for example, there is a great way to create and configure a child theme without touching a single line without having to connect via FTP and all those things geeks that we like so much the rest of us.

Another possible situation is when you have to make modifications to a child theme or create a new one and you do not have FTP access .

If it's your case you're saved, Child theme configurator is a jewel, the most of the most. Once installed and active it allows to create children themes (one or several, whichever you want) from any of the themes that you have installed in your WordPress .

Once created a child theme, from its configuration pages you can adjust it to your liking, being able to change styles, import rules, copy files from the parent theme to the son and all without leaving the WordPress desktop.

The best of all is that the process you do it without modifying anything of the parent theme. Once the theme is over, you can activate it like any other WordPress theme .

If you want to see the whole process, they explain it wonderfully (in English) in this video:

The son themes they have their advantages and disadvantages but they are a small wonder if you know how to use them properly.

 son ​​wordpress themes

This is not a plugin for anyone either, yes, there is terminology that you must know, but is a fantastic tool to create or modify child themes so it's not for beginners but you can save yourself from more than one compromised situation so sign up this article in favorites to have it on hand in case you need sometime.

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

How to create a child theme (theme son) of WordPress

 child theme wordpress

We have been talking for a long time about the children themes or " child themes " we even discussed something about its advantages or disadvantages but I think there was a simple and quick guide to how to create a son theme .

So let's go to it, it's easier than you think …

1. The basics

The first thing is create a folder within / wp-content / themes / as if another theme were. You can choose the name you want although it would seem logical some reference about what it is, for example:
 folder theme son wordpress

Once the folder is created simply create the style sheet it is say, a file style.css inside. If you prefer, to save typing, copy the header of the style sheet of the main theme, of the parent. In any case, the basic structure would be this:

The important lines are these:

  • Theme name: logically different from the name of the father theme, but put what you want.
  • Template: here there is no possible improvisation, it must be the name of the theme folder father. If the folder is called wordpress-style-theme that's what you should put, without any change or it will not work.
  • @import url (xxxx): Using the structure of the example, this is where you we say to the child theme where to inherit the original style sheet, so that when it is activated everything works.

The magic starts from the last line, since once we activate the son theme we can customize it to obtain the same design of the original theme (father) but with the modifications we make in the theme son which will not be affected by updates of the original theme, which is one of the main virtues of the son themes

So now with this alone we can activate the son theme, just like any other theme . Our website will not notice any change because at the moment we have not introduced any modification, all it does is import files ( Template: MyProduct ) and stylesheet ( @import url ("../ MyProduct /style.css");) of the parent theme.

 active child theme

2. Adding styles

As of this moment the active child theme inherits the CSS of the original style sheet, unless we add custom classes in which case it will take the ones of the child theme first, applying the rest of the style sheet of the parent theme, that simple

Thus, if we modify the style sheet of the son theme adding something like that …

… we will be adding custom styles to the links, and the rest of the styles will be applied to the parent theme.

3. Adding templates

The next thing we can do is customize the files in topic or even add new ones, I mean " php ", and the process is just as simple. [19659004] If, for example, we want to customize the footer, we simply copy the original footer.php file of the parent theme to the folder of our child theme and make the modifications to the child theme. Once we save the changes the result will be seen immediately for that particular template, remaining the rest of the aspect of the web unchanged.
 copy in theme wordpress son of php template

It is important to have in note here that you must follow the folder structure of the parent theme. That is, if the file blog-style.php (for example) of the parent theme is in /tema-padre/includes/blog-style.php in the subject son must follow the same structure /tema-hijo/includes/blog-style.php . For the rest, it's almost easy to scare.
 template copied to son wordpress theme

You can, as I said before, add new specific, page templates or whatever.

4. Functions

A child theme basically works like this:

  1. WordPress checks the active theme (the child theme) and loads the parent theme files ( Template: MyProduct )
  2. WordPress then loads the imported style sheet ( @import url ("../ MyProduct / style.css"); )
  3. First load changes to the style sheet of the child theme and modified files in the child theme , and completes what is missing with the style sheet and original files of the parent file, in that order.
  4. Loads the functions file ( functions.php ) of the son theme and then loads the file of original or parent functions.

The subtle difference is that WordPress prioritizes the file functions.php of the child theme over the original theme, or parent, but does not overwrite it but will only take into account modifications (added functions) of the son theme, does not overwrite – to put it some way do – the original.

That is, for practical purposes, you do not have to copy the entire file functions.php of the parent theme but only create one empty (of course with the PHP opening) and put there the specific functions that you want to add as customizations that, of course, you do not want to lose with the updates of the theme.

A very typical example would be to add a favicon . If you just add this customization the file would be something as basic as this:

And that's it, from here it's up to you to add the customizations you want to make, which will not be lost with updates to the parent theme unless it substantially changes its clear file structure, which may happen though not usual.

Source: Codex

NOTICE : this publication is from two years ago or more. If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you:

Advantages and disadvantages of WordPress "child themes" • WordPress Help

A " child theme " or daughter template, is a way to create modifications of a main theme or " parent " to adapt it to our needs without needing to modify the main theme , as I explained a long time ago of child themes .

And, although everything seems to be advantages, like everything in this world, child themes have their pluses and minuses let's see them.

It may seem that child themes have more advantages than disadvantages, but if you want my opinion it is not so and personally I prefer not to use them, it seems simpler and controlled to make the modifications directly in the subject, documenting them well, and if there are updates, simply reapply them after the same.

But of course, this is my opinion, yours already tells us.

Goocine theme for BuddyPress

Hello, this time I bring you my second contribution, another topic more for BuddyPress called . This Theme is for online movies and is very complete, it has a box with multiple choice in each film of the site and the insertion of a tooltip in jquery that gives a nice effect on the cover when passing the pointer for each of the movies .

This theme needs 5 plugins to work (do not be scared) which are practically in common use among many of the blogs in WordPress like: WP-Pagenavi. GD Star Rating and others.

I await your comments, criticisms and suggestions to improve the design of the themes. Thanks, See you soon.

Theme for Buddypress JooPad

Buddypress has quickly become one of the most used plugins by the wordpress community and as a consequence users look for topics that really attract the attention of their users, this is why I have given myself the task of creating some designs for buddypress that you can download, copy and modify with total freedom.

The theme that I bring to you today is called JooPad, a design inspired mainly by the famous apple gadgets, it is still in version 1.0 so it is very basic, but do not worry that for version 1.1 will come with a panel of options to change the design of the cover, some aspects of user profiles and spaces to add advertising in different sections of the site.

Next I leave the link so you can see the demo, download it, see the license, installation instructions and others.

Child Themes – Daughter Templates

The important line is this:

which is where you should indicate the name of the Parent Theme, for example:

What you do is tell that theme ( name of the folder) must take the necessary files to work that does not have included.

Install a Child Theme is the same as any other, you upload to ' / wp-content / themes / 'both the Parent Theme and the Child Theme, but only activate the Child Theme.

I do not know if you knew the concept of Child Themes, it's really a very interesting option that I hope has given you to think and think the suitability of even tearing down your current theme in Parent and Child, for example.

I leave you more interesting references about the Child Themes:

NOTICE : this publication is from two years ago or more . If it's a code or a plugin it might not work in the latest versions of WordPress, and if it's a news story it might be obsolete. Then do not say we have not warned you.

Loading …

That may also help you: