Creating WordPress Child Theme

Posted on November 23, 2013 by rupesh

Creating a child theme is easy and allows modifying the parent theme. Child preserves modifications when parent them updates. In this tutorial we will create a child theme for Twenty Thirteen. It is recommended that you create this child them in a local environment and perform testing before publishing it to production (server) environment. If you are creating a child theme on production environment, then make sure you have access to your site via FTP.

Step 1. In a WordPress powered site, all themes are located in a directory (folder) called “themes”. “themes” folder is a sub-folder of “wp-content”. Let’s say name of our child theme is “Thirteen Child”, so we need to create sub-folder in “wp–contant/themes” with folder name “thirteenchild”.

Step 2. Now in “thirteenchild” folder create a file called “style.css”. It is the only required file to create child theme.

Step 3. Open the “style.css” file in any editor. The “style.css” file must start with the following code, so copy the code and paste it in “style.css”.

/*
 Theme Name: Thirteen Child
 Theme URI: https://rupesh.me/tag/thirteenchild/
 Description: This is my first child theme based on Twenty Thirteen Theme
 Author: Rupesh Reddy
 Author URI: https://rupesh.me
 Template: twentythirteen
 Version: 1.0.0
 */

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

 /* =Theme customization starts here
 -------------------------------------------------------------- */

In the above code required lines are only Theme Name and Template. Theme Name is to identify this theme and Template is to identify the parent of this theme. @import is used to import styles from twenty thirteen theme.

Step 4. To activate this theme, login in to your site, and go to Administration Panels > Appearance > Themes. You will see “Thirteen Child” listed under Available Themes. Click “Activate” to activate your new child theme.

Congrats you created a WordPress Child Theme. At this point you won’t see any difference between “Twenty Thirteen” and “Thirteen Child” themes. But if you make any changes to Thirteen Child those will be preserved even after parent theme updates. Let’s add copyright notice, year and site title to footer of the website.

Step 5. Copy “footer.php” file from “twentythirteen” folder to “thirteenchild” folder.

Step 6. Open “footer.php” in “thirteenchild” folder in any file editor. Add following code in between <div> and <?php do_action( ‘twentythirteen_credits’ ); ?>

<!--Added by Rupesh Begin  -->
<!--Copyright Year Site Name  -->
<?php esc_attr_e('&copy;', 'twentythirteen'); ?> 
<?php _e(date('Y')); ?> 
<a href="<?php echo home_url('/') ?>" title="<?php echo esc_attr(get_bloginfo('name', 'display')); ?>"><?php bloginfo('name'); ?></a> 
<?php esc_attr_e('.&nbsp;', 'twentythirteen'); ?>
<!--Added by Rupesh End  -->

Step 7. Save the file and refresh your website, now you should have a copyright notice displaying along with site title.

Troubleshoot tip: For any reason, if you WordPress site clashes after activating the child theme, don’t worry, just delete “thirteenchild” folder using FTP. After deleting, a default theme will be automatically activated and your site will function normally.

Lesson 2:Hello World

Posted on March 18, 2011 by rupesh

At this point of time we have learned the some basic tags in HTML. Now let us try to create a HTML page with the tags we learned.
A quick remainder, Every HTML file should starts with Open ‘html’ tag and ends with close ‘html’ tag, ‘head’ and ‘Body’ tags should be defined in ‘html’; and ‘title’ tag should be defined with in ‘head’ tag.

This is the structure of Simple HTML File :
<html>
<head>
<title></title>
</head>

<body>

</body>
</html>
Let’s use this structure to develop a meaningful HTML page. Open notepad, type complete structure.Lets give a title to HTML page as “My First HTML Page”, this can be done by doing like this <title>My First HTML Page</title> What ever the text typed in between opening and ending tags of title will appear in top left of the browser like this.

Let display a message in body like this
<body>
Hello World
</body>

Now your code should be look like this
—————————————————
<html>
<head>
<title>My First HTML Page</title>
</head>

<body>
Hello World
</body>
</html>
—————————————————–
Now save as your notepad as “myFirstHtml.html” or “some_name.html” at some location.
Now go to the location where u saved, your file should look like a web page.
click it and see … it should display hello world like this

Now you have created your own HTML Web Page.

At any point of time you can edit your html file by, right-click the file & select “Edit” , it should open in Notepad for editing.

Lesson 1:Introduction

Posted on March 18, 2011 by rupesh

Introduction to HTML

HTML stands for Hyper Text Markup Language.
Most of the learners think HTML was a Programming Language. But HTML is not a Programming Language, HTML is a Markup Language. HTML is used for creating or developing web pages which can be viewed in web browsers(Firefox,Internet Explorer,Chrome & etc.). HTML files can be created by using any type of text editors (which we will discuss in later sections), but for now we will use Notepad. All HTML files should be saved as with extension “.html” or “.htm”. HTML is not case sensitive.
Basically learning HTML means learning HTML Tags. For example these are some tags: <html>,<body>,<head>,<br> and soon. Learning HTML is all about learning functionality of HTML tags and how to use them. In any HTML file we should indicate starting point and ending point for each kind of tag. For example body tag starting position should be indicated as “<body>” and ending as “</body>”.

Getting Started

To getting started with html you should learn some tags and there usage. The main tags are

HTML

HEAD

TITLE

BODY

Every HTML file should starts with Open HTML tag and ends with close HTML tag like this
<html>

</html>
This tag will tell browser that this is a HTML page. Head and Body Tags will be defined in between html tags only.
Title tag should be defined in Head tag only.
Like this
<head>
<title>

</title>
</head>
Next important tag is Body tag. Rest of all kind of tags should be defined in Body. So of the tags are ‘h’ for heading, ‘br’ for line break, ‘p’ for paragraph.
All kind of tags can be used more then once except html,head,title,body. These 4 tags can used only once.

In Next Lesson Create Your Own HTML page.