Close
Close

A New Theme, Part 2: When Your New Theme Crashes Your Blog

This guest post is by Ayelet Weisz of All Colores.

Yesterday, we talked about preparing your blog for a theme upgrade. You read it, worked through all the steps, and now you’re ready to go.

So you get up on Saturday morning and sit down to work, a breeze coming through the window. You turn on some music as you browse through potential new themes for your blog. You find one and click Install.

Excited that you’ve found the perfect match for your blog, you click Activate.

Then you see this message:

Fatal error: Call to undefined function wp_get_theme() in /home/colores/public_html/allcolores.com/wp-content/themes/path/library/functions/utility.php on line 119

You think to yourself, “Fatal error?! I better refresh the page!”

Then you discover that fatal means fatal. Not only do visitors have no ability to access your blog—you have no ability to access your dashboard!

Not even if you left an additional tab of it open. Moving backward in your browser might work, yet any other function you attempt takes you right back to the fatal error message. Is your blog lost for good?

Why would a site crash on theme installation?

Like houses, some themes are built better than others. Files in the theme might have been tempered with or coded incorrectly, or the theme might require a more updated WordPress version than you’re using.

As you browse through themes online and explore their demo sites, there is no way for you to guess which theme would cause your blog to crash. In fact, the tech support agent in the hosting company I use said there’s some chance that the same theme that crashed one site would work fine on another one.

Either way, unless you’re the one who created the theme, it’s likely not your fault that this happened.

The best times to crash your site

Let’s face it—there is never a good time to crash your site.

However, if it must happen, the least harmful times are:

1. When your largest audience is asleep

If you can experiment with your blog when it is night time or very early in the morning in the time zone of your largest audience, that would be best. This way, the majority of your visitors won’t be bothered by bizarre, constant changes to your blog, and the quality of their stay won’t be ruined. Moreover, these visitors might never know something had ever gone wrong with your theme upgrade.

2. When your second-largest audience is enjoying a weekend

A weekend in one country might not fall at the same time as a weekend in another country. Weekend days in the United States, for example, are Saturday and Sunday. In Israel, on the other hand, the weekend starts on Friday evening and ends on Saturday evening. Folks get up early and go to work on Sundays.

If you plan to do any kind of work on your site and you can’t work on everyone’s night time—or anyone’s night time, for that matter—make sure you do your blog changes on a weekend. Some people, though not all, spend less time on their computer on weekends. Instead, they hang out with other people who have the day or two off … leaving you to take care of your blog.

Now that you’ve picked a good time to flip the switch, let’s see what you can do to minimize downtime that arises if your installation goes wrong.

If it all goes wrong

If your site crashes after you installed or activated a theme, there are a few things you can do.

Option #1. Put on the tech hat

Since the theme caused your website to crash, you need to erase the theme from your dashboard.

However, if you’ve lost access to your dashboard, you need to log in to your control panel on the hosting company’s website and erase it there.

Following that, reactivate WordPress’s basic theme—the one that showed up when you first installed WordPress. It’s either Twenty Ten or Twenty Eleven.

You data is usually safe in this case—the fatal error turns out not to be so fatal after all. Once you switch back to the basic theme, you’ll be able to log in both to your blog and your dashboard. Switch back to the theme you had earlier, before you tried changing it, and everything will be back to normal.

This process will undoubtedly require you to delve into technical tasks. If you are not tech-oriented and fear you might cause a truly fatal error, check out option #2.

Option #2. Contact your hosting company’s tech support team

The challenge you’re facing was caused due to a WordPress theme. Therefore, it might make sense to contact the theme’s creator or WordPress.org. It might—but contact your hosting company’s tech support anyway.

It took only ten minutes for my theme issue to be resolved once I started an online chat with a representative from my web host.

Note that you might need to provide your billing email address and password for security verification purposes. Then, the agent will do what was specified in the previous section—she or he will remove the malfunctioning theme from your system and reactivate the basic WordPress theme that came with your blog when you first launched it.

Make sure to ask the person assisting you to stay on the line while you verify that returning to your previously-regular theme causes no issues, and then go off on your merry way.

Fatal doesn’t always mean fatal

The most important part of this process is, of course, to breathe. Remember that there are plenty of sources to get information and support. Blogs like ProBlogger, WordPress message boards, Facebook and LinkedIn groups for bloggers, good ol’ Google and your hosting company are just a few examples.

Mishaps happen. Hopefully, a little quick research and asking for help will help you resolve them in no time—and you might even gain new knowledge and tools along the way.

And once the issue at hand is resolved, don’t forget to do a happy dance.

Has a theme ever crashed your blog? What did you do to fix the problem? Share your tips with us in the comments.

Ayelet Weisz is an enthusiastic freelance writer, blogger and screenwriter. She celebrates the everyday and extraordinaire joys of life on her travel blog, All Colores. Get her free report, 48 Must-Live Israeli Experiences, and connect with her on Twitter.

A New Theme, Part 1: 11 Ways to Prepare for Your Blog Theme Upgrade

This guest post is by Ayelet Weisz of All Colores.

You’ve been reading all about the importance of a good blog design while struggling with your basic WordPress theme.

You’ve been frustrated with the limitations of this basic theme, yet you don’t have enough tech knowledge to create a new theme—or the budget to hire someone to create your dream design for you.

You drool over other blogs’ themes, and you search online for alternatives. Are you even ready for a change?

You are?

Well, maybe it’s time to tackle a theme upgrade! Today and tomorrow, I’ll share some tips from my own experience doing this to help you avoid the pitfalls—and the panic when something goes wrong.

First up, it’s important to get prepared. Once you find a premium theme you love at an affordable price, follow these guidelines before upgrading your blog’s design.

1. Verify the theme you’re purchasing is blog-friendly

Not every spectacular premium theme you fall in love with will be a good fit for your blog. Some themes are created specifically with online stores or static websites in mind. While those can sometimes be adjusted to blog format, the end result could be very different than the vision for which you pulled out your credit card or PayPal account.

Check to make sure that the theme is blog-friendly, perhaps by looking at implementations of it on other blogs before you buy.

2. Make sure it has a full refund policy

Some premium theme purchases can be canceled within 30 days (or more), and their makers offer a full refund—no questions asked.

If you’ve never upgraded your blog to a premium theme before, or even if you have, it’s a great idea to make sure you can change your mind later on. The fact that the purchase is almost risk-free might just give you the courage to finally take this step.

3. Read the terms and conditions

Some companies offer premium themes that you pay for once and keep for a lifetime. Some let you use that same theme on as many websites as you like.

Others offer premiums themes that you pay for once and can only use on one website, or you pay for once a year and can use on one or limitless number of websites. Some offer multiple themes for the same price as a single theme in a different company.

These are some of the considerations you’ll face when you’re upgrading a to a premium blog theme. Read what the deal includes and what it doesn’t, and life will be easier after you type in your credit card information and make the purchase.

4. Know what you want in advance—or at least have an idea

Build a list of features you love on other blogs’ designs. Brainstorm colors. Read blog design tutorials.

All this will help you choose your premium design, and make tweaking the theme after installation faster and easier.

5. Know when to switch themes

Traffic to many blogs decreases on weekends, holidays, and at night. If you’re willing to work when others are asleep or vacationing, you can make sure as small a number of readers as possible will be annoyed from the constant changes that take place while you’re working on improving your blog’s design.

If you need to take a long break and you’re not done tweaking, sometimes it’s best to save your changes and temporarily switch back to your previous theme. You’re upgrading your blog to a premium theme so that readers’ experience will be improved—make sure not to bug them on the way to that improvement.

6. Make time

