YouTube and WordPress

This post is just a short one to let you know something about how YouTube and WordPress work together.

One of the problems with WordPress is that it has limited data space. And one of the biggest space users is video. It wouldn’t take many videos to burn up all your space. Lucky for you there is an answer.

YouTube!

Basically YouTube can be your space saver. WordPress lets you link directly to the video and make it appear as if it was uploaded to your blog/website.

Step 1 is that you will need a Google account here. It’s free and easy to set up.

Step 2 is set up a YouTube account at the same site. Once again it’s free and easy to do.

Once you have setup your account you just upload your video and it’s ready to go. YouTube have a few restrictions on your videos, but nothing that isn’t easy to work around.

Okay, now that you are done that, just post the link into one of your posts or pages. WordPress automatically will put the YouTube video there for you to see. Here’s an example below (not my video) of a video of my favorite night show.

I did that by just entering “https://www.youtube.com/watch?v=LABGimhsEys”

How easy is that!

Entering Code in the Editor – Text

One of the main things people want to change on their website is their font. As we discussed in our last two posts (post 1 / post 2) you can enter code into the either the Specific Post or the Editor. This goes for changing the text as well. Hence I will break this post into two sections.

 

Text Button

 

Specific Post or Part of Post

When you are on the specific post make sure you are typing the below under the text tab.

You then type in the following code to change the…

 

1) font size

To change the font size you need to enter the following code

 <span style=”font-size: large;”>Enter text here</span>

 Now change the “large” to what you want. You can also write the size you want e.g. 12px

 

2) text color

To change the text color you need to enter the following code.

<span style=”color: #ffff00;”>The text goes here</span>

The bolded section is the color code. You change the code depending on what color you want. Here’s a great website to determine what color you want to choose.

 

3) font type

To change the font type use the following code.

<span style=”font-type: “Times New Roman”, Times, serif;”>The text you want</span>

The bolded section is the font you want to use. Here’s a great website for web safe font types.

 

Now you can get tricky and start combining the above into one code. The following code…

<span style=”color: #00ff00;”><span style=”font-size: 30px;”><a style=”color: #00ff00;” href=”http://doesvenaprowork.net/” target=”_blank”>Does Venapro Work?</a></span></span>

will get you…

Does Venapro Work?

 

Editor

 

For Entire Site

This code needs to be added to the editor (generally to the stylesheet – style.css). I add it to the bottom with a note to remind me what it is about. To add a note type in the following.

*/   add note here   /*

The */ /* tells WordPress to ignore everything in between the two forward slashes.

First you must work out what you want to change. Whether it be the body text or header or whatever. A great way to check what you want to change is using Firefox’s Web Inspector. Just hover over the text you want to change and note what type of text it is. All themes are different but they will generally be something like:

  • h1, h2, h3 etc for the different headers
  • p for the general typing in posts
  • body for the main body text
  • a for a link

Write that down for when you are going to type in the code.

Now, this is how you change the…

 

1) font size

To change the font size type the following code.

h1 {
 font-size: 40px;
}

Now change the bolded sections. Change “h1″ to the text you want to change. Now change the “40px” to the font size you want.

 

2) text color

To change the text color you need to enter the following code.

body {
 color: blue;
}

Now change the bolded sections. Change “body” to the text you want to change. Now change the “blue” to the color you want. There are 3 ways to enter the web color.

  • a HEX value – e.g. “#000000″
  • an RGB value – like “rgb(150,0,0)”
  • a color name – like “green”

Any of them will work.

 

3) font type

To change the font type type in the following.

p {
 font-family: “Times New Roman”, Times, serif;
}

Then change the bold sections. Change the “p” to what type of text you want to change. Then change the ““Times New Roman”, Times, serif” to the font you want.

There you go. I hope this post helped you.

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!