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.

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!

Image link – Where you go when you click the image. Can remove this.

Image source – Pulls the right image from your media files.

Alternative text – Good to include for SEO purposes, as the search engines read this piece.

Dimensions – Pretty basic; this shows the width and height.

Class – We’ll edit this part in the next section!

Size – Full, medium, thumbnail.

Media counter – Lego man is my 19404th image upload. Yikes.

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"

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the graphic elements of a document or visual presentation. By replacing the distraction of meaningful content with filler text of scrambled Latin it allows viewers to focus on graphical elements such as font, typography, and layout. The lorem ipsum text is typically a mangled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed that make it nonsensical, improper Latin.

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.

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the graphic elements of a document or visual presentation. By replacing the distraction of meaningful content with filler text of scrambled Latin it allows viewers to focus on graphical elements such as font, typography, and layout. The lorem ipsum text is typically a mangled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed that make it nonsensical, improper Latin.

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

style="margin: 30px;"

In publishing and graphic design, lorem ipsum is a placeholder text commonly used to demonstrate the graphic elements of a document or visual presentation. By replacing the distraction of meaningful content with filler text of scrambled Latin it allows viewers to focus on graphical elements such as font, typography, and layout. The lorem ipsum text is typically a mangled section of De finibus bonorum et malorum, a 1st-century BC Latin text by Cicero, with words altered, added, and removed that make it nonsensical, improper Latin.

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.

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:

Some extra width. . . so everything fits.

Some margin and padding. . . so nothing overlaps.

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? 😉

Canadian born and raised, I'm a writer, editor, and teacher. I am also a bit of a perfectionist! I love reading, writing, and helping others.I'm currently involved in several different projects and am working towards my new life goals. I'm also blogging and engaging with many people on social media!

WOW, That was kinda cool. I actually think I could use some of the coding techniques you mentioned. The truth is I am completely unknowledgeable of all of this. So the best way to strike fear in my heart is to ask me to do stuff like this. That’s why I have someone to manage my website for me. But who knows, this may get to think more about it in the future. 🙂

Susan said I’m cool – day officially made 🙂 Looking back, have you edited ANY code Susan? If yes wasn’t that exhilarating? If no, try the spans because they give you a lot of control over your text more so than a h2 or something. Just FYI I’m expecting to see some evidence of coding over there at Finding Our Way Now soon and will be checking back.

I’ve been working with many awesome designers but to be honest I am not good at designing. But I do know the basics and the most necessary tweaks that every blogger must know.

Greg published a superb intro article here. After learning this, one should learn about making a child theme. And, all those divs and classes should be used inside the child theme NOT on a parent theme so that your customization would not get affected even after updating the theme.

Am I right, Greg? In fact, I am also planning to publish a post about how to effectively use inspect elements on browser.

For someone with a vague inkling of coding, I think you’ve done a great job laying out how to get the job done. The learning curve is what turns most people off, and I’m one of them. I did have to get familiar with the span thing when my prior theme would randomly make some sentences in a paragraph a larger font than others. I always liked the “Coding is Poetry” line that appears on WordPress. It’s true too. Most people when they write poems will try free verse and it will probably rhyme. It takes a brave soul to dive into a harder form like sestinas and villanelles. Coding is for the true poet is what I guess I’m trying to say 😉

Hi Greg, saw your link to this post over in the LinkedIn groups so dropped by to see how you manage to teach a bit of coding to non-techies.

Gotta say, I like your voice — quite comforting when dealing with such a scary subject! I’m not a coder, per se, but know my way around (and write my own posts in the text editor). I’m always happy to see another tech who can explain tech stuff to non-techies. (Don’t worry, I’ll send some folks who want to know this stuff over here to your series.)

Oh, oh, when you announced the series with your previous post (i just read it) – i was a bit skeptic, i admit. Coding is not something i care about. I know just enough to know my way around in my wordpress blog.

But your series is promising. All of these i know – where as “i know” means – i have done it before and if i need to do it again, i know where to find the reminder how to do it again LOL. But now i am bookmarking this post and i will never ever have to search for reminders again – thank you Greg and Lorraine 🙂

No probz. Do you have a “custom css” box in there? Saved me when moved Blogger to WP then bought my first them and needed immediate customization for the honest college blog. Yep got me another coffee…to help me with the YouTube screencasts I’m making here. Suggestions??

About DearBlogger

DearBlogger is a free WordPress resource and community geared towards providing you free and fast advice to build a better blog. DearBlogger was founded in September 2012 in Manhattan by Greg Narayan. Our mission on this site is to provide clearer answers than what's out there currently, and make blogging, advertising, online marketing, web design, eCommerce, and any kind of website creation mainly using WordPress easier for beginners.