Blog themes, especially premium ones, are made to suit different types of blogs and bloggers. They offer all kinds of options, and it will take you time to tweak the theme you choose so that it looks exactly as you want it to. It might also take time to adjust to the interface or respond to any surprises that might come up. You may even want to make changes you never imagined before.

Make sure you set aside time for this process in your calendar, and make sure you allow a bit more time than you think you need.

7. Take tech support into consideration

Before making your purchase, realize that you may need to use the blog theme company’s tech support team. Learn in advance how you can access this team and when, as well whether tech support is included in the price you pay for the theme.

Will the team be available 24/7, or does it only work during office hours? Is its time zone completely different than yours? Will you have to skip sleep to talk to them? Will the call be expensive? Does the company offer tech support via chat, email, or message boards? How fast can you expect a reply in these forms? If the tech support is given on a message board, can you stay anonymous if you want to, and still get help?

Make sure you know what you can expect in the way of support before you start switching themes.

8. Be willing to play with code—or get help

Some tech support teams prefer to guide you through the process; others take your information, log in and make the changes themselves. At times, it will be a combination of both, with a tech representative taking over only when guiding you through the process isn’t helping.

This, of course, can be an opportunity. Usually, tech representatives won’t ask you to do something too complex, and you’ll have good reason to acknowledge yourself for overcoming your fear of technology.

If you are not willing to play with code, or if you want to make sure there’ll be someone who’ll take over and help you out if you get in tech trouble, find out the company’s policies in advance by sending it an email or calling their customer service department.

9. Be willing to ask questions

The only way to get answers and to eliminate some of the unknowns is to ask questions. Don’t worry about looking silly or as if you have no clue. Tech support representatives get hundreds of strange and silly questions a day, and it’s very unlikely they’ll remember yours as the strangest or silliest one of all.

Remember, this isn’t about what they think, anyway. It’s about you giving your blog the best you’ve got—and expanding your comfort zone at the same time.

10. Get a recommendation

If you can find blogs that use your desired premium theme, email their owners and ask about their experiences with that theme. Some will give you the pros and cons of their experience, others will simply reassure you that the theme creation company exists and maybe even fulfills its promises of service or refunds.

If you don’t know anyone who’s purchased a premium theme where you want to buy one, look up reviews online or find Facebook groups dedicated to blogging, either in your niche or in general. Surely someone there will be able to share her or his experience with you, or refer you to someone who can.

11. Know that things will go wrong

Tweaking your blog’s new theme will take longer than you expect, or will take more work than you expect. You might find yourself dealing with tech challenges, or with a frustrated reader or two. The end result might not be as you pleased. Mostly, you might miss your writing and want to get this tech stuff done with already.

Take a deep breath and remind yourself why you started this part of your journey. Remind yourself of the benefits. Let go of perfectionism. Embrace your time in the uncomfortable zone. You’ll have a better blog once you’re finished.

Do you have additional suggestions for surviving a blog theme upgrade? Let us know in the comments, and don’t forget to check back tomorrow, when we’ll look at what you can do if something goes wrong with your theme upgrade.

Ayelet Weisz is an enthusiastic freelance writer, blogger and screenwriter. She celebrates the everyday and extraordinaire joys of life on her travel blog, All Colores. Get her free report, 48 Must-Live Israeli Experiences, and connect with her on Twitter.

10 Essential WordPress Security Plugins For 2013

This guest post is by of The WordPress Security Checklist.

Now that we have left 2012 behind, we can start planning 2013. And there is no better time to review the security plugins you use on your WordPress site.

Last year important new security plugins were released, and some of the existing plugins were updated.

The great challenge when it comes to WordPress Security Plugins is to find the magic combination which gives you optimal cover without conflicts or overlapping functionality.

Here we bring you the winning combination for a prosperous (and safe) 2013.

Let the party begin!

Make sure only invited guests pop in

When you throw a big party, you’d best think about who you let in. Otherwise the party might get out of hand.

These clever little plugins are your broad-shouldered bouncers. And they mean business!

WP Login Security 2

This is a personal favorite of mine. It’s very clever.

If an unknown guest arrives at your party your bouncer will ask for ID, but you can walk straight in.

Similarly, the plugin will send a verification email to the registered email address of the user if he tries to log in from an unknown IP address. Only if he validates the IP address by clicking on a link in the email will he be allowed in.

This is a very effective way of stopping brute force attacks. Even if someone does guess your userid and password, they still can’t get in.

If, on the other hand, you log in from a known IP address, you are let in straight away.

Resources:

Semisecure Login Reimagined

At your party, the bouncer will make sure no one eavesdrops when you whisper the secret password in his ear.

Ideally you would want to send your login information over SSL when you access your WordPress administration panel. However, there is a cost involved in obtaining a SSL certificate and if you are on a shared server you would also need a dedicated IP address.

This plugin is the next best thing for those of us who’d rather spend our money on party hats.

It will automatically encrypt your login information so it is much more difficult for an outsider to steal your credentials.

Resources:

Login Security Solution

This is the mother of all bouncers. He will only accept photo ID, he can check the expiry date and you can tell him that library cards are no longer accepted. He can even throw out people who fall asleep on the premises.

Or, in technical terms: with this plugin, password strength is enforced, password aging is an option, and password resets for all users can be forced. And you can even log out idle sessions automatically.

Another clever feature of this plugin: instead of locking out IP addresses of brute force attackers it will slow down the response times gradually. This means that you can get your own password wrong without being locked out, and it will still make brute force attacks almost impossible.

Resources:

WordPress Firewall 2

This is the wall around your house that makes sure no one sneaks in through your backdoor or a window, bypassing your bouncers. It’s very important.

Windows Firewall 2 inspects all incoming traffic to identify if anyone sends you malicious requests or tries to inject data into your database.

Resources:

Block Bad Queries

This plugin is like the barbed wire or the broken glass on top of the wall. Yes, the internet is really a bad neighborhood!

BBQ extends your firewall and helps filter incoming traffic to stop known bad guys.

Resources:

Keeping tabs on what goes on in your house

Once your party is going you want to keep an eye on what is happening. If someone breaks your TV you’d like to know who’s responsible and how much damage was caused.

These plugins are your eyes and your ears. And they are awake!

WordPress File Monitor Plus

This is like having surveillance cameras in every room of your house and taping all the action. If anything goes down you can see exactly what happened.

WordPress File Monitor Plus tracks changes to your file system. If any files are added, removed, or changed you will be notified by email. Neat. Could be an invaluable help in cleaning up after you have had visitors!

Resources:

WP Security Scan

Although you love opening up your house for the big party, there are still some rooms you do want to keep away from your guests. Locking a few doors will make sure the cats can only play where you want them to.

WP Security Scan checks your file and folder permissions and a few other things to make sure everything that should be locked down is locked down.

Resources:

Curing the hangover

Depending on the success of your party you might end up with a bit of a hangover the day after. But we’ve got the cure for you.

Update Notifications

This good old trick could save you from getting a hangover in the first place: take a couple of headache tablets before you go to bed.

By using Update Notifications you’re stopping the headaches before they begin. Keep your WordPress site updated at all times and you won’t see the bulk part of the threats circulating the net. This plugin automatically sends you an email when there is an update for your plugins, themes, or core WordPress files.

Resources:

Wordfence

If you are not feeling well, knowing why can make the difference between recovering quickly or suffering for a long time. If you know you are dehydrated you can drink some water. If you know you have got an infection, penicillin might be the remedy you need.

Wordfence is one of the newer security plugins. However it has matured very quickly. One of the great features of Wordfence is that it will compare the plugin, theme, and WordPress core files on your installation with the official version in the WordPress repository. If there are any discrepancies, the plugin will send you an email.

It will also scan your site for known malware, phishing, backdoors, and virus infections.

Resources:

