Entering Code in the Editor – Part 1

Ok, so we have discussed entering code into a Specific Post. But that’s easy, this is where it gets more fun! What if you want to change an aspect of how a site looks, or want to change something on all the posts/pages, not just one? Well to do that you have to enter code into the actual theme itself. Part 1 will be a quick intro and take a look at where you do this editing.

 

Before we get started

Okay, there is something I’m going to insist that you do before we get started. Now the choice is yours if you want to listen to me, but you would be crazy not to. You need to install a plugin that lets you make a child theme. What these basically do is keep the original code, and the code you will be editing is kept separate. This is great for two reasons

1) If you make some mistakes and can’t get the website to work (yes, changing the code can crash the site), you can just hit restore and you will be back to the original code.

2) If there is an update to the theme you don’t have to worry about it overwriting your code. It will update the original code, and your code in the child theme will stay the same.

There are a bunch of good child theme plugins. I don’t have a favorite, so just go to the Plugin page and search for “Child Theme” and install one with a high star rating.

 

Where you can find the code to edit

Each child theme plugin will act and look different. In the following description I will be editing the main code of the site (I don’t have a plugin installed). It will be similar to edit the Child Theme, but the editing will be done under the particular plugin or there will be an option to edit the Child Theme. The original code for editing can be found under Appearance>Editor on your dashboard. The screen should look like this…

 

Editor

 

Note – the templates on the right will be different depending on your theme.

As you can see in the top right hand corner you select which theme you want to edit (sometimes this is where the child theme plugin will kick in and it will say “Theme – Child” or something like that).

Once you are in the correct theme you need to select the file within that theme you want to change. The one you want to change will depend on exactly what you want done. Note that not all files are accessible though the WordPress editor. Some are only accessible through the FTP server (we will talk about this in a later post).

Okay, now you know where you need to edit I thought I would finish up with a quick example of an editing of the code. In this example I will make a change to the footer.

First we click on the footer (footer.php) on the right hand side of the screen.

This will bring you to a screen that looks very similar (note the footer.php above the code)

 

Footer editor

 

Let’s say I want to add a location for someone who wants more information for a Japanese language software at the bottom. I find the code for our current text in the footer:

 

<div class=”site-info”>
<?php do_action( ‘superhero_credits’ ); ?>
<?php printf( __( ‘Theme by Osenu’, ‘superhero’ ), ‘Superhero’, ‘<a href=”https://wordpress.com/themes/” rel=”designer”>WordPress.com</a>’ ); ?>
</div><!– .site-info –>

 

and add the following code in after it…

<style type=”text/css”>
.example1 a {font-family:Georgia,serif; font-size:large}
.example1 a:link {color:forestgreen;}
.example1 a:visited {color:seagreen;}
.example1 a:hover {text-decoration:none;color:yellowgreen;font-weight:bold;}
.example1 a:active {color:red;text-decoration: none}
</style>
<div class=”example1″><a href=”http://rosettastonejapanesereview.com/”>More Information</a> can be found here</div>

Now there is a lot going on in the code here. You can see the start of it is just basically giving the text/link colors and font types. Then the bottom line is the link itself.  Once done the footer on the site looked like this…

 

Footer

 

How easy was that? My next post will look even further into coding in this section of WordPress, so stay tuned!