Create & Install WordPress Child Theme via FTP client

Create & Install WordPress Child Theme via FTP

You probably know what a WordPress child theme is but you are here because you don't know how to create and install it for your WordPress using FTP-client. 

.. don't worry if you still don't know what a WordPress child theme is because this is gonna be a tutorial for you. In this tutorial you will learn how to create and install your WordPress child theme via FTP.

Before getting into that, I will tell you what a WordPress child theme and FTP-client is because I am pretty sure there are hell lot of people who don't even know what a WordPress child theme is. No offence here!

What is a child theme?

Child theme is a theme for your site, that allows you to make changes to your site’s styles, layout and functionality without affecting the parent theme’s code. It's just like a regular parent theme but it has all the styles and functionalities of it's parent theme plus its own styles and functionalities that you can surely add and modify!  

What happens actually is when you are using premium theme of WordPress or any theme that gets updates then it all gets vanished if you have modified your style.css or functions.php files directly into your parent theme.

To overcome this major problem we are recommended to use child themes. So we create a child of parent theme and fetch style.css file using @import in our child theme's style.css file. This helps us to override the styling used in our parent theme and ultimately we activate child theme instead of our parent theme in WordPress. 


What is an FTP client?

FTP ( File Transfer Protocol ) is a network protocol used to transfer files between a client and a server over the internet or any other TCP/IP network. FTP has been designed to promote sharing of files, across all types of computers. Almost all webmasters use it to upload files to the servers of their web hosting company.

FTP client is a program that uses FTP and you can download and install into your computer to transfer files from local host ( your computer ) to web host or web server. FTP Client users can upload, download, delete, rename, move and copy files on a server. 

Popular FTP client programs are WinSCP, CyberDuck, Free FTP and FileZilla. Since I am using FileZilla so in this tutorial I will tell you how to use FileZilla FTP client to create your WordPress child theme.

Creating a WordPress child theme:

There a a lot of ways to creating a WordPress child theme but the method that I am going to show you is the most safest and easiest so let's start!
  • First of all download FileZilla into your computer and install it. You can find hundreds of tutorials on that.
  • Now login to your hosting control panel normally called cpanel and scroll to the Files section.
  • Then click on FTP accounts in the Files section like below.
 
Create & Install WordPress Child Theme via FTP client

  • Now you will need to fill in the form just like below ( make sure information is correct that you provide ) and then click on Create FTP account.


  •  Once your account is created you will see your FTP account information like this.


  •  Now let's get back to your FTP client ( FileZilla ) that you downloaded and installed into your computer. Open it and submit the following bar with you FTP account info that you created in your cpanel.


  • After connecting successfully to your web server, following window will appear. Left arrow shows files and folders from your local computer and right arrow shows files from your web host.
Create & Install WordPress Child Theme via FTP client

  • Now we will create style.css and functions.php files anywhere in our computer and upload them to our web host. For that, add following code to your empty style.css file using Notepad!
/*
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("../twentyfifteen/style.css");
  • Replace twentyfifteen with your parent theme directory name.
  • Replace Twenty Fifteen with your parent theme name
  • Save your file and close it.
  • Now add following code to your functions.php file
<?php
function my_theme_enqueue_styles() {

    $parent_style = 'parent-style'; 

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

  • replace 'parent-style' with $handle used in parent theme to register stylesheet. You can do that by looking into parent's functions.php wp_enqueue_style( ) call. For example for twentyfifteen it will be 'twentyfifteen-style'
  • save your file and close it.

Now that's a tricky part because we are going to upload these files from our local computer to our web host using FTP client (FileZilla). That is why we installed that program in our computer. So let's do it!

  • In your FTP client right window ( where web host files are ), locate ../wp-content/themes directory and then right click from your mouse on Themes and select Create Directory and enter it
  •  now enter name for your directory. We are creating a child theme for twentyfifteen so our directory name is twentyfifteen-child

  • Now in your local site window, locate the files that we created earlier. Select both of them using CTRL button and upload them by right clicking and selecting Upload option from the menu.

Installing WordPress child theme:

  • Once your files are successfully uploaded. Now login to your WordPress back end by typing yourdomain.com/wp-admin into your browser.
  • Scroll Appearance>Themes and you would find your child theme there. Just install and activate it like a normal parent theme. That simple!🙂

Now when you need to modify any of the files style.css or functions.php you will scroll to Appearance>Editor and files are ready to be modified safely and easily!

 

Over to you!

Now I'm gonna blow my own trumpet because I worked days and nights to make this tutorial for you. HAHA just kidding 😃 Criticize this tutorial as much as you can and throw your queries below and stop reading my tutorials if I don't reply because I believe I am here for all of you. If you liked this tutorial then don't forget to follow us on Facebook and Twitter.

No comments:

Powered by Blogger.