Sucuri WordPress Security Plugin

If you are really out of luck, you might pick up some kind of disease at your party. This is the risk of mingling with many people. In this case, you might have to go to the doctor.

Sucuri is more than just a security plugin. In fact, their WordPress plugin is probably one of their least-known products.

Sucuri is a company that specializes in cleaning up infected websites. If your luck is out and your site is infected, they will clean it for less than it would cost you in coffee if you wanted to figure it out on your own—provided you know what you are doing. And they will keep your site clean for a year after that.

The WordPress plugin adds a web application firewall and malware file scanning. The web application firewall will communicate with Sucuri servers, so if one site is under attack from certain IP addresses they can be blocked across the network immediately.

Resources:

Enjoy 2013!

With a little bit of preparation, you will be able to throw fantastic parties in 2013, and you and your guests can amuse themselves without worrying about accidents or bad guys ruining everything.

Make sure your WordPress site is in good shape and ready to bring you a very prosperous 2013!

Check out ’s free WordPress Security Checklist, which is all about protecting your WordPress assets properly and sleeping well at night.

WordPress Feature Review: New Features You Missed in 2012, Part 2

This guest post is by Michael Scott of WPHub.com.

Yesterday, we started our tour of new features added to WordPress in version 3.4.

Today we continue the tour with a look at helpful new features available in version 3.5.

New features added to WordPress 3.5

Released late last year, WordPress 3.5 was the second and final major WordPress release of 2012.

This was the first release to include the new default design Twenty Twelve. It comes with a cool new feature that lets you install plugins you marked as a favorite on WordPress.org directly from your dashboard. However, many bloggers were surprised that the link manager has been removed from the default version of WordPress (though most agree removing this was a good decision).

Let’s take a look at the features.

New feature: Install favorite plugins

Now you can install your favorite plugins directly from your WordPress dashboard.

If you are logged in at WordPress.org, you will see a new option to favorite a plugin. You simply need to click on the link in order to add a plugin to your favorites.

favorite-plugin-1

As you can see, a new link for favorites has been added to the WordPress plugin area.

favorite-plugin-2

After you enter your WordPress.org username, you will see a list of all the plugins you have added as favorites. You can then install your chosen plugin easily.

favorite-plugin-3

Most WordPress users tend to use the same plugins on each of their WordPress websites. In the past, most people would bookmark their favorite plugins or keep a list of useful plugins so that they didn’t forget them. Saving important plugins at WordPress.org will allow you to quickly install frequently used plugins on every website you own very easily.

The way this new feature is set up, you don’t have to log in to your WordPress.org account on your blog, you only need to enter your username. This means you can see which plugins have been marked as favorites by any user on WordPress. You can share your favorites list with friends simply by telling them your username.

Also, if you know the WordPress username a website owner uses, you could enter their username into the plugin area to get a sneaky look into their favorite plugins (though there is no guarantee they are using a certain plugin on any given website).

New feature: Link manager removed

The Link Manager is no longer part of the core WordPress install.

The WordPress link manager, more commonly known as the Blogroll, was once one of the most popular features with bloggers and was used to display links on millions of blog sidebars. Thankfully, WordPress isn’t too sentimental—they know that the link manager is now only used by a small percentage of users.

The removal of the link manager follows the policy to remove non-essential items from the WordPress core to make the default version of WordPress quicker and leave additional functionality to plugins and themes.

links-new

Those who upgrade to WordPress 3.5 will no longer see the link manager in the WordPress menu if you haven’t used it before.

links-old

If you used your blogroll before you upgrade, the links manager will not be removed. It’s only removed on installations where no links were added (i.e. only the default links to WordPress-related websites were in your database). The link manager is available via an official plugin for anyone who wants to add the functionality back to their WordPress website.

New feature: New default design Twenty Twelve

The default design for WordPress has been released with this new version.

Twenty Twelve was originally planned to be part of WordPress 3.4 but was delayed. It was later released in the official WordPress theme directory in between the release of 3.4 and 3.5.

WordPress 3.5 is the first official release that includes this new theme (Twenty Ten and Twenty Eleven are included, too).

Some WordPress users have voiced their disappointment in Twenty Twelve’s minimal design, however most WordPress designers have been pleased with the evolutionary steps in this new official theme. The theme was clearly made with child themes in mind, and with the inclusion of child themes being introduced six months before, I imagine we are going to see a lot of varied designs being created from this base.

twenty-twelve-screenshot

As before, the design can be modified using the theme customizer. Small differences are apparent—no header image is set by default, and no sidebar is shown if no sidebar widgets are present. In addition to the sidebar widget, the static home page also comes with two widget areas (each takes up 50% of the screen width). This makes creating a corporate-style home page very straightforward.

twenty-twelve-widgets

Like Twenty Eleven, Twenty Twelve supports post formats. Each of the additional post formats have a different design to distinguish them from other formats.

post-formats

You’ll find that there isn’t much difference in styling between some post formats. There’s a content template for each one, so these designs can easily be changed with just a few small edits.

asides

Twenty Twelve has a responsive design, so it looks the same on any browser and any device. It has beautiful typography too which makes reading a joy. If you know a little coding, you should be able to design some interesting websites using Twenty Twelve.

New feature: New Welcome screen

WordPress have improved the Welcome screen in 3.5.

Previously, the Welcome screen had an introduction and three columns of links.

welcome-screen-old

The new Welcome screen looks much cleaner. The introductory description is gone, as is the description for each section. There are fewer links to choose from, and the link fonts have increased in size too. It’s much easier to use because of these changes.

welcome-screen

New feature: New color picker

Slight improvements have been made to the color picker.

The color picker for the built-in theme customizer has had a small visual improvement. Previously WordPress used the popular color wheel.

color-picker-old

The new color picker looks much more modern. Common colors are displayed at the bottom and there is a new Default button which lets you return to the default color for the property instantly.

color-picker

New feature: Media interface improved

The WordPress media interface has been vastly improved.

The media interface has had a much-needed overhaul. The old Upload/Insert text above your TinyMCE WYSIWYG editor has been replaced with a more prominent Add media button.

media-interface-1

Clicking on the Add media button will bring up the new media interface. The old interface used to appear in an overlay that covered approximately 40% of the page (centered). The new overlay covers around 95% of the page. The same three options are available as before: Upload Files, Media Library and Embed from URL.

The media library not only looks better, it works better too. All items are shown in the center panel, with details of any selected item being shown on the right panel. Previously, items were shown vertically using a list and you had to click a Show link in order to see more details.

You can show all items, items uploaded to the post you are modifying, images, audio, and video. You can enter search terms to filter results, too.

media-interface-2

Multiple items can now be selected at once. Not only can you modify details of uploaded items more quickly, you can now insert multiple images, audio files, and videos directly into posts. This saves you a huge amount of time. The days of bloggers inserting dozens of images into blog posts one by one are over.

media-interface-3

If you select more than one item, you will have the option of inserting them into a post together. You will also see an option to Create a new gallery. In the past, media items were always grouped together with the post or page they were uploaded from. This new system means you can group items together at any time and insert them anywhere you want.

media-interface-4

The new media interface is arguably the most important new feature for WordPress bloggers. Images, videos, and audio are so important to us. The new interface really speeds up the process of inserting these assets into your blog posts.

New feature: XML-RPC enabled by default

XML-RPC is now enabled by default.

XML-RPC needs to be enabled in WordPress so that external applications can connect to WordPress. Historically, this setting has always been disabled by default.

ios-wordpress

When XML-RPC is enabled, WordPress can be used through a host of different mobile applications and you can use third-party blog editors such as Windows Live Writer, BlogDesk and Post2Blog.

New feature: Dashboard now supports all-HiDPI

