Pint Sized Sites

Web Sites for Your Small Business

You are here: Home / Archives for Kelli

Kelli

Podcast Episode 2 – Learning HTML

by

In this episode, I’m answering a listener’s question: do I need to learn html and where do I go to learn html?

Links in this episode:

https://www.coursera.org/learn/html

http://www.w3schools.com/html/default.asp

https://notepad-plus-plus.org/

https://itunes.apple.com/us/app/textwrangler/id404010395?mt=12

Transcript of this episode

(pretty close to what I said but without the ums, ahs, and whatever noise the Executive Producers are making in the background)

Hi there and welcome to another episode of the pint sized podcast where we answer your questions on wordpress and websites. I’m your host Kelli Wise of Pint Sized Sites.

The executive producers, Sunny and Scout, tell me that we have a question from a listener about learning html. This listener wants to know:

“Do I need to learn HTML and, if so, where do I go to learn it.”

As a user of WordPress, you don’t NEED to learn html, but it can sure come in handy. So, I’m going to tell you, yes you should learn html.

But what is html?

Html is an acronym for hypertext markup language. While that might seem like a mouthful of jargon, it’s actually pretty descriptive. At it’s core, html is ‘markup’. If you’ve been around computers as long as I have, which isn’t likely, you might remember a time when word processors, like WordStar, required that you add code around words that you wanted to make bold, italic, or bigger. So, you would type and little pointy bracket, add a b for bold, and another pointy bracket. Then you would type the words you wanted in bold. Then another pointy bracket, a backslash and b to tell it to stop doing bold. And finally there was another pointy bracket.

We were marking up the text in our documents to add styling. That’s where the ‘markup’ part of that acronym comes from.

What about the hypertext? Well, our old pal Merriam-Webster – the Pint sized online dictionary of choice– defines hypertext as “an arrangement of the information in a computer database that allows a user to get information and to go from one document to another by clicking on highlighted words or pictures”. Ignore the database part of that definition. The important part is being able to go from place to place by clicking on a link. What is a web page without a link? Pretty insulated and mostly useless.

So, with html, we can add links and we can add tags that will add styling to the text. Since the html ‘code’ is defined, we’ll call it a language.

Back in the old days, like 10 years ago or so, websites were written entirely in html. It was fun (if you’re weird, like me) and tedious. 20 years ago, not only was I writing websites in html, but every single element in the page had to be individually styled. Every time I was to use red text, I had to wrap that text in html that made it red. THAT was tedious.

Fortunately, 20 years ago, we were so limited in what web browsers would display, that the coding was not all that huge. Really, we had bold, italic, a few colors, and maybe we could add a picture of rocks as a divider. If you’ve been around long enough, you’ve seen those rocks.

And then we had blinking text, but until the nightmares about that fade, we’ll just pretend blinking text, dancing babies, and flying toasters never happened, ok?

It didn’t take long before someone found a faster, more efficient way to add all of this styling without having to type color=red over and over and over. This is where CSS, or cascading style sheets, comes in to the picture. Now, we can move all of the style information into one document and use the html to just tag the text with things like heading, bold, list item, and such.

But, wait, you thought I was talking about html in this episode! Well, I am, but honestly, html without css is like soup without salt or bikes without pedals. They are integral to one another. Fortunately, you can learn them separately, although you must start with html first to understand css.

Sounds complicated, doesn’t it? Well, it can be, which is why platforms like WordPress, Wix, Weebly and the like are so popular now. You don’t strictly need to know html, or css, to use WordPress to build a website. Why? Because WordPress and the theme designer have done all of the html and css work for you.

So, why might you want or need to know html? Well, on occasion, you’ll need to add some button code to a page or tweak the contents of a widget. Knowing what all that extra code is and what it’s doing can be really helpful.

Or, you might be interested in designing your own theme or just editing a theme, in which case, you’ll really need to know html and css. You can also tell a lot about someone else’s website by looking at the source code for it – all the html that the browser sees. You can also see anything questionable like hidden links to malware sites by looking at your source code.

Some email management services, like Aweber, allow you to put html in your emails you send to your subscribers.

