The 5 Minute Guide to HTML in WordPress
You can use WordPress without knowing any HTML if you hire a designer/coder to make all changes to your site’s appearance and widgets.
However, if you’re ever going to do a giveaway with a program like Rafflecopter, or insert a button from another site to your own, you might want to take a few moments to learn a few HTML tricks.
1. Paste HTML code within the Text Tab or Widget.
Whether you have a Rafflecopter giveaway code to put in your post, or a button code from someone else to put in a page, you’ll want to paste that HTML code when you’re in the Text Tab, not the Visual Tab. When you’re editing a post or page, just click the Text tab, find the appropriate spot, and click paste.
When you have HTML code that belongs in your footer or sidebar, you’ll want to put it in a Text Wdget.
WordPress.com allows HTML, but not Javascript. If you paste code into a WordPress.com page or widget, it will strip out any code that is not allowed, which may break your code.
2. Curly quote marks break code.
If you copied some code for an image and it doesn’t work, the first thing to check is the single and double quote marks. If they went curly or slanted on you, that’s probably what’s breaking the code. Retype them in plain text and you might be just fine.
If you want to make code available within your post or page for someone to copy, enclose it in <code> </code> so that the quote marks will be straight and not curly. (Paste the code in the visual tab, then visit the Text tab to enclose it in <code>.) Or if you will often be sharing large chunks of code, use a plugin like SyntaxHighlighter Evolved, as I do below.
3. Div tags break layouts.
If a post or page suddenly breaks your entire layout, check the Text tab. If your HTML code is littered with <div> and </div>, that might be your problem. Often a <div> tag is left unclosed, or is closed twice, effectively messing up your entire layout. If you can eliminate all the <div> tags, you may solve your problem. If you were pasting from Microsoft Word, go back and use the “Paste from Word” button.
4. Links always need an http://, but not always a www.
It might work to type google.com into your browser these days, but it won’t work in WordPress. If you’re linking to a site, always include http:// in the link. However, depending on the site, www may not be necessary.
A link code looks like: <a href="https://gretchenlouise.com/wordpress-html/">The 5 Minute Guide to HTML in WordPress</a>
5. Most HTML code must be opened and closed.
<strong>This makes bold text.</strong> <em>This makes italic text.</em> Whether you’re inserting an image <img src="http://yoursite.com/image.jpg"</img> or a link <a href="https://gretchenlouise.com">visit the website of Gretchen Louise</a> the tags are going to need to be closed with a backslash of the same tag they were opened with.
Exceptions to this rule include the horizontal rule <hr> and the line break <br> which stand alone, as well as the <!–more–> tag which I’m using here so that the rest of the post doesn’t show up on the main page of my blog.
Got more than 5 minutes?
Here are some sample sets of HTML code you can edit to use in your Text Tab or Widgets. Be sure to replace my usernames with your own!
Sample HTML Codes to Copy, Paste, & Edit:
About the Author Widget:
<center><img src="http://mysite.com/images/myauthorphoto.jpg" alt="My Name"><br> Welcome to my website! I like to blog. <a href="http://mysite.com/about/ title="About Me">Click here to read more about me</a>.</center>
Grab My Button Widget (with auto select):
<center><a href="http://kindredgrace.com/"><img src="http://kindredgrace.com/images/button.jpg" border="0" alt="Kindred Grace: conversations between sisters in Christ" title="Kindred Grace: conversations between sisters in Christ" /></a> <textarea id="code-source" rows="5" cols="30" name="code-source" readonly="readonly" onclick="this.select();"><a href="http://kindredgrace.com/"><img src="http://kindredgrace.com/images/button.jpg" border="0" alt="Kindred Grace: conversations between sisters in Christ" title="Kindred Grace: conversations between sisters in Christ" /></a></textarea></center>
Grab My Button Widget for WordPress.com:
<img src="<strong>http://kindredgrace.com/button.jpg</strong>" alt="<strong>Kindred Grace</strong>" /><div style="width: 125px; height: 125px; overflow: auto; border: 1px solid #666666;"><a href="<strong>http://kindredgrace.com</strong>" target="_blank"><img src="<strong>http://kindredgrace.com/button.jpg</strong>" alt="Kindred Grace" width="125" height="125" /></a></div>
Social Media Widgets:
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FGretLouise&width=200&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false&appId=248698758534597" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe>
<br>
<a href="https://twitter.com/GretLouise" class="twitter-follow-button" data-show-count="false">Follow @GretLouise</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>
<a data-pin-do="buttonFollow" href="http://www.pinterest.com/GretLouise/">Follow GretLouise on Pinterest</a>
<br>
<br>
<!-- Place this code where you want the badge to render. -->
<a href="//plus.google.com/101619472458166383406?prsrc=3"
rel="publisher" target="_top" style="text-decoration:none;">
<img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" style="border:0;width:32px;height:32px;"/>
</a> <style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-32 { background-image: url(//badges.instagram.com/static/images/[email protected]<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>); background-size: 60px 178px; } }</style>
<a href="http://instagram.com/gretlouise?ref=badge" class="ig-b- ig-b-32"><img src="//badges.instagram.com/static/images/ig-badge-32.png" alt="Instagram" /></a>
<br>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Flittlepinkhouse-tech' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a> <a title="Follow Gretchen Louise's Tech Tips on Bloglovin" href="http://www.bloglovin.com/blog/6872913"><img alt="Follow on Bloglovin" src="http://www.bloglovin.com/widget/bilder/en/lank.gif?id=2092590" border="0"></a></center>
Minimalist Social Media Widgets:
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FGretLouise&width=200&height=62&colorscheme=light&show_faces=false&header=false&stream=false&show_border=false&appId=248698758534597" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe>
<br>
<a href="https://twitter.com/GretLouise" class="twitter-follow-button" data-show-count="false">Follow @GretLouise</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<br>
<a data-pin-do="buttonFollow" href="http://www.pinterest.com/GretLouise/">Follow GretLouise on Pinterest</a>
<br>
<br>
<!-- Place this code where you want the badge to render. -->
<a href="//plus.google.com/101619472458166383406?prsrc=3"
rel="publisher" target="_top" style="text-decoration:none;">
<img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" style="border:0;width:32px;height:32px;"/>
</a> <style>.ig-b- { display: inline-block; }
.ig-b- img { visibility: hidden; }
.ig-b-:hover { background-position: 0 -60px; } .ig-b-:active { background-position: 0 -120px; }
.ig-b-32 { width: 32px; height: 32px; background: url(//badges.instagram.com/static/images/ig-badge-sprite-32.png) no-repeat 0 0; }
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
.ig-b-32 { background-image: url(//badges.instagram.com/static/images/[email protected]<script type="text/javascript">
/* <![CDATA[ */
(function(){try{var s,a,i,j,r,c,l,b=document.getElementsByTagName("script");l=b[b.length-1].previousSibling;a=l.getAttribute('data-cfemail');if(a){s='';r=parseInt(a.substr(0,2),16);for(j=2;a.length-j;j+=2){c=parseInt(a.substr(j,2),16)^r;s+=String.fromCharCode(c);}s=document.createTextNode(s);l.parentNode.replaceChild(s,l);}}catch(e){}})();
/* ]]> */
</script>); background-size: 60px 178px; } }</style>
<a href="http://instagram.com/gretlouise?ref=badge" class="ig-b- ig-b-32"><img src="//badges.instagram.com/static/images/ig-badge-32.png" alt="Instagram" /></a>
<br>
<a href='http://cloud.feedly.com/#subscription%2Ffeed%2Fhttp%3A%2F%2Ffeeds.feedburner.com%2Flittlepinkhouse-tech' target='blank'><img id='feedlyFollow' src='http://s3.feedly.com/img/follows/feedly-follow-rectangle-volume-small_2x.png' alt='follow us in feedly' width='66' height='20'></a> <a title="Follow Gretchen Louise's Tech Tips on Bloglovin" href="http://www.bloglovin.com/blog/6872913"><img alt="Follow on Bloglovin" src="http://www.bloglovin.com/widget/bilder/en/lank.gif?id=2092590" border="0"></a></center>
Social Media Icons (works on WordPress.com):
<center><a href="mailto:me @ mywebsite.com" title="Email Me"><img src="http://mywebsite.com/images/email.png" width="60px" height="60px" alt="Email Me"></a> <a href="http://mywebsite.com/feed/" title="Subscribe to my RSS Feed"><img src="http:///images/rss.png" width="60px" height="60px" alt="Subscribe to my RSS Feed"></a> <a href="https://www.facebook.com/mypage" title="Find Me on Facebook"><img src="http://mywebsite.com/images/facebook.png" alt="Find Me on Facebook" width="60px" height="60px" ></a> <a href="http://pinterest.com/mypins" title="Follow Me on Pinterest"><img src="http://mywebsite.com/images/pinterest.png" alt="Follow Me on Pinterest" width="60px" height="60px" ></a> <a href="http://twitter.com/mytweets" title="Follow Me on Twitter"><img src="http://mywebsite.com/images/twitter.png" alt="Follow Me on Twitter" width="60px" height="60px" ></a> <a href="http://plus.google.com/myprofile" title="Follow Me on Google+"><img src="http://mywebsite.com/images/googleplus.png" alt="Follow Me on Google+" width="60px" height="60px" ></a> <a href="http://youtube.com/myvideos" title="Follow Me on YouTube"><img src="http://mywebsite.com/images/youtube.png" alt="Follow Me on YouTube" width="60px" height="60px" ></a> <a href="http://instagram.com/myfeed" title="Follow Me on Instagram"><img src="http://mywebsite.com/images/instagram.png" alt="Follow Me on Instagram" width="60px" height="60px" ></a></center>
Official:
Check out the legalities for using each social media network’s icons, download the official icons, or easily copy your own customized code:
- Facebook: Using Facebook Brand Assets, Facebook Like Box
- Twitter: Twitter Trademark and Content Display Policy, Twitter Butons
- Pinterest: Pinterest Brand Guidelines, Pinterest Widget Builder
- Instagram: Using Instagram Brand Assets, Instagram Badges
- Tumblr: Tumblr Trademark Guidelines Tumblr Buttons
- Google +: Google+ Branding Guidelines, Google+ Badge
- YouTube: Using the YouTube Logo
- RSS Feed: Feed Icons Guidelines, Code Snippets
- Feedly: Feedly Button Factory
- Bloglovin: Bloglovin Widgets
Thank you! This code was really helpful! 🙂
I’m so glad! Thank you.