The WordPress dashboard now supports retina display,

Those who have shiny new high-resolution retina display devices will be pleased to know that the WordPress dashboard is fully compatible with HiDPI.

Other features added to WordPress 3.4

Below is a list of some of the other features that were added to WordPress 3.5:

  • improved support for keyboard navigation and screen reading
  • search for comments of a particular status
  • external libraries for scripts such as TinyMCE, SimplePie, jQuery 1.8.2 and jQuery UI have all been updated. Backbone and Underscore have also been added.

A full list of features added to WordPress in version 3.5 can be found in the WordPress codex.

WordPress for the future

Each year the WordPress platform evolves and 2012 was no different. Features such as the theme customizer, live preview, and favorite plugins install option have made using WordPress easier for both beginners and veterans.

Whilst WordPress has moved beyond its humble blogging roots somewhat, it is still the best blogging platform available. The Link Manager has been downgraded, however new features such as inserting multiple media items, Twitter embeds and continued support for micro blogging post formats such as asides, quotes, and links, have ensured that WordPress remains number one in the blogging world.

WordPress have ensured they are keeping up with user habits, too. The Admin interface supports retina display, the new default design is responsive and they continue to improve their mobile applications. In short, WordPress is a mobile-friendly platform.

I hope you have enjoyed this review of the new features introduced to WordPress in 2012. Let us know what your favorite new feature is and why!

Michael Scott has been working with WordPress themes and websites in varying capacities since 2007. It was mainly as a project manager where he quickly developed a love for their simplicity and scalability. As a strong advocate of all things WordPress, he enjoys any opportunity to promote its use across the Interweb and on WPHub.com.

WordPress Feature Review: New Features You Missed in 2012, Part 1

This guest post is by Michael Scott of WPHub.com.

One of the great things about WordPress is that it never stands still. The platform is constantly evolving beyond its blogging roots, with more great features being added every year.

WordPress used to release small updates frequently, but at the end of 2009 they changed this policy. They now aim to release three major updates every year, with small infrequent updates in between to address security issues.

The three major releases in 2011 were 3.1 (February 2011) and 3.2 (July 2011) and 3.3 (December 2011).

Today I’d like to walk you through the new features which were introduced in 2012, in WordPress 3.4 and 3.5.

I’ll be focusing on the features that are most relevant to bloggers and explaining how they can help you.

New features in WordPress 3.4

Released in June, WordPress 3.4 was a solid release that is best remembered for introducing the new theme customizer.

It also included a lot of other great new features such as Twitter embedding, HTML in captions, and flexible header images.

New feature: Live preview

Live preview enables you to preview themes before they are activated on your blog.

Browsing and installing themes and plugins directly from the WordPress admin area is one of WordPress’s greatest strengths. It’s amazing that you can modify your blog so much without even leaving your blog’s Admin area.

In the past, clicking on the Preview link for a theme would load up an overlay which displayed the theme over the current page.

live-preview-old

But the process of browsing WordPress designs changed in WordPress 3.4. In the past, the design was listed with Install and Preview links, and a full description.

Descriptions are now hidden by default, though you can view the description of a theme by clicking on the new Description link. This may seem like a small change, but it made browsing for designs within the Admin area much more user friendly.

live-preview-1

Themes are now previewed on their own dedicated Preview page. The page shows the theme on the right-hand side. On the left side, the theme name, thumbnail, rating and description are shown. To save you from having to click the Back button, themes can now be installed via this new Preview area.

live-preview-2

Once a theme has been installed on your WordPress blog, the Preview option becomes much more useful as it loads up the new theme customizer and lets you see how this design will look on your live website. This enables you to preview the theme using your menus, posts, pages and more.

live-preview-3

Being able to see how themes will look with your existing content has greatly improved the process of installing WordPress designs via your Admin area, and changed the way bloggers choose their themes.

New feature: Theme customizer

This feature allows you to configure your theme via a user-friendly Options area.

The WordPress customizer allows users to configure many different areas of their design, such as the header, background and navigation via a dedicated Options area. Older WordPress themes do not support the customizer but can be modified appropriately with a few simple edits to the theme functions.php file.

The Customize link can be found via the Themes link in the Appearance menu of your WordPress Admin area. Clicking on the link will take you directly to the theme customizer Options area.

theme-customizer-1

The options available to you in the customizer will depend on the theme itself. The default WordPress themes only had five or six different options, however over the last six months we have seen WordPress designers incorporate other options in their designs. Common options include site title and tagline, colors, background image, navigation menus, and whether posts or a static page were displayed on your home page.

theme-customizer-2

One of the reasons the theme customizer was so well received within the WordPress community was because changes can be seen in real time. Whenever you change your site name or adjust some colors, these are reflected in the theme preview. The changes are, however, only applied to your website after you have clicked the Save & Publish button.

theme-customizer-3

The theme customizer has made it possible for beginners to modify how their website looks without editing any templates. It’s very straightforward to use and since the release of WordPress 3.4, many designers have made sure their themes are compatible with it.

New feature: Twitter embedding

Now you can embed Twitter statuses directly into your blog posts and pages by simply entering the Twitter status URL.

Twitter is one of the most powerful tools available to bloggers. In addition to self promotion and networking, many bloggers use Twitter as a source of inspiration for their articles. The new Twitter embedding feature makes quoting Twitter statues simple and removes the need for taking screenshots or installing plugins to display a quote.

For example, simply enter this within your blog post:

https://twitter.com/problogger/status/271764815607898112

The corresponding Twitter status will be displayed:

twitter-embeds

The beauty of this new feature is its simplicity. There are no shortcodes to remember or buttons to click: you simply enter the URL of the Twitter status to embed it.

New feature: HTML in captions

This feature lets you add HTML directly to your image captions.

Captions have always been a great way of describing photographs and images to your readers. Being able to add HTML to captions has improved this considerably as you can now include links to photo credits, relevant articles, and websites directly inside the caption.

html-captions

Those who are using old WordPress themes may find that the new way WordPress adds captions has broken older image captions on your website. Upgrading to a new theme is recommended, though you could fix these issues manually by searching for posts with captions through your WordPress post area and updating the code.

New feature: Improved features for international users

Improved support is now offered for international WordPress users so that many locale-specific configurations can be modified from the core WordPress files.

As a native English speaker, localization is not something I ever have to deal with, so it’s easy to forget that around 44% of all websites are written in a language other than English.

WordPress 3.4 focused heavily on making WordPress more international. Some of the most important new features introduced for non-English users include:

  • Localizing commas: Many Asian and Middle Eastern languages do not use the comma (,). This causes a lot of problems for those users, as WordPress uses the comma as a delimiter for tags, quick edits and bulk edits. From 3.4, the comma can be translated to another character for languages where a comma isn’t used.
  • Translatable spellchecker language: The TinyMCE WYSIWYG editor can now be translated into any language.
  • Specify default time zone: Previously, the default timezone for all WordPress installations was set to GMT. This can now be modified so that the timezone does not have to be adjusted during the installation process.
  • Feed language: The language of your feed can now be set using the bloginfo_rss template tag.
  • Specifying start of week: You can now easily define the day the week starts.

If you don’t blog in English, many of these new features should make it easier for you to use WordPress in your native language.

New feature: Flexible header images

Header images are now responsive.

Custom headers were added to WordPress way back in 2007 (version 2.1). Previously WordPress allowed you to set the width and height of a header image, but all header images which were uploaded had to be cropped to fit these dimensions.

Now all images will resize dynamically to match the width of your header.

With so many people viewing blogs on mobile devices, flexible headers have made it easier for designs to accommodate any resolution. Check out Creating a responsive header in WordPress 3.4 at WebmasterDepot for a complete walkthrough of this new feature.