Html is the language of the web, so if you are willing to learn it, you’re going to be able to do a lot more online.

Where to go to learn HTML

Which brings us where to learn html. You can sign up for a college course at your local community college. That will cost you some money, but the accountability will keep you on track and doing the work. Plus you can ask the instructor questions.

If you’re like me, though, you don’t want to wait for the next semester or quarter to start, you don’t want to drive to a class, and you’d like to save some money. There are online courses available for you that are quite good.

My favorite, hands down, is on Coursera. There will be a link to Coursera and the html course I’m recommending. While Coursera has more than one course on html, the one I am recommending is title “Introduction to HTML5” which is created by the University of Michigan and taught by Colleen van Lent, Ph.D.

I’ve worked through most of the css course and most of the html course by Ms van Lent and I am blown away with how good she is as a lecturer. She has clearly mastered the art of teaching. Her teaching style is conversational – yes she uses big words on occasion, but she makes sure to explain them. She makes some of the more difficult concepts easy to grasp. Her explanation of the difference between display block vs inline block vs inline was probably the best I’ve ever come across.

I’ve been doing websites for a very long time now, since about 1997, and I still learned a couple of new things from her courses, or at least new ways of describing them.

I really cannot say enough good things about this course. To make it even more appealing: it’s free! Yes, you can pay a fee and get a certification, but you can also audit the course for free.

I have a local graphic designer friend in town who is adding html to his skill list and I recommended this course to him. He’s tried a couple of other courses, but ended up lost at the start: what is a text editor and how does he use it?

A quick review of the syllabus for the course is:

Week 1 will get you started with intros of what html is and it’s evolution, what browsers are and how to use a text editor to create an html file. It really does start at the basics.

By week 2, you get started on some coding. You’ll learn what html tags are as well as images, hyperlinks and tables. There are plenty of projects to practice on.

Week 3 covers validation, accessibility, hosting, file transfer and more.

As introduction courses go, this one is pretty comprehensive and covers useful skills and tools.

If you want access to an online reference and a free online course, then the w3schools.com is another way to go. W3Schools will walk you through html, concept by concept. It also provides a means for you to play and text code live without using a text editor.

The w3Schools site also acts as a pretty good reference for html.

I mentioned text editors earlier and I have a couple of free recommendtations for you.

A text editor differs from a word processor in that it does not add any extra styling. When you look at a Word document, there is a lot of markup that you don’t see but that helps with the look of the document. Things like headings, bullets, and more. This means that you can’t use a word document to create an html document. There’s just too much extra stuff that Microsoft adds. So, you want a program that only creates text and nothing but text. There are several text editors out there that you can pay money for, but I’ll assume you only want to learn html, not become a web developer. In that case, you don’t need all of the bells and whistles that I use.

For Windows computers, I recommend Notepad++. That’s 2 plus signs. It’s an amazing piece of software and I used it extensively when I still used Windows computers. It’s available from the web as a download.

For Mac, I recommend TextWrangler. While not as powerful as Notepad++ or paid apps, it will do pretty much everything you need it to do. It’s available on the iTunes store.

Links for all of this will be in the show notes on Pint Sized Sites dot com.

I hope you explore html a bit. It’s not as complex or intimidating as programming languages but it comes in mighty handy if you have a website, even something as user friendly and code –lite as WordPress.

That’s all for this episode. Thanks so much for listening. If you have questions or comments, be sure to visit the website at

Pint sized sites dot com / Podcast for links to this episode. You’ll also find show notes with all the links mentioned here and you’ll find all of the earlier episodes, too.

If you enjoyed this episode, I would love to have you pop on over to iTunes or stitcher or your podcast service of choice and leave a review. 5 stars would be awesome, but hey, no pressure, ok? Leaving a review makes it easier for other folks out there to find this program.

If you have a question you would like answered, go to pint sized sites dot com and look in the top menu for “ask a question”. Fill out the form and leave your name, if you are so inclined, and I’ll find an answer to your question in a future episode.

Thanks again for listening! Until next time, I’m Kelli Wise and you’ve been listening to the Pint Sized Podcast – website and WordPress help for small business!

Episode 1 – WordPress, Weebly, Wix, Squarespace and website portability

