How to Transfer Customizations to the New Version of Theme in WordPress

We recently added automatic update feature to all of our themes, it was announced on 6th April ’14 at this post. You might be interested in updating to the latest version but you are afraid to do so, because you have purchased it before the 6th April and you have customized the code in the theme. You don’t want to loose that customization and that’s what stopping you from updating? Please stop worrying because this tutorial will help you understand how to transfer the customization from an old version to the latest version of the theme and making your theme future proof.

Here is how to transfer the customizations to new version which has automatic update feature built in. If you did customizations in your old version and want to update but don’t want to loose the customization then this is the video for you. We also have written tutorial below the video.

Note: Automatic update feature was added before the 5th April 2014. People who purchased or installed after 5th April 2014 has the ‘Update feature’ integrated. This tutorial is for people who purchased before that date and have done the customisations to the theme but don’t want to loose them.

How does the old customized version look like?

Customization in WordPress theme-1

and how does the demo version looks like?

Food Blog WordPress Theme

What was changed?

  1. Navigation menu was moved from the header to the below the logo header area.
  2. Ad banner was added on the right side of the logo

Let’s get started with the customizations.

Download the theme from members area and install it to your site

Installation process is explained at http://magazine3.com/help/tutorials/1157

Activate the new version of your theme

WordPress Appearance Theme Details 2

Activate the new version of the theme. Do not activate the Codebase file. Activate the theme with the name and the screenshot with right version number.

Now you will have theme looking just like demo. Let’s start applying the customisations

Open the FTP software

Open your preferred FTP software, i prefer FTP because it is simple to use and gets the job done.

Navigate to the /wp-content/themes/ folder

Filezilla Mac Wp theme folder 3

Enter your Server Hostname, Username and the Password and then navigate to the blogdirectory (where the blog is installed)/wp-content/themes

 

Get the header.php file from Codebase folder

WordPress Theme files in Filezilla 4

The customizations made for this tutorial were in header.php file. So we will go to the Codebase folder because that’s where all the core files are. Then copy the header.php file and download it to our folder in computer. We are using TastyFood theme for this tutorial. So the codebase folder name will be ‘tastyfood-codebase’ and ‘tastyfood’ would be the folder that will remain the activated as a theme. Upload the Header.php that we downloaded in tastyfood theme. You may notice that this folder has only two files, ‘Screenshot.png’ & ‘style.css’. It is perfectly normal and it was supposed to be like that. Now upload the header.php quickly and move to next step.

Create Two folders, old & new.

Creating Folders in Mac 5

Create two folder in the your pc. Name the one folder as ‘New version’ and second as ‘Old version’. You remember the header.php that we just downloaded, move that file to new version folder. So we don’t get confused between files since they will have same file names.

Copy the header.php to the old version’s folder

Using FTP, navigate to the folder where we have the customized older version and download its header.php to the ‘Old version’ folder.

Navigate to the QuickDiff.com

Open your browser (i prefer Google Chrome) and navigate to the Quickdiff.com – What this nifty tool does is, it shows you the differences between two pieces of text or code. If the text was removed then it highlights the background of that text to ‘Red’ color and if the text or code was added to the file then it highlights the background to the ‘Green’ color.

Copy both files code to the feilds

Copying code in Sublime Text Mac 6

Open the ‘New version’ folder and then open the header.php file, copy (CTRL+A) the whole code and paste it to the left column in Quickdiff.com. Then open the ‘Old version’ folder and navigate to header.php of it, copy all the code and paste on the right side of the column in quickdiff.com. After that, click on the ‘Compare’ button.

file difference tool WordPress 7

You will see the output code below the ‘Compare’ button. The code that has been removed will be highlighted in ‘Red color’ and the code that has been added will be highlighted in ‘Green color’. So we will do the same thing in the header.php file of ‘New version’.

Let the customization transfer begin

This whole procedure has been explained in this video from 4:32 to 10:28.

Your customizations are now future proof

After this transfer of customization, you don’t have to worry about if they will get overwritten in the next update or not because they won’t. Your customizations will be secured in this folder. Only codebase folder gets updated and we don’t customize that folder. We customize the other folder which is also called as a ‘Child Theme’ in WordPress.

– If you have any questions, feel free to ask in below comments

If you enjoyed this article, get email updates (it's free).

Leave a Reply

Your email address will not be published. Required fields are marked *