New feature: Login shortcodes

WordPress now offers more user-friendly login URLs.

WordPress users can log in using www.yoursite.com/wp-login.php and access the Admin area via www.yoursite.com/wp-admin/. Since version 3.4, you can log in using the more user-friendly URL www.yoursite.com/login. The Admin area can also be viewed by entering www.yoursite.com/admin or www.yoursite.com/dashboard.

There’s no denying that this is a small addition to WordPress, but I always welcome small things like this that make daily tasks such as logging in quicker and easier.

New feature: Comment via the post editor

Comments can now be added via the Post and Page editor pages.

For years the Post editing page has shown all the comments that were left on a post or page. In addition to viewing comments, there is now an option to leave a comment directly on a post from the post editor area. This saves you from having to load up the article in order to leave a comment.

add-comment-post-screen

New feature: Improved touch support

WordPress now offers vastly improved touch support in the user interface.

WordPress aimed to improve site usability on tablet devices such as the Apple iPad and Kindle Fire. Specifically, they added support for drag-and-drop functionality. This allows you to more easily customize the mobile user interface simply by moving things around.

New feature: Child themes added to the theme repository

The official WordPress themes directory now accepts child themes of WordPress themes that are already listed within the directory.

Child themes will be accepted within the theme directory if they can demonstrate sufficient difference from the parent theme to warrant inclusion.

I was particularly pleased with this feature, as it allows designers to take existing designs and modify them for different users. For example, designers will now be able to take a magazine-based theme and make it more blog-orientated, or remove features from designs that are too bloated.

child-themes

The theme installer supports child themes too. The great thing about this is that WordPress will automatically install a child theme’s parent theme if it isn’t already installed.

New feature: Scroll to top of Admin bar

Now, we can scroll to the top of the page by simply clicking the Admin bar.

This simple feature was missed by a lot of bloggers but it’s something that I’ve found myself using every day. Since WordPress 3.4, you can scroll to the top of the page by clicking in the empty area in the Admin bar. Simple but effective!

scroll-to-top

Other features added to WordPress 3.4

Since we’re short on space, here are some of the other great features that were added to WordPress 3.4:

  • The dashboard is now ready for high-resolution displays such as Apple’s retina display.
  • Multi-site improvements were made, such as auto-complete for adding new users and an increase in the default upload limit from 10mb to 100mb.
  • The Recent Comments widget had some small improvements.
  • Custom post types can now use the Distraction-free Editing mode (also known as Zen mode).
  • XML-RPC was improved to let WordPress interact with other applications more easily.

A full list of features added to WordPress in version 3.4 can be found in the WordPress codex.

That’s it for WordPress 3.4! Which of these features are you using, and which are your favorites? Let us know in the comments … and don’t miss Part 2 in this series, where I explain the handy new features available in WordPress 3.5.

Michael Scott has been working with WordPress themes and websites in varying capacities since 2007. It was mainly as a project manager where he quickly developed a love for their simplicity and scalability. As a strong advocate of all things WordPress, he enjoys any opportunity to promote its use across the Interweb and on WPHub.com .

How to Choose the Right WordPress Contractor for Your Blog

This guest post is by John Bonello of WPProHelp.com.

After reading the articles on how to work with designers and technical contractors here on Problogger.net, I felt the need to share my experience with you on how to choose a WordPress contractor.

Choosing a third-party WordPress contractor is probably the most important task of all for a WordPress blogger, yet it’s not often discussed.

I worked as a system and web server engineer for international companies for over 12 years and recently, I started my own business. In that time, I have seen projects fail or take much longer than expected to be finished. Even worse, I have seen projects which have cost more than double the allocated budget.

All these failures can be attributed to one simple mistake: the project manager didn’t choose the right contractor for the job.

How can a blogger find a good WordPress contractor?

Finding the right WordPress contractor is not always easy. It might take some time until you find a person that really fits your needs. Major problems typically encountered by bloggers when hiring a contractor are price, availability, lack of communication, and worst of all, lack of knowledge.

I am going to share with you some necessary tools to help you find the right WordPress contractor to get your job done. Be careful, though: these are not golden rules. Unfortunately, although a contractor may satisfy all of these criteria, that does not necessarily mean that he or she is definitely the right one for you. That said, these points can serve as good indicators that the contractor is worth considering.

Basic skills

You can determine if a WordPress contractor is knowledgeable or not by checking out his or her website. Typically, WordPress contractors like sharing their experiences online via their own blog—after all, it’s their marketing tool.

If the contractor frequently publishes WordPress-related content, and has a WordPress blog, then most probably he or she is quite experienced in the field.

Previous jobs

A WordPress contractor’s testimonials can speak for themselves. You should always check out the contractor’s website for testimonials. If you are in doubt, ask the contractor to share a customer’s contact details with you so you can approach the customer with any questions you might have. If you found the contractor via an online hiring platform, check the history of his or her previous jobs ratings. Previous job ratings can give a better indication than testimonials.

If a WordPress contractor is new on the block, most probably they won’t have many testimonials, won’t have a rich job history, and won’t have a lot of followers on their social media channels. This does not mean that you should immediately give up on the contractor. Keep in mind that start-ups tend to be really hungry for work and more flexible than already established contractors.

Listen to other bloggers

Since you’re blogger, most probably you know other bloggers who hired a WordPress contractor before you.

Get in touch with them, and ask them who they’ve been working with, and if they are happy with their contractor. Feedback from experiences of fellow bloggers can prove to be invaluable.

Attention to detail

We tend to believe that no one gives enough attention to detail unless the project is their own. I tend to disagree with this impression—there are some great WordPress contractors out there.

You can assess the WordPress contractor’s attention to detail by simply visiting his or her website. If parts of the contractor’s website aren’t working, and it includes broken links, definitely that is not a good sign.

A contractor’s website is their shop window. It is what prospective customers see first. So if a contractor’s shop looks run down, then most probably his products and services really are.

Communication

Everything boils down to communication. If the communication level is not right, I can guarantee you that the job will not succeed.

The first time you engage with your WordPress contractor will be via email or phone. While discussing your needs, make sure that the contractor can understand you properly. Throughout my career, I met a lot of brilliant minds that unfortunately are not able to communicate well. A good working relationship isn’t just about the technicalities.

Hiring the WordPress contractor

Now that we’ve covered the basics of how to start looking for a good WordPress contractor, let’s talk discuss some tips on what to look out for when hiring a WordPress contractor.

Stick to a single company

Designers are good at designing websites. WordPress developers are good at writing code. WordPress technical contractors are good at troubleshooting and fixing broken websites, and building new solutions using existing code, such as WordPress plugins.

Each is a different job, and they shouldn’t be mixed together.

The good thing, though, is that typically a designer knows a technical WordPress contractor and a developer, and vice versa. There are also WordPress companies which offer all WordPress services under one name.

So if you already have a WordPress contact, be it a designer, a developer, or technical contractor, and you need something which the contractor cannot provide, ask your contact if he or she knows someone in that particular field before rushing to hire another third party.

There are several advantages in hiring people that know each other rather than having three different contractors from different sources.

  • It costs less. If you hire a group of WordPress contractors that know each other, or hire all services through the same company you might and should be able to discuss a package price, rather than paying for each individual job. Individual jobs tend to be costly.
  • It is more efficient. If all of the WordPress contractors you hire know each other, or work for the same company, they are used to working together. This means that the project is more likely to be finished in a timely manner and work right out of the box.
  • You’ll have a single point of contact. Dealing with a group of contractors and coordinating all the work between them can be a nightmare. You are better off spending your time more efficiently, such as writing content, rather than coordinating a project. So if you hire all your WordPress services using the same contact, you’ll only have to worry about conveying your needs to that one person.