by

Welcome to Episode 1 of the Pint Sized Podcast

In this episode, I talk about website portability and the 4 big website platforms out there that you might be familiar with.

Links in this episode:

WordPress.com – the hosted solution for WordPress

WordPress.org – where you can download WordPress, plugins, and themes for self hosted users

Weebly.com

Wix.com

Squarespace.com

Namecheap.com – Where I register my domain names. They are cheap, they don’t do a lot of upsell. Pint Sized Recommended!

GoDaddy.com – Another domain registrar, but there’s a bit too much upsell for my taste.

Siteground.com – Website hosting that I am currently using. Pint Sized Recommended!

Transcript of this episode

(pretty close to what I said but without the ums, ahs, and whatever noise the Executive Producers are making in the background)

Hi there and welcome to the FIRST episode of the pint sized podcast where we answer your questions on wordpress and websites. I’m your host Kelli Wise of Pint Sized Sites.

That’s right, this is the Pint Sized Podcast. It used to be the WordPress Help Twins, but my twin sister Leslie (Stewart) has other commitments that won’t leave her with the time to keep podcasting. Rest assured that the producers, Sunny and Scout, and I all miss her and wish her well (and good fortune!).

I’ll be keeping this podcast centered on WordPress, but there will be loads of general website goodness, too. That’s because wordpress is a means to a website and not the end goal for most of you.

I know that most of you are small business owners who are using your website to attract the right kind of clients, give them the information they need, and basically make money. That’s what I use my website for.

I’d like you to think of your website as an employee. Now, the best things about the website employee is: it will never leave a mess in the break room and it won’t waste time surfing porn at the office. The worst thing about the website employee is: it’s not very proactive. You have to make it work. That means that you are going to have to invest time in your website.

Like any employee, your website needs to be pulling it’s own weight. So, what does this have to do with WordPress? Everything, actually.

When I started designing websites for clients, I was using regular old html and css files. In order to edit these sites, I would need a text editor and a FTP program to upload the new files. Clients had to contact me, send me their new text and photos, wait for me to make the changes, send me any tweaks they wanted done, and then wait for me to make the changes.

It was tedious and expensive for them. It was tedious and not all that interesting for me. Yes, it was income, but, strangely, I would rather forgo that income to empower clients to make those edits and updates themselves.

And that’s where WordPress comes in. When I discovered WordPress so many years ago, it allowed me to create websites for my clients that they could edit. I could take care of the setup and design and they could blog, change their hours, update their menu of services, and fix their own typos.

There are other platforms you can build your website on. The most common ones now are Wix, Weebly and Squarespace. There are pros and cons to each of them but the one thing you should insist on is website portability. Can you move your website to another host easily or are you locked in?

WordPress, both the dot com and dot org versions, are very portable. (dot org is what I call a self hosted version, meaning the WordPress software is installed on a web host you pay for, like Siteground or Blue Host or GoDaddy). I’ve moved dot com sites to self hosted sites several times for various clients. The only hiccups I’ve ever had were with images but they were fairly minor.

Weebly can be self hosted on some webhosts (not GoDaddy) or hosted by Weebly. Wix and Squarespace must be hosted with those companies. That means that a website created on Wix or Squarespace will always have to be on those services. Exporting them to something like WordPress or Joomla or Weebly will be impossible to do completely. So consider what would happen if the company shut down or went out of business.

Moving a Weebly site from Weebly to your own hosting is not simple. You can archive a lot of the site content, but if you’ve blogged, the posts won’t transfer. You’ll have to copy and paste them into a document somewhere and republish them on your new site. You’ll lose a lot of data and a lot of the work will be manual copying, but at least it can be done.

Wix and SquareSpace can’t be moved to your own hosting. They rely entirely on the Wix and Squarepace platforms. So you’re stuck. Moving to a new host will require rebuilding the website from scratch.

Moving from WordPress.com to your own hosting is pretty simple. You can export the content, pages, posts and media, and import it to your new hosting. You might have to do some cleanup; I’ve found that a few photos might not transfer over properly, but the rest of the content transfers over pretty easily.

