Latest posts by Donncha Hughes (see all)
- Configuring Contact Form 7 WordPress - March 13, 2017
- Instructions to set up ‘Pay with a Tweet’ in WordPress - March 6, 2017
- How to embed an individual tweet in a WordPress blog or post? - March 6, 2017
The wonderful thing about WordPress is that you don’t need to learn HTML to create a website. But sometimes a little HTML can be useful. This article will outline some very simple html hacks that I regularly use when formatting content within pages and posts – for links, email links and YouTube.
What is HTML?
Hypertext Markup Language, a standardized system for tagging text files to achieve font, colour, graphic, and hyperlink effects on World Wide Web pages.
According to Wikipedia HyperText Markup Language (HTML) is the standard markup language for creating web pages. Web browsers receive HTML documents from a webserver or from local storage and render them into multimedia web pages. HTML elements are the building blocks of HTML pages and combine to describe the structure of a web page.
This arictle will now talk about why and when you might edit the HTML created by WordPress.
#.1 Formatting Links
It is good practice within website Pages and Posts to use embedded links to other pages on your website and to external websites so that the reader can get further information if they so wish. The links will appear as blue on most websites. If you want to change the colour of an individual link you can use some html. So, links are added using the Visual Editor which is very similar to adding links in your email or in MS Word.
- Write a few lines of text. When you need to create a link, highlight between 2 and 8 words which will form the link.
- Then use the WordPress Link Wizard within the Visual Editor to add the link details. When you highlight some words on the screen, the Link functionality will activate.
To view the html click on the TEXT TAB within the Visual Editor. The specific HTML for the link looks like this:
Links are added using the <a href=”http://www.startupwebtraining.com/wordpress-terms/” target=”_blank”>Visual Editor</a>- it is very similar to adding links in your email package.
I have colour coded the html …
The html for the Link is <a href=” ” > </a> as per the yellow highlighting above, with the domain placed inside a pair of inverted commas. The Text for the embedded link is in Teal – inserted within the html for the link. The pink target=”_blank” is because we selected the box to open up the link in a new tab.
Here is the html that must be added within the TEXT TAB if you want to change the colour of the Link Text to say Pink.
Links are added using the <a href=”http://www.startupwebtraining.com/wordpress-terms/” target=”_blank”><span style=”color: #ff69b4;”>Visual Editor</span></a> it is very similar to adding links in your email package.
The additional html is colour coded as GREY in the image below.
This changes only the text colour for this Link. If you want to change the text colour of all links on your site, you can use CSS – the topic of the next post. A follow up post will also discuss Colours – how to match your link colour to a colour of your choice (to match your branding for instance).
My previous article explains how to insert Anchor Links in WordPress being links within a page or post that allow the reader to jump to other parts of the page.
#.2 Html for No Follow Links
While linking to a reliable and trusted source will help boost your search ranking, the advice is to use No Follow Attribute for paid links, comments, and anything which Google calls ‘untrusted content’. To add a No Follow Attribute you need to add the following html rel=”nofollow” to the <a> tag.
After creating a link in the normal way, click on the Text Tab and change the html so that it appears like this….
<a rel="nofollow" href="http://www.example.com">My Paid Link</a>
This Ultimate Nofollow plugin adds a simple nofollow checkbox when inserting links in posts.
#.3 Email – how to add as a Link to open Email Package
The WordPress Visual Editor can be used to embed an Email address by using the Mailto: function. In the box where a link can be inserted simply type in the email address preceded by Mailto:
Clicking on the link will open up the reader’s email package such as Outlook or Gmail. When you look at the Text the html looks like this:
<a href=”mailto:firstname.lastname@example.org”>Email Address</a>
There are several superb HTML tutorial sites. This one explains that a subject line can be added to the Email by adding some html as follows:
<a href=”mailto:email@example.com?subject=Subject You Selected”>Email address</a>
#.4 How to Center Justify a YouTube Video
These are the instructions for inserting a YouTube Video in WordPress
- Go to the video in YouTube
- Click on Share button
- Select the Embed Tab
- Under SHOW MORE you can change the video size; and other settings such as Show video title and player actions.
- Copy the iFrame code
<iframe width=”640″ height=”360″ src=”https://www.youtube.com/embed/S1eoIzBHttU?rel=0″ frameborder=”0″ allowfullscreen></iframe>This is the code for a YouTube video about Cashflow relating to a blog on my other site.
- In WordPress, within a page or post or widget, Select the TEXT TAB within the visual editor
- Paste in the iFrame Code
- When you select the Visual Editor, the YouTube video will be embedded
- A little HTML can be added to Centre Justify this video across all devices.
<div style=”text-align: center;”><iframe src=”https://www.youtube.com/embed/S1eoIzBHttU?rel=0″ width=”300″ height=”160″ frameborder=”10″ allowfullscreen=”allowfullscreen”></iframe></div>
I have colour coded the additional html to centre the YouTube video – see GREY code below which is added at start and end of the YouTube code.
More about HTML
The opening of the post clarifies that you don’t need HTML to update your website using WordPress. But if you are interested in learning HTML, there are plenty of sites with HTML tutorials. I personally like W3Schools as a great reference site.
I still find that taking your time and making sure everything is typed in correctly is the key to making HTML work
More WordPress Tips
This is article #.2 in a 7 part series of WordPress Tips or Hacks
- Page IDs in WordPress – To find Quickly using Firefox and Chrome
- Common uses of Html in WordPress – Links, Email and YouTube
- Custom CSS – site wide changes to graphics such as links, menu and footers.
- Simple Colour editing on your website
- How to add an Animated Gif
- How to embed an Individual Tweet in a Post or Page or Widget in the Sidebar
- How to use Pay with a Tweet
As always I hope you found this article of benefit. Would be delighted to receive more examples of useful HTML in the comments section or via Social Media.
@donnchadh on Twitter (shares and comments on social media appreciated)