It isn’t a one-time project. Build a relationship

Although you may think that finally you’ve got the ultimate website design with all the functionality you may need, rest assured that after a couple of years, if not months, you are going to need to change something on your website or blog. Be it a small design change, new functionality, or a complete website revamp, you will need to get in touch with your WordPress contractors from time to time.

When shopping around for WordPress contractors, make sure you are comfortable working with that contractor as this isn’t the last time you will speak to them. Make sure they can always understand your needs and can listen attentively.

Contractors do not like to take over someone else’s leftovers and try to fix them. For most technical people it is much easier to build something from scratch rather than fix someone else’s code. Even the best software developers in the world admit that reading another developer’s code is very difficult and time consuming.

Switching from one WordPress contractor to another is costly, it guarantees you an endless amount of emails and phone calls, and ultimately it will take you ages to finish the task.

Try to keep customizations minimal

I have encountered many developers who prefer to build their own custom solution rather than use an already existing plugin or function. Custom solutions will always cost more and in the long run this might be a problem. If something goes wrong and you need an urgent fix, you’ll have to use the same developer.

In such scenarios, it is highly likely that you will be overcharged, since you are at the developer’s mercy. This does not mean that all developers take advantage of such a situation, but I suggest you don’t put yourself in such a situation in the first place. I receive many emails asking me to fix something because the developer who has done it is no longer available, or is overcharging.

If you need specific functionality implemented on your WordPress website or blog, you should always ask your contractor and check for yourself if it can be achieved using existing WordPress plugins. As I’ve already explained, no one likes fixing someone else’s mess, so always push for readily available solutions where possible.

Ready, set, go!

Even though you’ve probably heard of many bad experiences when hiring WordPress contractors, there will always be WordPress contractors who are capable and loyal.

If you already have a WordPress contractor that you’re comfortable working with, it is good to ask them about anything you need. Chances are that even if they cannot provide you the service themselves, they will have some contacts who can.

If you do not have a WordPress contractor and are looking for one, shop around and ask as many questions as you have. Good contractors will answer all of your questions, help you, and be ready to go the extra mile to get the job done for you—even if they cannot do it themselves.

Do you have a contractor who helps with WordPress maintenance and updates? How did you find them? We’d love to hear about them in the comments.

This is a guest post by John Bonello, owner of WPProHelp.com, a WordPress security and technical firm based in Europe. WPProHelp.com also frequently publishes WordPress Tutorials for Beginners on the company’s blog.

Blogging On the Go: Are Mobile Apps Up To It?

This guest post is by Barry Cooke of QDOS.

With the rise of mobile technology and citizen journalism, being able to blog while on the move is increasingly important.

Unfortunately, many blogging apps are limited, clunky, and make updating from your mobile smartphone or tablet inefficient.

Here we take a look at the main direct blogging apps, as well as a few additional ones that can improve the process, to see if they’re up to the challenge.

Blogging software

Blogger

The interface and functionality of this app is very stripped down. Your main and most important features are still intact—you can upload photos and videos into your post, but they have to be saved on to your device prior to posting, which means you can’t upload from YouTube, Vimeo, or any other video hosting site.

blogger1blogger

Typing into this app is cramped but bearable, similar to sending a text or an email from your phone. If you’re using a tablet, then there’s obviously a lot more room for manoeuvre.

So, if your aim is just a simple, predominantly text-based post possibly involving a picture or linked video, then Blogger’s mobile app is perfectly adequate, however it’s not capable of posts that are much more complicated than that.

WordPress

One of the most proficient mobile blogging apps is available from one of the most proficient blogging platforms available.

The WordPress app is detailed, with a multitude of features including the accessible dashboard user interface, which gives you one-tap access to every blogging feature you need, from posting and creating new pages, to comments and checking statistics.

The quick action bar makes it easy to switch between which of your blogs you want to update, refresh the content, or return to the dashboard. Posting is a joy, with the formatting toolbar allowing you to perfect your text, post links, and embed photos and video. With the latter two, you can also change alignments and alter their sizes quickly and easily.

Tumblr

This micro-blogging site lends itself well to remote blogging on smaller handheld devices such as smartphones and tablets by its very nature. It’s fast and simple to post to, with a clean, minimal mobile interface, making it potentially the most attractive out of the major three blog platofrms.

The recently updated user interface makes it easy to check the other blogs you follow, update your own, and manage multiple posts on a range of blogs. The new and improved navigation bar is more intuitive than the 1.0 version, so bloggers can do more than just post from the dashboard—we can now reply to messages, switch between posts and imbed photos, videos and links with just a few taps.

Other helpful apps

There are also some fantastic third-party apps available that integrate with all the above platforms, as well as photo and video editing software. So if you’re often including rich media in your posts, these are essential additions.

Blogsy

This is, by far, one of the most capable blogging applications on the market. It integrates excellently with other third-party apps like YouTube, Vimeo, Flickr, and Picasa, meaning embedding photos and videos into your post is as easy as drag and drop.

It also supports Blogger, WordPress and Tumblr, so if you’ve got several blogs on different platforms, you can use Blogsy to update all of them, and switch between each with just a few taps of your touchscreen.

The integrated browser means linking out is also a seamless affair. The unfortunate thing is it’s only available on the iPad, so those with smartphones won’t be able to take advantage of its myriad features for blogging on the go.

However, if you’re frequently uploading videos, photos and other sticky media to your blog, then investing in an iPad should be considered as it makes the whole process and far enjoyable and rewarding experience. And at just £2.99, Blogsy is well worth the pennies.

Snapseed

Of the numerous photo editing apps available, Snapseed is the most capable and most user-friendly, with an accessible interface that’s easily navigable even for first timers.

It offers good colour control, allowing you to alter the hue and saturation of your photographs, as well as the standard cropping, image enhancement, and scaling options you would expect.

There are a variety of filters you can apply, with very similar aesthetic choices to Instagram, including vintage and black-and-white effects. It’s also possible to integrate it with Instagram, Facebook, Twitter, and Flickr so sharing your perfected photos is easy. Priced at £2.99, it won’t break the bank.

Pinnacle Studio

For video editing, this app is your best bet. Its clean navigation and easy drag-and-drop interaction makes splicing your video clips uncomplicated and a lot of fun. There are options to add text and titles to your finished videos if you want to give a little contextual explanation. And uploading it to YouTube can be done with a couple of taps.

Unfortunately the controls are quite small, so this application isn’t compatible with smartphones and even if it was, it would be impossible to use. If you’ve got an iPad then the interface isn’t so bad, but many bloggers recommend getting a touch pen or stylus if you do a lot of video editing on the move as it makes the process considerably easier.

Your picks

Which mobile blogging application you choose will largely depend on the nature of your blogging, how advanced your posts are, and which media you will be uploading.

What is undeniable is the fact that if you’re embedding a lot of photographic and video content, and you’re doing it frequently while on the move, then it’s well worth investing in a tablet. The simple fact that it’s bigger makes the blogging process more efficient and far more enjoyable.

What mobile blogging apps do you use? Share them with us in the comments.

This article was written by Barry Cooke. Barry is a respected mobile usability consultant who has been working in the mobile market for over 15 years in a number of different sectors from online dating apps to finance and travel.

Essential HTML for Bloggers Part 2

This guest post is by Matt Setter of MaltBlue.com.

If you were with us yesterday, Part 1 of this series will have put you in very good stead for making sure the code of your blog posts is perfect HTML!

As you’ll recall, yesterday we looked at:

  • What is a tag?
  • Formatting
  • Alignment
  • Lists.

Today, we’re focusing on the final important aspect of our Introduction to HTML, and that’s links.

Links