So, the big conclusion here is: Make sure you know what the limitations are for the website solution you choose. Make sure your website is portable because it is likely that you will change hosts in the lifetime of your website. WordPress is still my top pick with Weebly coming in a distant second. I can’t recommend either Wix or SquareSpace for a business owner.

That’s all for this episode. Thanks so much for listening. If you have questions or comments, be sure to visit the website at

Pint sized sites dot com / Podcast for links to this episode. You’ll also find show notes with all the links mentioned here and you’ll find all of the earlier episodes, too.

If you enjoyed this episode, I would love to have you pop on over to iTunes or Stitcher or your podcast service of choice and leave a review. 5 stars would be awesome, but hey, no pressure, ok? Leaving a review makes it easier for other folks out there to find this program.

If you have a question you would like answered, go to Pint Sized Sites dot com and look in the top menu for “ask a question”. Fill out the form and leave your name, if you are so inclined, and I’ll find an answer to your question in a future episode.

Thanks again for listening! Until next time!

Affiliate disclosure – Yes, I have a couple of affiliate links in here. I only do that for products I personally use and recommend. Click on them or don’t – it’s entirely up to you. But the affiliate income helps pay for the podcast hosting, so it would be appreciated.

Color for websites

by

Remember in grade school when you got to mix paints to create new colors? You’d start by mixing two of the primary colors together, like Red and Yellow, and Orange would magically appear. Then Blue and Yellow, and you’d have Green.

If you were like me, you’d end up mixing up all three primary colors and end up with some murky, frightening, ‘I don’t know how long it’s been in the back of the fridge’ brown. Yuck.

The point of this little trip down memory lane is, I want to talk to you about color for websites. It’s a little different than color for print, or for painting, and that tends to confuse people used to working with paint and ink.

Color for print

When I was in 6th grade, we did this cool experiment where we took black India ink and wicked it up a piece of paper that resembled a bit of coffee filter. As the ink slowly spread up this filter paper, it separated out into the colors of the rainbow. This way, we could see that the ink is made by blending different dyes together to make black.*

One of the best things about hanging around with graphic designers is all the cool things I get to learn. One of these things relates to color in print.

In the printing industry, the inks used are CMYK, or cyan, magenta, yellow, and black. Cyan is roughly blue, magenta is roughly red. When you combine the inks, you get the same sort of effect that you get when you combine paint colors. Here is a graphic I created in Photoshop to illustrate how CMY will blend. Note that the accuracy of the colors will not be perfect because your monitor hasn’t been calibrated, but it will be pretty close.

The color combinations in CMYK
The color combinations in CMYK

This is how your office printer works. It uses these 3 colored inks plus black to produce your color print outs. But that’s not how we create color for your website.

Color for the web

So now that we understand mixing red and yellow and getting orange, let’s make a huge left turn. When it comes to color for the web, you can pour that concept right down the drain with all that non-toxic, eco friendly printer ink.

Color for the web is designed for computer monitors, not paper.

Computer monitors work with light, not dye. Let’s head back to grade school to figure this out. (Boy, I’ll bet Mr. Olsen would be surprised to see his science lessons here on the old interwebs in the 21st century!)

Rainbows!

Think back to science class and your first encounter with a prism. Remember how it created a rainbow when you placed it in the sunshine? If you’re having a hard time remembering what a prism is, go check out the cover of Pink Floyd’s “Dark Side of the Moon” and you’ll see a prism and the rainbow. Let’s talk about what’s going on with that prism.

White light is made by combining all the different colors of light together. Plus some colors you can’t see like infrared and ultraviolet. Since we humans can’t see infrared or ultraviolet, we’ll ignore those for now.

When you combine all the colors of ink together, you get black but when you combine all the colors of light together you get white.

That should blow your mind. Or maybe it’s the Pink Floyd. Either way, color on a computer screen is completely different than color on your printer.

If you look very very very closely at a computer screen or a television screen, you’ll see that it’s actually made up of lots of little colored dots, called pixels. These dots are red, green and blue. When all three of them are shining at maximum brightness at the same time, you get white on your screen. When all three of them are off, you get black.

RGB = Red-Green-Blue

