You and Lorraine Take on Coding: PART I

lego-treasure

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://www.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://www.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://www.dearblogger.org">Homepage link</a>

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

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

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

<a style="color: magenta;" href="https://www.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.

lego-treasure

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://www.dearblogger.org/wp-content/uploads/2013/07/lego-treasure-300x225.jpg">
<img src="https://www.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"

lego-treasure

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. lego-treasure

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;"

lego-treasure

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 ๐Ÿ˜‰ lego-treasure Of course, Dear Blogger red might not be best for Lego man, so let’s try something different.

style="border: 5px dashed gold;"

lego-treasure 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;"

lego-treasure 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;"

lego-treasure 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:

lego-treasure
hoodie-man
amy-adams

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://www.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://www.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://www.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.

lego-treasure
hoodie-man
amy-adams

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? ๐Ÿ˜‰

Share This Post

27 Responses to "You and Lorraine Take on Coding: PART I"

  1. 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. ๐Ÿ™‚

    Reply
    1. 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.

      Reply
  2. 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.

    Reply
    1. Okay, this deserve a long response ๐Ÿ™‚

      Firstly: It’s a major problem knowing WHERE to start learning code. One can lose one’s scent quickly and be off the trail to learning good things.

      Soo, putting spans and divs into a blog post is an awesome solution to start building and learning.

      Secondly: Child themes like you said are a good practice. With a div in a post you might do this:

      <div class="font-size: 10px; background-color: #green;">
      My section on coffee
      </div>
      

      Where in a child theme, you can put this:

      .coffee-section {
      font-size: 10px;
      background-color: green;
      }
      

      Then in the post you just need less:

      <div class="coffee-section">
      My section on cofffee
      </div>
      

      Now Shahzad, I feel like this is more intermedia coding stuff, but what do you think?

      Lastly: A child theme is definitely best practice as opposed to making changes in Appearance –> Editor

      As I said before, everyone SHOULD insert some of this into a post and play around. It’s a good way to make quick changes.

      p.s. Looking forward to your post, man!

      p.p.s I’m making the HTML color something more attractive… ๐Ÿ™‚

      Reply
  3. 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 ๐Ÿ˜‰

    Reply
  4. I’m convinced most people just don’t want to learn code. I eat it up – it’s sort of like learning a puzzle language to me. Today I was puzzling over glyphicons in bootstrap.

    Maybe you will find some kids who want to learn to code, and you can teach them. I know a fourteen year old who wants to learn.

    Reply
  5. 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.)

    Good job! I’ve signed up to your list so I won’t lose track of you. ๐Ÿ™‚

    Reply
    1. Thanks so much!

      Codings like anything…getting traffic, comments, links. Once you get it, it becomes fun, then you crave more.

      p.s. Welcome to the club!

      Reply
  6. 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 ๐Ÿ™‚

    Reply
    1. At least one non-total reader rejection: โœ“ ๐Ÿ™‚ Happy to be your reminder post, Diana!

      Defiant as I am, I hate being bound to how a post looks and this stuff let’s us customize big time. BIG TIME

      Reply
  7. I was lost when you mentioned links. Nothing after that made sense to me anymore.

    When you started showing the floating friends of Lego man, you should have also included the code behind the second set of boxes so I could see the difference in what’s going on in the code.

    And what the heck is an href thing? What does this mean?

    If you are trying to teach us code, you should start basic, stay basic, and then move on…

    As a teacher of high school math and English, had a hard time understanding your code geek-speak.

    Maybe you are Mr. Roboto?

    Not sure.

    Looking forward to seeing how many people agree with me in the comments!

    Maybe we should have written this as a tutorial from you to me. I’m sure many are like me and know NOT MUCH about code.

    I do like the highlighter, though.

    And what the heck is HTML5?

    I am going to hang myself now. . .

    Reply
          1. Oh, I know! And it is. ๐Ÿ˜‰

            I learned a lot when I first edited this for Greg, but then he went and added a bunch of stuff and didn’t wait for my feedback before publishing it.

            He does drive me crazy, at times, but I know he’s a good guy. And he does try so hard…

            Reply
            1. Like Shahzad said, hit the star button. I know, answering all these questions makes me a bit loopy, but you guys make it worth it.

              And I love this ๐Ÿ™‚

              By the way, how’s the theme customizing going L?

              Reply
                1. Sorry if I was a bit snippy; this stuff is beyond the scope of my brain!

                  Sigh.

                  Thanks for trying to answer my question.

                  Yep, you sure get a lot.

                  Need more coffee, maybe? ๐Ÿ˜‰

                  Not happy with new site yet; I wanted to build my own theme. . . but not smart enough for that yet. ๐Ÿ˜‰

                  Reply
                  1. 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??

                    Reply

Post Comment