Adding links is one of the most common and essential operations that we can do in publishing blog posts. Whether we’re citing references in our work, linking to other blog posts, articles, and videos, or making email addresses available so that we or others can be contacted, links are essential.

Linked post example

Have a look at the screenshot above, from a recent post here on Problogger.net. It has seven links—and that’s just the first part of the article. The remainder of the article has 31 more.

In the WordPress visual editor, there are two buttons for managing links. One to add them, and one to remove them. In your editor, past in a few paragraphs of text from yours or another blog and then select some of it and click the add link button.
Link buttons

When you do this, you’ll see the link editor window, below, open with two fields available: link and title. When you fill out these fields and click add link, your text becomes a link.

Link dialog

Let’s say that you were linking to an article here on Problogger.net, Blogging for Startups: 10 Essential Tips to Make it Work. You put the name in the title field and the link in the URL field.

What does it look like in the source code of the page? Here it is.

<a

title="Blogging for Startups: 10 Essential Tips to Make it Work"

href="http://www.problogger.net/archives/2012/09/05/blogging-
for-startups-10-essential-tips-to-make-it-work/"

>Blogging for Startups: 10 Essential Tips to Make it Work

</a>

The code above is what it would look like, if the article name was also the text that was linking to the article. It’s been formatted for easier reading. You see that the text is surrounded first in what’s referred to as a tag, or in this case <a> and </a>.

Then, inside of these, there’s two further parts, called title and href. The title is what is displayed if you hold the mouse over the link for a second or more, and href contains the link that will be opened when you click on it. That’s nice, straightforward, and simple, yes?

In your editor, click on the HTML tab in the upper right and have a look at the link that you’ve just created. Play around with the text inside the tag and the text in the elements in the opening tag, in the title and href areas. Then switch back to the visual editor and see what’s changed. Hold your mouse over the link and click on the link. You see how easy it is?

Now there are a series of other options that you can add in, besides title and href, but on the whole, the majority of them are not used that often and are likely not needed that much in the context of blogging. There’s a few more things we can do with links, though.

Internal links

So far we’ve looked at external links—by external, I mean any document that’s not the one we’re currently reading. What about linking within our document? Let’s say that half-way down our document, we had a list of the most to least highly populated states in Australia.

Let’s say that we linked to it right at the start of our post so that readers could skip right down to it without needing to read the text in between. How would we do this?

In your editor, in visual mode, copy in a few paragraphs of text from another website. Give it a heading “Australian States” and then add the text “Most Popular Australian States” right at the top of the document.

In the heading, “Australian States” create a link, but don’t give it a URL. Change to HTML mode and make it look like the code below:

<a name="australian-states">Australian States</a>

You see that in the href field, we’ve filled out a name field? This is now what’s called a named anchor. Now create a link around the text at the top of the page and set the URL to be #australian-states. When you preview the post, you’ll be able to click on the link and go straight down to the link in the document.

Here is an example of the HTML:

<h1>Australian States</h1>

<a href="#australian-states">to australian states</a>

<p>Die Hypovereinsbank wirbt Kunden für das Sparkonto HVB PlusSparen Top-Sparzins 
mit einer Zinsbindung von drei Jahren. Lässt der Sparer das Geld dort 36 Monate 
liegen, erhält er 2,25 Prozent Zinsen pro Jahr. Muss der Sparer aber vorher an sein 
Geld, gibt es nur sehr bescheidene Zinsen. test.de sagt, was das Sparangebot 
taugt.</p>

<p>Die Hypovereinsbank wirbt Kunden für das Sparkonto HVB PlusSparen Top-Sparzins 
mit einer Zinsbindung von drei Jahren. Lässt der Sparer das Geld dort 36 Monate liegen, 
erhält er 2,25 Prozent Zinsen pro Jahr. Muss der Sparer aber vorher an sein Geld, gibt 
es nur sehr bescheidene Zinsen. test.de sagt, was das Sparangebot taugt.</p>

<a name="australian-states">Australian States</a>

<ul>

<li>Queensland</li>

<li>New South Wales</li>

<li>Victoria</li>

<li>South Australia</li>

<li>Western Australia</li>

<li>...</li>

</ul>

Here is an example of what the page would look like:

Example of internal links

Not that much to it, is there? You can now link to external documents and within an existing document.

Essential HTML for bloggers

Well, there you have it. We’ve now gone through a fairly gentle, yet firm, introduction to HTML so that, as bloggers, we are able to be more hands on when crafting our posts, with the WordPress editor.

We’ve looked at basic formatting, alignment, links and lists and have a better understanding of the changes that are made when we click or un-click the respective buttons.

From here on, though you may choose to keep using an editor for managing your posts and I wouldn’t blame you if you do, you’ve now got the knowledge to step beyond it. I hope that you enjoyed this basic HTML for Bloggers and are able to feel more empowered than you did before.

If you want to know more, leave us a note in the comments and we’ll see what we can do.

Matthew Setter is a freelance writer, technical editor and proofreader. His mission is to help businesses present their online message in an engaging and compelling way so they’re noticed and remembered.

Essential HTML for Bloggers Part 1

This guest post is by Matt Setter of MaltBlue.com.

In the modern-world of blogging, there are so many blogging platforms to choose from. From the venerable WordPress, TypePad and Drupal to other great tools, such as Habari, Typo3 and CushyCMS amongst others. All of these make building a professional and stunning web presence, rather trivial—almost something so simple that our grandmothers and fathers could do it.

HTML5 logo

Image courtesy of the W3C

With all the ease of use that these tools afford us, how many of us still know what the underlying HTML looks like, that these tools, with their assortment of visual (wysiwyg) editors build for us? There was a time when you were considered a true web professional when you wrote all the HTML by hand.

To be fair, editors allow us to write quicker and likely more efficiently than we could if we were writing both the posts and the HTML code around them. They allow us to focus on what we’re good at, not the platform on which that knowledge rests.

From time to time, as capable as these editors are, they may either not be enough or we may simply want to know more and be more independent. We may want to know what’s going on underneath so that we’re not so reliant on them should something go wrong.

So in this two-part series, using the WordPress visual editor, I’m going to take you through a HTML for Bloggers Introductory Course. If you’re an aficionado on HTML, then this is likely not for you. If you’d like a refresher, are curious about what the code looks like that you’re producing in each of your posts, or just want to know how to go beyond the limitations of the editors you use, then this post is for you.

In this post, you’re going to learn five key, fundamental, aspects of HTML. These are:

  • What is a tag?
  • Formatting
  • Alignment
  • Lists.

Tomorrow we’ll add one more important aspect:

  • Links.

By the end of the series, you’ll know what’s happening when you click on a number of the buttons in the post editor and be able to change the HTML, should you want or need to do so.

Though I’m referring to it as a course, don’t worry, there’s no test at the end. If there were one, it would be based purely on how more empowered you’ll feel through having a greater hands-on knowledge of HTML.

HTML foundations

Tag: something used for identification or location—merriam-webster.

Before we get started, I want to give you a rapid overview of how HTML works. If you’ve not worked directly with it before, it’s based around the concept of tags or elements. From hereon in I’ll refer to them only as tags.

Tags give documents and parts of documents special meaning. Web browsers, such as Chrome, Firefox, Internet Explorer and Opera know how to interpret that meaning and display the appropriate page, for your viewing pleasure.

Have a look at the following, very basic, HTML document:

<html>

<head>

<title>The Page Title</title>

</head>

<body>

<h1>The Main Page Title</h1>

<p>A paragraph of text</p>

</body>

</html>

This is likely the most simple, yet still meaningful, HTML page that could ever be produced. You can see that the page begins and ends with the word html surrounded in opening and closing angle brackets, < and > and that the closing one has a forward slash,  /, in it. Within that, we then see two further sections, one is called head and the other body.