We’ll pretend that these little dots are individual LEDs, like the little blinky light on your TV remote. If you take a red, a green and a blue LED and put them very close to one another and make them very small, it’s very hard to notice that there are 3 LEDs unless you look with a magnifying glass. What you see instead is one point of light that is the color that results from combining the three LEDs.

These LEDs are operated by a digital dimmer switch. Each LED can vary how bright it is shining. In fact, it has 256 levels of brightness that goes from 0 (off) to 255 (full brightness). Each of these 3 LEDs is controlled separately, so the red one can be off while the blue one is partially on and the green one is fully on.

Now we can specify any color by how bright each of those LEDs should be shining. This is the RGB color and it looks like this:

rgb(255, 255, 255)

That color, by the way, is white. It means that all three LEDs are fully bright. rgb(0, 0, 0) means that all of the LEDs are off and we will get black.

Combing light

So what happens when you start combining light?

The color combinations in RGB
The color combinations in RGB

When we combine Red and Green, we get yellow. Red (255, 0, 0) and Green (0, 255, 0) combined create Yellow (255, 255, 0). Blue (0, 0, 255) and green (0, 255, 0) create aqua (0, 255, 255), red(255, 0, 0) and blue(0, 0, 255) create magenta (255, 0, 255).

In the code for a website, you might see the color typed out

rgb(236,115,67)

What is HEX?

RGB can be written another way, called HEX. RGB is what’s called a base-10 number, which is what we are used to counting in. All of the numbers are from 0 to 9. Hex is written in hexadecimal, which is from 0 to 15: 0 1 2 3 4 5 6 7 8 9 A B C D E F. Don’t worry if you don’t totally understand that, is pretty geeky stuff. The reason I mentioned it is because you will see those first 6 letters of the alphabet used in hex color codes. The rgb scale of 0 to 255 is the same as a hex scale of 00 to FF. You can go look it up, but just trust me on this. I paid a lot of money for an engineering degree to be able to count in hexadecimal and I still end up using an online hex converter.

Ok, so RGB is 3 sets of numbers, and so is hex. Hex just isn’t written with the commas. And it starts with a hash/pound sign/hashtag or whatever the kids are calling it these days.

#EC7343 is the same color as rgb(236,115,67).

Programmers use hex for a lot of reasons, but mostly it’s because it’s shorter and faster to write. This is the format you’ll most likely see and use. When your web designer asks for your logo color, they don’t want “red” “chartruese” or “sky blue”, they want the hex code.

What is RGBA?

You may have seen a color written as an rgba and wondered what the extra letter is all about.

rgba(236,115,67,.4)

RGB is for a solid color, but sometimes, we want things to be semi-transparent so that you can see an image sort of show through. You’ll see this fairly often when there is text placed over a big image. If the text is black and the image is fairly dark, it can make the text difficult to read. The designer will often place a semi-transparent background for the text that will make the text more visible. The ‘A’ in RGBA specifies how transparent the color will be, from 0 (fully transparent) to 1 (solid color).

Here you can see what it would look like with different transparencies.

RGBA examples
RGBA examples

In Photoshop and other graphic design programs, this is the equivalent of a layer transparency, but in web code. It’s incredibly useful for hover effects, making sure that text is readable over any image, making a bit of text pop on an image. You aren’t limited to black and white, either. Any color can be made with rgba.

RGBA is also handy when you want to lighten a color without having to open up a color chooser to figure out the lighter version of the color.

RGBA background color at 20%. rgba(236,115,67,.2)

RGBA background color at 40%. rgba(236,115,67,.4)

RGBA background color at 60%. rgba(236,115,67,.6)

RGBA background color at 80%. rgba(236,115,67,.8)

RGBA background color at 100%. rgba(236,115,67,1)

The most common format you will use is HEX

When you are selecting colors in your theme customization window, you will likely be dealing with hex color codes. Some theme developers will add the # sign for you and others will leave you to add it. If you are having issues with the color code not working, check to make sure if you should be adding the # yourself. This is usually the biggest problem encountered.

Now that you understand the difference between color for print and color for websites and you know the different color code formats, you are well equipped to handle the theme customizer. I another post, I’ll show you how to find the right color, modify that color to lighten and darken it, and to create a color palette based on it.

