You and Lorraine Take on Coding: PART I

As Lorraine prepares to launch her new site (check out her pre-announcement post right here) we found ourselves talking about WordPress code over Skype.

Here I am explaining the code I basically live by around here, and I got to thinking…

Why not include it all here, for you guys?

Why not make a whole series out of it??

As you know I’m all about WordPress.org blogs. Maybe a little coding know-how would make you guys feel more comfortable taking the plunge too??

So if you’re curious at all, I think you’ll like this!

You’ll learn how to style text, edit links, create precise images, and float random things known as boxes, all through the Text editor you use every day.

And it’s only PART I.

Let’s code…

Note: ‘Bout midnight as I’m finishing this n’ I’m spent, but still have a crucial question for you at the end. Please don’t leave without dropping off your comments. See below.

The only 2 codes you need…ever

There are two elements of code that will be the most important if you’re starting out, or are beginning to code in your WordPress Text editor or anywhere around your blog.

And they are the span and the div.

<span>some stuff</span>
<div>some other stuff</div> 

Why are these elements so useful?

Because you can insert them inline right into your blog articles to produce instant style changes.

You can use them to create colorful text or borders or floating objects in space. You can basically rely on them for every most beginner coding edits, as long as you know how to use them.

Before we begin, I hope you’ll see that this is a good time for not only Lorraine, but YOU to take advantage of coding.

There’s already been all this talk on how to blog in 2014, but no one’s said anything about coding, and it could be that little wrench in your assembly line holding you back…

And did I mention it’s easy?

p.s. Feel free to copy paste anything you see here.

Using a span to highlight text (and more!)

Lorraine was really getting a kick out of span editing. She wanted to created the “highlighted text” effect, so that’s exactly where we began:

Example:

This text includes 5 common inline styles

Using a cool HTML highlighter plugin I found, we can see what’s going on inside the code:

<span style="
font-size: 18px; 
font-family: Roboto, Arial, sans-serif; 
font-weight: bold; 
color: #666633; 
background-color: #FFFF00;
">
This text includes 5 common inline styles
</span>

Using it: Basically, you could copy this code directly into your WordPress text editor, but you might not want all of these styles. You can hand-select too. The “background-color” style is a popular one for creating a highlighted appearance. Font-family is cool too, in this case, I’ve assigned a font family I like called “Roboto” to the text with a fallback to Arial, in case your browser doesn’t do Roboto. Questions?

As you can see, both the span and the div need to be closed off with appropriate closing tags, or they’ll start to go a bit crazy and style everything in their path.

We’ll talk about divs in a second! For now, links…

How to create a hyperlink

It was getting late, but it’s never too late to cover the basics. Sure sure, you link things in your posts all the time, but do you know what’s really going on when you set a link?

Let’s take a look at the link to the media file for Lego man at the top of the post. Each WordPress image upload gets a link just like this.

https://dearblogger.org/wp-content/uploads/2013/07/lego-treasure-300x225.jpg"

If we remove some of the link’s tail, we get just a homepage link.

https://dearblogger.org

However, this homepage link won’t do us much good in a blog post because it’s not clickable. To make the link clickable we add an a href attribute to it. Questions yet?

Every clickable link in your blog posts is wrapped in an “a href” tag, yet we rarely ever mention this.

<a href="https://dearblogger.org">Homepage link</a>

To open the link in a new window, just add this final piece.

<a href="https://dearblogger.org" target="_blank">

We could even set the link text to a color, as such:

<a style="color: magenta;" href="https://dearblogger.org" target="_blank">

Using it: This one is all about experimentation. Play around, and make sure to keep in mind those SEO friendly links, just don’t over do it with Google’s new policies these days.

Betting folks already know about links though, so we’ll move on for now.

The code behind your images

Last thing we covered on our Skype was image code, which means explaining what happens when you put an image in your WordPress blog posts.

Ya know, those little chunks of code?

Let’s take a look at Lego man with gold coins.

Just like Lego man is opening up his stash of gold, we’re going to open up his code. This is what exists behind Lego man:

<a href="https://dearblogger.org/wp-content/uploads/2013/07/lego-treasure-300x225.jpg">
<img src="https://dearblogger.org/wp-content/uploads/2013/07/lego-treasure-300x225.jpg"
alt="lego-treasure" 
width="300" height="225" 
class="aligncenter 
size-medium 
wp-image-14671" />
</a>

Using it: Of course, you can copy and paste Lego man gold coins into your blog posts if you want. But better to know what each piece of the code means, so you can edit to your heart’s content like we did. Let’s take a look. Remember, little punctuation marks like the alligator brackets and quotation marks are important!

1. Image link – Where you go when you click the image. Can remove this.
2. Image source – Pulls the right image from your media files.
3. Alternative text – Good to include for SEO purposes, as the search engines read this piece.
4. Dimensions – Pretty basic; this shows the width and height.
5. Class – We’ll edit this part in the next section!
6. Size – Full, medium, thumbnail.
7. Media counter – Lego man is my 19404th image upload. Yikes.
8. Closing image link tag – Needed for the image to link.

