When I’m not Indie Chickin’ my days away or spending time with my loved ones, I am working to put food on the table. You know, before we reach our first million, of course. I design custom WordPress websites built on the well-known Genesis framework, and decorate blogs with my sweet ass graphic design skills. See, I’m obsessed with all things blogging – and I’m completely self taught. I started blogging almost 2 years ago and most of my first few months were spent Googling How to’s. I’m going to be starting a WordPress Essentials series that I will be sending to my clients as well. For many, these are basics. For most, this is a foreign language.
WordPress Essentials: 5 HTML Codes
When I started blogging, I was obsessed with changing my theme. (Most of it had to do with the novelty of the whole thing, and the fact I hadn’t found my ‘blogger-identity’ yet) Anyway, I installed a theme, went to write a post and the ‘visual’ tab of my edit post was no longer working. While I could have easily switched back (and shouldn’t have stayed with a theme that caused conflicts), I decided to learn the basics.. in case I ever had to write a post using only html.
1. How to add a link
<a href=”LINK”>Text that shows</a>
or to open a new page
<a href=”LINK” target=”_blank”>Text that shows</a>
Note: Put the full link, including the http://
2. How to add an image
After uploading your image into your media files (or getting the URL off another site for the picture you’re allowed to use) copy that link:
<img src=”LINK” alt=”keyword”>
You can specify the width and/or height for the image instead of realizing you sized it a little too big, resizing and reuploading. You can also align the image on the page.
<img src=”LINK” width=”300″ height=”300″ align=”left”>
Note: You can combine the above two to make a clickable image by doing the following:
<a href=”LINK TO SITE”><img src=”LINK TO IMAGE”></a>
3. How to add headings and paragraphs
If you don’t use headings and paragraphs, your text will show up in one big block.
<h1>This is heading 1</h1>
<h2>Imagine an outline</h2>
And for paragraphs
<p>Insert your paragraph here</p>
4. How to split up your posts
There are 2 ways of splitting your post. If you have your blog set up to show your full post on the front page and want to add the ‘Read more’ after a teaser first paragraph, you use:
<!–more–>
And if you want to split your post into multiple pages (like you see in some of our longer articles) use this:
<!–nextpage–>
5. How to bold, italicize and underline
To add accent to your blog post, use the following to add each effect:
<bold> You are bolding this text</bold>
<em>You are italicizing this text</em>
<u>You are underlining this text</u>
These are literally just the basics. There’s a ton of stuff you can learn about HTML. You can check out sites like w3schools.com to learn more. If you ever want to do something on WordPress, there is almost always a plugin that exists to help you. I find that knowing the basics like the codes above will help minimize the list of plugins (which end up slowing down your website). For example.. Instead of using a plugin to insert images in a widget, just add a text box and use the code above! Bam.
Coming up: WordPress Essentials: Plugins, WordPress Essentials: Design, WordPress Essentials: Blogger-Identity and much, much more!
What are some basic html codes that you think blogging beginners absolutely MUST know?
theindiechicks
theindiechicks