In head, we see a section wrapped in title and in the body we see two sections, h1 and p. It will work as follows:

  • The text inside the tags and will be what you see in the title bar of your browser.
  • The text in side <code>

    and

    will be the main heading on the page, likely in very large font and bolded.

  • The text insideandwill be the first paragraph that you’ll read on the page.

The image below shows what it would look like if we were viewing it in Mozilla Firefox.

Viewing the page in Firefox

So as you can see, when you think about it, HTML really is nothing more than a document that you would write in say, Microsoft Word, Open Office or Pages for Mac, but with some simple encapsulation around sections of the text to give it special meaning. The catch at times is knowing which element or tag to use and when.

I hope you can see that it’s pretty straightforward. With that, login to your WordPress blog and open a fresh new post, ready to play with, as in the image below.

A new post template

Headers and basic formatting

Right after links in order of importance, comes headers and basic formatting. This includes: the key headers, bold, italics, strikethroughs, and quotes.

Headers

As we all know, for documents to be searched and ranked most effectively in Google, they have to be semantically correct. In short, that means they have to use headers in the right way and use formatting where appropriate. The largest header should contain the core theme or point of the page and the increasingly smaller headers should be for sub-points of that.

Say we’re writing an article on the U.S. election. Well the main theme would be the election itself and we’d likely have two key sub-themes, being Democrats and Republicans. Have a look at the sample I’ve created below:

Header example

You can see that I have the main heading, US Election, with the headers for Republics and Democrats the next level down, with the content for each section, dummy text, in normal text with no special formatting. Let’s look at the HTML that’s been generated behind the scenes by changing to the HTML view. The HTML looks like this:

<h1>US Election</h1>

<h2>Republicans</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

<h2>Democrats</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

You can see that the main heading is wrapped in a H1 tag and the two sub-headings are wrapped in H2 tags. H1 is the primary and most important and H2 - H6 are decreasingly important. Now let’s say we want to mention the recent speech by Bill Clinton to the Democratic Convention. Have a look in the section below where I’ve added a H3 and H4 header mentioning just that.

<h2>Democrats</h2>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

<H3>Democratic Convention</h3>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

<H4>Former President Bill Clinton</h4>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec diam felis,

vulputate et facilisis sit amet, aliquam a lacus. Vestibulum nec mi ac

augue luctus scelerisque ut a ante. Vestibulum ante ipsum primis in

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

You can see from the above text that it’s pretty simple indeed. You could, alternatively, have done this using the Visual editor by selecting the respective text and choosing Heading 3 or Heading 4.

Basic formatting

Bold

Now let’s say that we were talking about Obama and wanted to draw attention to his name by doing some simple formatting, say bolding it. Well, in the visual editor, you’d highlight the text and then click B. But let’s look at how we’d do it in the HTML editor.

Change over to it, and in some text, or select some existing text, select it, then surround it with the tags <strong></strong> and , such as in the example below:

augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

After you’ve done that, change back to the visual editor and you should seem output similar to the image below.

Bold text

Italics and strikethroughs

What if we’re not wanting to bold text, but to either italicise it, say for a list of important items, or we want to strike through (strike/cross out) and item, emphasising a correction in our text. As you may well have gathered, they’re as simple as all the previous items.

The italics tag is <em></em> and the strikethrough is <del></del>. Let’s say that we have a long list of items, separated by commas, such as towns in New Zealand. And let’s say that we’re highlighting them so they’ll stand out to our reader. In our visual editor, we have the towns: Christchurch, Aukland, Invercargill and Taupo. But what we don’t want to do is italicise either the commas themselves or the word ‘and’. Add the list above in the Visual editor then change to the HTML editor.

All you need to do is to wrap each of the town names in <em></em> and as below and they’re emphasised.

<i>Christchurch</i>, <i>Aukland</i>, <i>Invercargill</i> and <i>Taupo</i>

Now let’s say this was the list of towns contending to host director Peter Jackson as he’s travelling the country looking for new locations for his next feature film; and that, sadly, Invercargill’s not made the cut. We need to strike it out. All we’d do is to take our list above and wrap Invercargill in the <del></del> tag and we’re done. An example is below:

<i>Christchurch</i>, <i>Aukland</i>, <i><del>Invercargill</del></i> and <i>Taupo</i>

When you switch back to Visual mode, or preview it in your browser of choice, it will look a lot like the image below (allowing for the dotted underline).

Italics and strikethrough

Quotes

Like all good bloggers and journalists, we don’t just write our own thoughts or link to others articles and thoughts. We also want to quote authors, whether that’s some prose, a statement, a callout or something they said recently. Commonly we see it in a larger, italicised, greyed font, with prefixed double-quotes. Often times it’s styled nicely like below, from a recent article on Copyblogger:

Blockquote

To achieve this effect, we need to use the tag. We simply surround the text we want to appear quoted in the tag. The example in the image above would be created as follows:

<blockquote>Please expand on your answer to Q1. What have you tried?

What’s keeping you from getting results?</blockquote>

I hope that you can see by this stage, just how very simple HTML is. Though there are a lot of tags and a number of the tags have a wide variety of options, they’re reasonably self-explanatory and quick to master. Keep it simple, start from the most appropriate tags and go from there.

The other thing you’ve likely noticed is just how much of a time save a good visual editor is. Could you imagine what it must have been like in the early days, before editors, doing all of this by hand? I didn’t mind doing it, but well, it’s not always the most effective way to work.

Alignment

Now let’s say we wanted to play around with the alignment of text. Say we want to align a few paragraphs of text either in the center of the post or on the right-hand side. Let’s work with the paragraph below. It will start off left-aligned, move to be aligned in the centre, and then end up right-aligned.

Left alignment

By leaving the text as is, optionally surrounded in

 

tags, will display the text left aligned.

augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.

Center aligned

By surrounding the text in

 

and

tags and adding the attribute “align” with the value of “centre,” we can display the text center aligned.

<p align="center">augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.</p>

This code will display as shown here.

Center alignment

Right aligned

By surrounding the text in

 

and

tags and adding the attribute “align” with the value of “right,” we can display the text right aligned.

<p align="right">augue luctus scelerisque ut a ante. <b>Vestibulum ante ipsum primis in</b>

faucibus orci luctus et ultrices posuere cubilia Curae; Duis malesuada.</p>

This code will display as shown below.

Right alignment

Lists

Now we’re coming to the end of Part 1 of out mini-course. We’re going to look at the last of the key, basic elements—lists. In HTML there are two types of list:

  • unordered
  • ordered.

Unordered lists are delimited with a bullet point and ordered lists have a numeric value, such as numbers, roman numerals and so on. Lists are a little more complicated than the tags that we’ve covered so far, though not by much. Lists need tags for the list itself, and for each of the elements within them. Below are two examples:

Unordered list

<ul>

<li>First Point</li>

<li>Second Point</li>

<li>Third Point</li>

</ul>

Ordered list

<ol>

<li>First Point</li>

<li>Second Point</li>

<li>Third Point</li>

</ol>

You can see that an ordered list starts and ends with and an unordered one with . You can also see that the list items start and end with

. So, there’s a nice correlation between the purpose and the name.

 

There’s quite a bit you can do when configuring what your lists will look like, where they will start or resume their numbering from and so on and lists can have sub-lists. But I think that we’ve covered enough for now.

Tomorrow we'll finish up our tour of essential HTML by looking closely at links, the "glue" of the Internet. Before then, let me know if you've learned anything in this tutorial—and what else you want to know. I'd love to hear from you in the comments.

Matthew Setter is a freelance writer, technical editor and proofreader. His mission is to help businesses present their online message in an engaging and compelling way so they’re noticed and remembered.