Positioning an image with align

Alignment is automatically applied when you insert an image into your blog posts. It’s the bread and butter of image styling, and I found a nice example of this over at Susan Cooper’s blog, where it’s all about life, food and good times. Here’s the code modification on Lego man, who sites in some meta ipsum. Note that either line 1 or line 2 work just fine, and both are not necessary.

class="alignright
align="right"

Padding vs. margin, which should you use?

You probably know at least a little about padding and margin, but do you know which one is right for a given situation? Let’s look first at padding – the space between an image and it’s border. Depending on your theme, WordPress might automatically set a few pixels of padding around your images.

Hopefully these visuals will help:

style="padding: 30px;"

Note: You can copy-paste this snippet into your image HTML chunk to get a desired result.

Margin, on the other hand, refers to the space outside of the border. Let’s take a look:

style="margin: 30px;"

Using it: Padding and margin are useful style elements, so try them out. You can even use them around a link to create an HTML button, like this one you might have seen:

(Hint: if you want to see that button code, just Right Click, then choose Inspect Element) We’ll cover buttons in the next coding guide, probably sometime in March).

Image borders

Borders give your images some more pop, making them stand out from what you’d see on another blog. But the border style element is a bit more complicated than the rest. Enough talk, let’s see an example or four!

style="border: 2px solid #7c111e;"

Lego man here has been given a solid border, with the color known as Dear Blogger red 😉 Of course, Dear Blogger red might not be best for Lego man, so let’s try something different.

style="border: 5px dashed gold;"

There we go, that looks a bit better, as the gold matches his flesh. But, the dashed border is really more for opt-in boxes and coupon designs, like you might see here. Let’s give Lego man a more. . . gothic looking border.

style="border: 9px inset gold;"

Ya know, that’s almost perfect. But, let’s get rid of the white space, which, if you remember from above, is the padding.

style="border: 9px inset gold; padding: 0px;"

Great. Lego man looks good. But, he’s a bit lonely still…so in the next section, we’ll give him some friends!

Lastly, how to setup divs

A div is a box of space, but we have to put things inside of it. An empty div will just take up white space on a page.

Long story short, divs are the foundation behind the basic structural elements of blogs, like the header, footer, main content and everything in between.

HTML5 anyone?

To understand just one application of divs let’s create three div boxes then fill each one with an image then float the images next to eachother.

Is that too much?

No way!

Basically, we want to float our images like this:

And, the code for the above floats?

<div style="width: 620px; float: left; margin-top: 20px; margin-bottom: 20px;">
<div style="width: 200px; float: left;"><img class="alignnone size-medium wp-image-14671" alt="lego-treasure" src="https://dearblogger.org/wp-content/uploads/2013/07/lego-treasure-300x225.jpg" width="150" height="113" /></div>
<div style="width: 200px; float: left;"><img class="alignnone size-full wp-image-20736" alt="hoodie-man" src="https://dearblogger.org/wp-content/uploads/2014/01/hoodie-man.jpg" width="150" height="113" /></div>
<div style="width: 200px; float: left;"><img class="alignnone size-full wp-image-20735" alt="amy-adams" src="https://dearblogger.org/wp-content/uploads/2014/01/amy-adams.jpg" width="150" height="113" /></div>
<div class="clear"></div>
</div>

Cool! We just floated three images side by side, but I’m going to add some borders to make it clear what exactly is going on.

Using it: In the above image, we can see each of the “div boxes” highlighted with a dotted border. I’ve also stretched the width of the whole rectangular box by a few pixels so everything can fit in. Now, before you go copy-pasting this into your own blog posts and galleries – which is totally fine – let’s note a few things you’ll want to include:

1. Some extra width. . . so everything fits.
2. Some margin and padding. . . so nothing overlaps.
3. The clear class at end. . . what this does is makes sure that any text within the blog post that would sneak up alongside the right of our large rectangular box “clears” (or in other words gets pushed down below the box).

That’s all for now! If you’re anything like me you probably copied one style above and are happily using it, wondering what the heck I was talking about for most of this.

But, small suggestion, you could also hit bookmark and use this later. It’s all information I stand by as I design anything from blog posts to landing pages and beyond.

Which coding edits would help you? Let us know what you’re working on

There’s all this talk about how to blog better in 2014, but no one has mentioned learning code at all.

To me, that’s kind of ridiculous.

Personally, I think small codes like this might be what make us more prolific this year than ever, from both a design perspective and a strategic perspective.

So if you want more coding lessons, tell me which ones below. Happy to edit them right into the comments, which remember, we can do using this plugin.

Maybe you’re curious how the ProBlogger badge to the right does a backflippy thing? 😉