Facing computer code often draws the same reaction as an offensive odor or the sight of blood from non-coders.
I used to manage a small business website, and once displayed the Text side of the page to the office manager. As tiny letters and brackets littered the laptop screen, she turned away and put her hand up. “I can’t look at that!” she gasped, as if I had just shown her a crime scene photo.
People like her make me feel like a superstar for being able to do basic HTML. (And, OK, I sometimes relish those moments.) When they think “coding” they think “complicated,” which isn’t always the case.
I started learning HTML as a necessity in my senior year of college when I became the first in-house editor of our class magazine. As the sole editor of the SEMrush blog for a year and a half, I continued my hands-on education in the world of front-end development.
The Times, They Are a Changin’
A friend’s wife graduated with a print journalism degree in 2007 (emphasis on print). I graduated in a similar discipline after completing a newly mandatory multimedia capstone in 2009.
For many communications jobs today, digital skills are no longer “nice to have” but, rather, expected.
In January 2015, an article in Fast Company listed SEO as one of three “key digital marketing skills” students need to know, but don’t learn in college. Take a look at any journalism job board, and — even if it’s not listed in the position title — I’ll bet nine out of 10 listings include the need of social media and digital marketing skills in the description. Furthermore, look up online editor positions; applicants are expected to have a working knowledge of content management systems and HTML. While degree programs play catch-up, it’s often necessary to get these skills on your own.
Here are some basic HTML skills I’ve picked up along the way that even self-professed “non-coders” can implement on their paid WordPress website, including questions I’ve often asked myself.
Note: I did not include any plugins. While plugins could be used for almost every one of these points, I’ve included code for the DIY types and those who work at companies that are plugin-wary.
5 HTML and WordPress Hacks
1. Page Jumps
Question: How do I jump ahead in a post?
There are times when you want to direct your readers to a different part of your blog post. Or, give them the option to jump ahead to content better suited for them.
For example, in one jumbo blog post, we had an infographic on AdWords spends in different industries, a breakdown of the data, and the description of an upcoming webinar based on the findings. (The latter was mentioned at the end of the post.) This is where page jumps come in. To direct attention to the webinar and its call-to-action to register for it, I included an announcement at the top that took interested readers right to it.
In order to create a page jump, you’ll need to incorporate some simple HTML code. Here is a helpful breakdown and explanation from Joe Burns at HTML Goodies:
In the jumbo blog post I referenced above, I used webinar as my codeword (it’s a good practice to choose a word to describe where the jump is going).
Then I put the codeword where I wanted it to appear in the article, right by the webinar registration:
2. Lists
Question: I’m writing a list in WordPress. I entered an image in between points, and now the numbers don’t continue in order (instead of 1, 2, image, 3; I have 1, 2, image, 1). Help! How do I fix this?
First, here are some HTML tags for you to know:
- <li> is a list tag: <li>list elements</li>
-
- is anunordered list tag (bullet point list):
- bullet point list elements
- <ol> is an ordered list tag (numbered list): <ol>ordered list elements</ol>
In my example above, this is what the HTML text looks like:
Here is an existing blog post that successfully splices text and images:
Here’s what the HTML text looks like:
As you can see in the text outlined in red, you can get around the “1-2-image-1″ problem by changing <ol> to <ol start=”1″>, <ol start=”2”>, etc., and adding </ol> at the end of each list item.
Regarding my first example, here is how I would change the text (color-coded to show you the text and corresponding visual):
3. Twitter
Question: How do I embed a tweet?
At a recent editorial meeting, my team discussed various speech recognition systems. I then saw this tweet from the satirical site, The Onion:
To embed this tweet, isolate it by clicking on the date like I did, or skip that step and go straight to the series of three dots (…).
From there, click on Embed Tweet and get the code.
Copy the code, choose the Text view in the CMS, and paste the code in the spot where you want it. Update the post and hit Preview, and you should see it.
Question: How do I make a tweet align center?
You’ve got your tweet of choice in the blog post, but it’s not centered. Let’s go back to the Text view, and take a look at the code.
In the first line of the code, add tw-align-center after twitter tweet. That’s it! For a more thorough step-by-step guide, see this article by Pamela Vaughan at HubSpot.
Question: How do I add “Tweet this!” tweets?
Entrepreneur Marie Forleo hosts different webisodes on her video channel, MarieTV. In each video, she includes business-savvy “tweetables” — Twitter-friendly commentary that’s meant to be shared among her community.
If you want to create your own tweetable, here are two methods:
- Want to get your hands dirty in code? Learn how to create your own “tweet this” from scratch. Here is the complete four-part HTML lesson from Rosie Cochran, including the code so you can easily copy and paste it in your CMS.
Here is my example (text bolded for emphasis):
Every online editor can — and should — learn enough HTML to be dangerous Tweet this!
- Want something a little more beginner-friendly? Try ClickToTweet. This free service allows you to write a message, generate a link, and share and then track the link.
4. Infographic
Question: How do I get an infographic to display in a large size in a post?
WordPress can shrink infographics when you add them to a post. Three things you can try with these images:
- Sometimes, just taking the width and height out and swapping it with width: “100%” can work.
- In another HubSpot article, Pamela Vaughan shares how to create an embed code using a free tool from Siege Media. I’ve had success using this method. When sharing an infographic, I tweak the generated code a bit to something like this:
I include a smaller version of the infographic on the blog, and direct visitors to view the full-size image hosted on the URL in “Click here.” Here is a snippet of what it looks like on the blog:
Don’t forget to include attribution and the code for others to embed the infographic on their site!
- Convert the image to a PDF. A reliable method is to convert the .jpg or .png file to a PDF (PDF Converter is a free service), and upload it to your gallery like normal.
5. YouTube
Question: How do I start a video at a specific time?
You can use YouTube’s own “start at” feature under Share, or YouTube Time.
Question: How do I start and stop a video at a specific time?
This tool from Tech Tips for All enables you to start and stop a YouTube video, and provides you with an embed code. You need to convert the time to seconds, so pull out your calculator and set up the value.
During the 2008 playoffs, former Phillies shortstop Jimmy Rollins said, “Nothing comes easy in Philly.” Five years later, I wrote about the anniversary of the Phillies World Series Championship, and wanted to include the video of U.S. President Barack Obama quoting him:
Using this trick, I was able to isolate the exact quote I wanted.
Conclusion
A major reason why I wanted to write this article was because of other online editors.
After talking and working with a few, I discovered a common theme was avoidance. As in, “This looks too complicated” or, “I just don’t have the time to figure this out.” So, some avoided adding a video or didn’t include images in their lists.
And, hey, I once fell into that category too. (Confession: I used to take a screenshot of a tweet and link to it, as opposed to embedding it.) I hope this article helps you solve some common HTML and WordPress issues we non-traditional-coders face regularly.
Any tricks, tips or tools you recommend? Let me know in the comments!
Image Credits
Featured Image: Kirill__M via Shutterstock
Image #1: Picjumbo
Images #2-3: Screenshots from HTML Goodies 3/23/2015
Images #4-7, 10: created by the author
Images #8-9, 16-18: SEMrush blog
Images #11-14: Screenshots from Twitter 3/23/2015
Image #15: ClickToTweet