Questions? Just leave a comment below.

* You can actually do this experiment with a black marker and some coffee filter paper by following the instructions here. Fun for the whole family.

What to do when a plugin update breaks your WordPress website

by

I was a speaker at the Seattle WordPress meetup this month and part of my talk was on what to do if, during your WordPress updates, a plugin breaks the site. The topic was WordPress maintenance which I wrote about in an earlier post.

Plugins aren’t always perfect

Sometimes, plugins will conflict with WordPress or with another plugin. When this happens, your site will either start acting ‘strangely’, the plugin doesn’t function the way it’s supposed to, or you get the dreaded “White Screen of Death”.

The first time this happened to me, I admit, I almost cried. It was my second website and I had just spent the better part of two days getting everything setup and loads of content added. I realized I needed a function not in WordPress so I installed a plugin from the repository.

White. Screen. Death.

Once I figured out how easy it is to fix this, I no longer dread buggy plugins. And I’m going to show you how to fix this. In fact, I have a flow chart. Can you tell I’m an engineer at heart?

You can download a pdf of this by right-clicking this link: Plugin troubleshooting flowchart

Step by Step Guide

If you have access to the WordPress dashboard:

  1. Don’t Panic
  2. If you updated your plugins one at a time, then you’ll know which plugin is the problem. Deactivate it. Test the website. If everything is working ok, delete that plugin, contact the developer, and find a new plugin that does the same thing.
  3. If you updated all of your plugins at once, you won’t know which plugin is the problem. Deactivate all of them. Now, activate them one at a time, testing the site after each activation. When you find a plugin which is a problem, delete it, contact the developer, and move on to the next plugin until they are all tested. Now you can head off and find new plugins to replace the buggy ones.

If you don’t have access to the WordPress dashboard (usually you’ll get the White Screen of Death, but not always)

  1. Don’t Panic
  2. You’ll have to get into the file structure of your site using either ftp (preferable) or your host’s file manager.
  3. Find the plugins folder. It will be at wp-content/plugins and all of your plugins will have their own folder within that plugin folder.
  4. If you updated your plugins one at a time, then you’ll know which plugin is the problem. Deactivate it by deleting the plugin’s folder. Don’t freak out about this, plugins are freely available on the repository, so there’s no need to hoard them on your site. Test the website. If everything is working ok, contact the developer, and find a new plugin that does the same thing.
  5. If you updated all of your plugins at once, you won’t know which plugin is the problem. Deactivate all of them by renaming the plugin folder from plugins to broken-plugins. WordPress won’t recognize them because they are in the wrong folder. Create a new folder called “plugins”. Now, activate them one at a time by moving each plugin’s folder from /broken-plugins to /plugins. Test the site after each plugin activation. If the plugin breaks your site, delete it’s folder,  contact the developer, and move on to the next plugin until they are all tested. Now you can head off and find new plugins to replace the buggy ones.

If deactivating all the plugins doesn’t work, you could have a problem with the theme. Try activating the default WordPress theme. Those are TwentyThirteen, TwentyTwelve and such. WordPress should always work with no plugins activated and the default theme active. If not, you could have had a corrupted WordPress update. Just re-do the update of WordPress.

Questions or comments? Let me know.And feel free to send your friend to this post when they have problems.

The 3 Critical Maintenance Tasks for Every WordPress Website

by

When was the last time you updated all the plugins and themes on your website? If you’re like most small business owners, you’ve probably had to think very hard to remember that. That’s a huge mistake since it leaves your site performing poorly and vulnerable to hacks. Fortunately, the basic maintenance functions can be done in a minimal amount of time.

Why bother with maintenance?

Regular maintenance of your WordPress website will

  • close all the known vulnerabilities
  • provide you with a clean copy should your server crash or your site get hacked
  • give you access to all the latest functions of WordPress
  • keep your site performance from suffering

Regular maintenance in 3 steps

  1. Backing up the site
  2. Cleaning up the site
  3. Updating the site

Step 1 – Regular Backups

