How to change Parent Themes in Child Theme CSS

Question

I am confused as to how I'm supposed to switch parent themes in my child theme css. Right now my website protovest.com is using responsive theme but I want to change it to a theme called tesseract. Here is my code:

/*
 Theme Name:   Responsive Child Proto-Vest 
 Description:  Responsive Theme Used to Style Protovest
 Author:       Eva Berrios
 Template:     responsive 
 Version:      1.0.0
*/

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

I'm confused because I was told not to change the import url and other developers say that's how it's done. Can someone explain this switching theme process to me?

And how exactly do I create a backup in case it gets messed up when switching over?

Answer 1

I think you are confused about this. Let me explain.

The @import url("../responsive/style.css"); is telling the Child theme to import the Responsive themes style.css. This is important because without this the Child theme doesn't know what its Parent theme is. So the @import url("../responsive/style.css"); points the Child theme to the default (main) file in the Responsive theme (in most all WordPress themes the default or rather main file is the style.css which includes the themes header defining what it is).

So basically without the import function in the style.css of your Child theme, the Child theme would be broken and there would be no link between the Child theme and Parent theme.

So how do you find the path to put in the import function (i.e. /responsive/style.css). You can find this by entering your FTP (FileZilla, cpanel, or whatever client you want) and going to the public_html - wp-content - themes section. Then find the theme folder of the theme that you are going to make a Child theme for. Put that folders name in the import followed by the style.css (i.e. /thethemefoldername/style.css).

Sorry if that sounds confusing. So basically you need to figure out what your themes file name is that you are switching to and the replace that with the responsive in the import function. That will point that Child theme to the new theme that you desirer. If you change that then that is all you need to do.

You can just use a Child theme plugin. I would recommend https://wordpress.org/plugins/child-theme-configurator/ or https://wordpress.org/plugins/one-click-child-theme/ . With these you can just create a new Child theme and then add your new stuff to that.

And how exactly do I create a backup in case it gets messed up when switching over?

You should always make backups of your website. There are a few ways you can do this. One is a plugin. There are tons of plugins out there like https://wordpress.org/plugins/updraftplus/ or https://wordpress.org/plugins/backwpup/ . These plugin can create scheduled backups add you can create and restore backups at any time. The only thing is that they have limited features.

You could go for VaultPress (https://vaultpress.com/) or BackupBuddy (https://ithemes.com/purchase/backupbuddy/). These are easier to use and secure although they come at a price because they are a premium plugin.

Backup in hosting dashboard. You can do this on most hosting companies. They allow you to backup your website although there are next to no settings or extra features.

I would suggest reading through some of these resources if you are still confused. https://codex.wordpress.org/Child_Themes https://codex.wordpress.org/WordPress_Backups https://codex.wordpress.org/Backing_Up_Your_Database http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/

Answer 2

There are a few steps you'll need to take, to switch parent themes.

Create a Backup of the Original Child Theme

If you have FTP access, log into [root]\wp-content\themes\ and download the child theme folder to your your computer.

Copy and rename the entire child theme folder. This will be your new child theme.

If you don't have FTP access, it's probably best to start from scratch. And then use the theme uploader, to add it to your website, once it's built.

Edit the CSS File in Your New Child Theme

At a minimum, you should change the "Theme Name", "Template" and @import lines. Here's a suggested edit:

/*
 Theme Name:   Tesseract Child Proto-Vest 
 Description:  Child Theme Used to Style Proto-Vest
 Author:       Eva Berrios
 Template:     Tesseract
 Version:      1.0.0
*/

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

Replace "PARENT_THEME_FOLDER_NAME" with the actual folder name of the Tesseract theme.

Note: the template line is case sensitive.

You may also find this answer helpful: How to create child theme with Tesseract theme?.

Advanced: Review Functions.php in Your New Child Theme

If you know how to code in PHP and how use WordPress hooks and filters, you should review any custom functions in your child theme. This isn't essential, but it will help you troubleshoot, if certain customizations don't carry over to your new theme.

If you don't know PHP, it's best to just leave that file alone. Any functions that refer to specifically to the Responsive theme will just stop working, but shouldn't break your site.

Upload Your New Child Theme and Activate

If using FTP, upload your new theme folder to [root]\wp-content\themes\.

Otherwise, you'll need to use the built in theme uploader. Here's a good tutorial.

Activate your Child Theme by going to Appearance --> Themes and choosing your new theme.