By now your site should be looking a lot more customized with a color theme of your choice, custom fonts, CSS must be up and running, and your site has already started giving your brand essence. However, now you must be thinking of making some other changes to your site that cannot be described as style-related, i.e. you want to change the structure of your site. It’s hardcore, and you might be about to get your hands on the PHP files of your site.

Before We Start, You Will Need

  • FTP access to your site
  • The software that you used for the editing of the text

What We Will Be Doing

  • The default WordPress footer will be edited with some customized link or content
  • The main navigation will be moved before the header
  • Custom fields will be used to create the description of the page

I would like to take this opportunity to introduce templates in a WordPress theme and explain how they go about in a child theme. You might remember that currently, our theme does not have PHP templates. Well, you might not actually remember the templating system or you might be completely ignorant of it. To understand it more and to make some sense you could get started in the following way:

Reference:

Codex: Stepping into templates (http://codex.wordpress.org/Stepping_Into_Templates)

Codex: Templates (http://codex.wordpress.org/Templates)

Codex: Child themes and templates (http://codex.wordpress.org/Child_Themes#Template_Files)

What you will basically find in these files is that how your WordPress site will look like when it goes live will be decided by the files which are called Templates. The information that these files extract is from your WordPress MySQL database which then makes the HTML code which is then sent to the browser. WordPress has a very strong Theme system because of which under one Theme you can choose as many templates as you want.

When you will have a look at your Theme now, you will understand why there are no templates in your theme directory as of now. If you don’t, then here is why. You will see that your original theme is the ‘child theme,’ all the templates for it are part of the directory of the parent theme.

One mystery still remains unsolved though, the one of being able to access and edit these files without any damage to the parent theme. It’s not that tough actually. You only need to copy the template, the one you want to edit into the child theme directory from the parent theme directory. Anything that exists (even if copied) in the child theme directory is always given preference by WordPress as it first searches the child theme directory for templates, and only refers to the parent theme directory if the appropriate file is not found. After having that mystery solved, let’s move to the main topic, which is how to make the structural changes in your site.

Creating/Copying Flies in your Child Theme

There are actually two ways to go about it. I will share with you both the ways and then you can choose whatever works for you.

Method 1:

Go to your FTP client and drag and drop from first Remote to Local and then back to Remote.

Drag the copies of the templates that you want to edit in Filezilla, onto your computer, wherever is easier for you, e.g. desktop, and then drag it again onto your server in the Child theme directory.

Don’t worry, by following the above steps, you are not deleting anything from remote, it is just that you first make a copy on your machine and then copy that to a different location from there.

Method 2:

You can also save to the alternate locations, e.g. the child theme, by setting up a bookmark for your FTP server in the Text Wrangler. Follow the steps below:

Once in Text Wrangler, go to Setup, a new window on the side will appear

In the Bookmarks tab, click on the + sign at the bottom left to make a new bookmark

Now fill in the fields with the FTP data which will be the same as the one used to set up FileZilla.

Once that is done, now whenever you are in FileZilla and you want to copy a file, you only will have to right-click on the file which is kept on your server, and then when you will pick the edit option, it will automatically open up in the Text Wrangler.

Once in the Text Wrangler, go to the File menu and a dropdown menu will appear. Choose ‘Save a Copy to FTP/SFTP server.’ It may happen that once you click on it, the program might tell you that you need to allow a security exception because by clicking on it you are actually choosing to allow it every time you wish to save the file. However this may happen only once, and that too, in the beginning, the option is then stored in the system.

The window will then appear, you can then save the new footer.php to your child theme in order to navigate to your child theme directory.

This will then automatically move the file from the server and also save it to the new location on the server. If you don’t like files hanging around on your desktop then this, a little more comprehensive yet neater process is the way to go.

Editing the Footer to change the site info details

Usually, the first thing that I get asked most when I get to this point is how to get rid of the default 2013 footer, which is: “Proudly powered by WordPress.” This can be easily done in the footer template, footer.php. With the details provided earlier in this post, in your Text Editor open up a copy of the footer.php from the child theme’s copy.

Let's take things step-by-step. Topmost you will see a php tag, which is a computer’s way of understanding that the language to follow will be PHP, which is the language used by the server to interpret and execute the page and its commands before showing it in the browser. PHP is basically server-side scripting which is a smart way of dealing with web-based technology. You may think that there are so many languages out there and we are only talking about PHP. This is because WordPress is solely written in PHP and hence the reason for our emphasis on it.

After the opening PHP tag, you will see comments about the template you want to make changes in, its location on the site. Then comes the closing PHP tag. Some HTML tags will follow with some helpful comments. Then some PHP tags will follow and in the end, it ends with the HTML tag.

The reason for the usage of the HTML tags is that while WordPress is written only in PHP language, the browser does not understand the PHP language. What it understands is the HTML language.

You might notice that all the language used is HTML. This is because all the different template parts have been extracted from perhaps the theme or the WordPress and have been compiled to form this HTML page. Every page on your website has been compiled into a similar format.

So for example, if you are on the Home Page, then it will be extracting the home.php template, etc. Basically, the templates in the theme are extracted by the server when the browser (client) requests the server to view the site.

The whole point of this exercise and this elaboration is that now when you will go back to your text editor, you will immediately get to know where to edit. There will be one long PHP tag containing everything that you want to edit.

You might want to delete that section (the footer), for which you will have to delete everything from it, in which case it will look something like this:
<div class="site-info">to</div>
<!-- .site-info -->
In case you don’t want to delete the footer completely and you want to put in a URL for your website and put in some credit for yourself, or a copyright sign to discourage others from copying your content, kind of like: Happy Moms by The Web Rangers © 2014. Firstly, change the reference in the code from ‘twentythirteen’ to ‘mytheme’ or to whatever the name is of your theme.

Then you will see the URL for WordPress (wordpress.org), change that to the URL of your website, in order to link it back to your own page. Then change the title from the default ‘Semantic Personal Publishing Platform’ to the new title. And change the main text ‘Proudly powered by to Happy Moms.

To give it the final touch of the copyright sign, add a PHP tag after the client’s name and your website’s link. The php tag is placed here for it automatically update it to the current year.

You can now have a look at your updated footer for your site.

Moving the Primary Navigation to before the Header Image

Now to just experiment and to personalize the structure a bit more, let’s move the primary navigation which is found below the banner to above it.

You guessed it right! You now need to copy the header template (header.php) from the parent theme to the child theme and open up the child theme version of it in the editor.

Select the code in the starting – which will be: “navbar”

With the help of all the helpful comments under the codes, help you locate and identify different portions of your site in the text editor.

Now cut the code and paste it above the following line:
<header class="homelink">
It is now time to save the file and refresh the published view of the site and take pride in the changes you just made. Well, you may not like some of the changes. The navigation bar will surely be above the header image but you may notice that the header image has become a bit smaller and that the gap between the page title and the image has widened a bit. Where the header image has not shrunk or changed in the size, what is happening is that it is being hindered by the Navigation bar. Don’t worry, it can be definitely fixed. Keep going through the code.

The reason for putting the body selector before is to enhance the specificity of CSS for more appropriate results. Save the work and hit publish!

Adding a Page Description to Our Page Templates using custom fields

This being the last agenda on our post today, we are going to edit our page.php template in a way that you can add a page description field under the page title. Let’s start by setting a custom field on the services page.

For this, you may have to edit the Screen Options to make sure that the Custom Fields checkbox is selected, in order to access the Customs Field Panel. A new panel will then appear right below the page editor. Hit Enter New in order to build a new customs field and type ‘page description’ in the Names field, and type the description in the Value box.

Now back to the basics learned in this post. Copy the page template, page.php, into the child theme from the parent’s, and open up that page.php into the editor. Log in the code in the template in the level 1 heading, and before the end of the article header. Save and upload the file and hit refresh to see all the amazing changes made. This is just the beginning of the editing of the templates within a theme.

Conclusion

Editing the structure of the site is not a light job, it is tough! But with practice, you may be able to save a lot of money and hassle. The task has been made ever easy by the use of Twenty Thirteen templates and themes.