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!

Entering Code on a Specific Post

As originally discussed in the my first post, there are two places you can enter code. This post will talk about some basics of entering code in each post/page. To keep it simple in this article I will say something like ‘in a post’, but you can swap the phrase with ‘in a page’ as they are interchangeable. Also a quick reminder that this article (and the whole blog) is in relation to WordPress.

 

New Post

When you open a new post you will be greeted with an area to write your post. Most themes have you opening up under the Visual Tab (tab is in the top right hand corner). The Visual Tab will basically make what you see in the writing area the same as what you will see in a published post. This is great as it gives you the visual representation of how your post will look. It is also great for the beginner who doesn’t understand writing code.

In the visual mode WordPress helps you out a lot by giving you buttons to click for what is effectively entering code. However this limits you to the codes that WordPress or your theme gives you.

 

Text Button

To enter your own code you need to click onto the Text Tab. Here you will be able to enter any code you want (as well as code that WordPress and your Theme gives you). On this tab it won’t look anything like the Visual Tab. It is all just text and sometimes some (what looks like confusing) code. Here is an example of what something looks like in the Visual Tab compared to a Text Tab (I have used an example of a link to a website).

On Visual Tab

Click here for more information

On Text Tab

<a href=”http://phenrxreview.com/” target=”_blank”>Click here for more information</a>

 

As you can see, much easier for the beginner on the Visual Tab! However after a little bit of practice you can get quite good at writing in the Text Tab. Now I’m not saying you should use the Text Tab exclusively, that would just be silly. By using the Visual Tab you can do a lot of stuff much quicker. But you are limited in exactly what you can do. To make your blog/website really pop (or do exactly what you want) you will want to improve on your ability to enter that code.

The example I gave you above can be generated by using the WordPress shortcut code under the Visual Tab. Easy stuff. But if you really want to make custom changes, you can’t rely on the shortcut code. Say you want to make it a no follow link, the only way to do it is by adding code in the Text Tab. The above link would now look like this under the Text Tab…

<a href=”http://phenrxreview.com/” rel=”nofollow” target=”_blank”>Click here for more information</a>

You can customize your link in an almost unlimited number of ways. I won’t go into all those details in this post as that will get a separate post directly related to links.

In future posts I will go further into different codes you can enter into the Text Tab to make your blog or website do exactly what you want, so stay tuned!

 

Let’s get started with some basic stuff

This site is to help out all those beginner to intermediate WordPress users.

We assume that you will know how to upload WordPress onto your website and that you will know how to upload a theme. We also assume you will know how to write posts and pages and the basic sort of things associated with using WordPress. It is pretty easy. Most host providers give you easy instructions of how to do it (and each provider is a little different, so there is no point trying to help you here).

Okay, so there basically there are two areas where you can make changes to make your site look different to the standard theme that you uploaded.

The first one is by entering code directly into the Post/Page itself when you are editing it.

The second one is by editing the code itself. This is the most difficult and most risky. You can find the areas to edit by going to the editor under the Appearance Menu item on the left side of your Dashboard Menu. Likewise you can edit code for a plugin under Editor under the Plugin Menu item on the left side of your Dashboard.

Our future posts will look into various areas of these two items. It can get pretty complicated, but that’s what we are here for!