There is a manual means of creating a backup using phpMyAdmin, but ain’t nobody got time for that. Fortunately for us, there are plugins which will do most of the work.

Before we go too far in talking about how to do the backups, I want to describe the two different types of backups and when to use them. Wait, what? 2 types of backups?

When I first started using WordPress, I assumed, like many of you, that a database backup is all I needed to do. I discovered very quickly how wrong I was. See, the database contains all of our posts, pages, categories, tags, users, settings, and options. Sounds pretty complete, doesn’t it? What’s missing from that list? All of the photos we’ve used in our posts and pages, our themes, our plugins, and any other media we’ve uploaded.

My favorite plugin is BackupBuddy, by iThemes. There are several others out there that are free. Just check the WordPress plugin repository via your WordPress dashboard.

Once you install your backup plugin, set it up to do regular backups automatically.

Store you backups offsite

That means that you don’t want your backups on the same computer (server) as your website. Why? Well, let’s imagine that your server fails, which they do after a few years. You lose your website plus your backups. Oops. So, make sure those backups are stored somewhere else. Most plugins will upload backups to a dropbox folder or other cloud server, or you can have them emailed to you and you can store them on your laptop.

Step 2 – Tidy things up

Maybe you installed and tried a few different themes and plugins. You might have decided against using them, or you found something better and you deactivated the old ones. In this step, we’re going to delete everything you aren’t using except we’ll keep the latest default theme from WordPress. This is currently TwentyThirteen.

Don’t be afraid to delete unused themes or plugins. You can always reinstall them if you need them in the future. Really, they’ll be there. I’ve seen plugin folders that look like an episode of Hoarders. You don’t want to be like that.

Unused themes and plugins can be used by hackers to compromise your site

They don’t have to be active to be a problem. Get rid of them.

Step 3 – Update

The biggest mistake I see bloggers and business people make is not updating their WordPress, themes and plugins. I’ve heard every excuse from “I’m waiting to make sure it’s a stable release” to “I haven’t even logged into the site in ages”, so you’re in good company if you haven’t been on top of your updates.

Everyone seems to have their preferred way to do this, but the method I’ve found that causes the fewest issues is this

Update plugins first.

Since most plugin updates will be compatible with older versions of WordPress, it seems safest to update them before you update WordPress. I also strongly suggest that you update your plugins one at a time. If anything is going to break your website, it’s most likely going to be a buggy plugin. By updating them one at a time, you’ll know which plugin needs to be deleted rather than having to troubleshoot them individually.

Update your themes second.

All of them. Even if you’re not using them. But, if you did step 2, you should only have your active theme and a default WordPress theme to update.

Update WordPress last.

Everything should go smoothly if your plugin and theme updates went smoothly. Now do a final test of the site to make sure everything is ok.

What to do if something goes wrong

First of all – Don’t Panic!

If updating a plugin breaks the site, I’ve written a separate post, What to do when a plugin update breaks your WordPress website. Follow the steps there to get your site running again.

If updating the theme didn’t go well, try activating the default theme.

If everything returns to normal, contact your theme developer and let them know there is a problem. give them as much description of your setup as possible.

If activating the default theme didn’t fix things, deactivate all of your plugins. WordPress + Default theme with no active plugins should always work. Always.

If things return to normal, then you probably have an older plugin that is no longer compatible with WordPress. Start activating plugins one at a time to find out which one is the problem.

If going to the default theme and deactivating your plugins still isn’t working, it’s possible that your WordPress update was incomplete or corrupted. WordPress gives you the option to reinstall the latest version. Do it.

How often should you maintain your WordPress website?

If you have a static site, the bare minimum is once a month. You might have to do it more often if there is a big release of WordPress as plugin and theme developers will release their updates after a big WordPress update.

A better idea is to login once a week. This will make sure you don’t miss any important updates.

The best is to login every day. You’ll never miss an update this way and you’ll always have a good backup available.

If you are running a heavily used site, like a news aggregator, you’ll want to go with hourly backups and daily updates. For most of you, though, this is overkill.

I presented this material at the Seattle WordPress meetup this month. You can see the entire slide set at my Slideshare page.

Did you find this post helpful? Did I miss something? Let me know in the comments below.