So you are about to pull the trigger and have a website designed for you.  Or you have a current website, but you wish to add more pages.  The  first step in your journey is to create a sitemap.

What is a site map?

A site map is basically an outline of all the pages you wish to have on your website.  This will help you understand the amount of pages you will need to be designed.  It will also give you a good idea on how much content, text and images, that you will need.

When you pass this information on to a developer, it gives them a good idea on the scope of the project for billing.  It is also a crucial step in understanding the UI (user interface) for the navigation.

How to create a site map?

There are several ways to create a site map an it just depends on what you are comfortable with.  As long as your sitemap is a good representation of your site, you can pass this on to a developer and they will understand what is needed to update or create your website.  It can be as simple as a text document or a diagram model.  I have been passed along many forms of sitemaps, and all work just fine as a jumping point to update or create a website.

1. A Document

This is the simplest way to represent the structure of your site.  You can use a plain text editor, Microsoft Word, or better yet, use a Google Doc, that you can put into a folder in Google Drive to share with your developer.  This will create a shared document that you can both edit if necessary later on.

1. A Visual Diagram

If you are more of a visual type of a person, a visual diagram might be the best solution for you. This is a bit more complex, but actually pretty simple to create. There are plenty of online diagram editors out there, however, I’ll once again lean on google and create one in Google Draw.

You of course don’t have to use an online editor, you can just as easily create this in Microsoft Paint, Adobe Illustrator, and plenty of others.  Make sure to export your drawing as a .jpg to easily share with your developer.

Conclusion

These are just a few ways you can create a sitemap, however, there are plenty of others.  You can even just draw your idea out on piece of paper or whiteboard, and take a photo of it.  My favorite example was the approach by Heartful Way Reiki, where she used post-it notes as pages and arranged them on a large sheet of paper.  A pretty visual, easy to move things around, and simply took a photo of it when she was done and sent it to me.

You (or had someone like Atomic Coffee Media) create a great site.  In the footer at the bottom of every page, you probably have a copyright startment like so (©2021 Atomic Coffee Media. All rights reserved.).  However, each year you notice the year doesn’t change automatically and you have to manually go in and edit the footer.

Not so bad, but tedious, and you probably will forget about something this small, and people might think your site is out of date.  So what to do?  A great thing would be if WordPress included a shortcode for something as simple as a year, but they don’t.

A shortcode is basically a small little placeholder that you put in your editor when adding text to your site.  The shortcode is basically a shortcut to display some code and its output right on your site.

Now, if you read above you might have noticed I mentioned code, which in turn means if we are going to make our own shortcode, there is some programming needed.  But fear not, in this article I’ll show you how to simply past 5 lines of code in the right place to make your own shortcode! (you can then brag to your friends that you are a programmer as well

WordPress understands that you might want to add some custom code to your site and created an editor to do so. You can get to this by going to “Appearance” -> “Theme File Editor”.

Once here, you want to make sure to select your function file.  The function file is where you can add code that will be used with your site.  A few things to note here however.

If you theme came with a “Child” theme, edit the function file of that.  A child theme basically allows you to add stuff to your site without modifying the actual theme itself.  This is important when you update a theme as it would overwrite your code.  If you theme didn’t come with one, WordPress has an article here: https://developer.wordpress.org/themes/advanced-topics/child-themes/

Also, please be careful when editing theme files.  A simple mistake can break your site.  The codes below can be copied directly to help you make sure that you have everything in place correctly!

So… the first thing we will need to do is add a block of code to your functions file.  It’s actually only 5 lines of code!

function year_shortcode () {
$year = date_i18n ('Y');
return $year;
}
add_shortcode ('year', 'year_shortcode');

Once you copied the above text make sure you save your changes.  This little piece of code will allow you to now add a shortcode to display the current year.  Any place you want to add it, simply put the shortcode below into your text editor.

2023

WordPress is a great content management system that comes with some great features.  One of them is the availability to easily update your themes, plugins, and even WordPress itself.  Updates can be to add more features, patch bugs, or even for security reasons. This article will teach you how updating your site is a simple thing to do.

You should make is a habit to update your site often.  How often?  That is up to you, however, I would suggest to look at it once or twice a month if time allows.  It only takes a few minutes, and is pretty important to do.  It is also extremely easy to do!

If it has been a long time since the last time you updated, and there are a ton of updates needed, I highly recommend that you backup up your site.  I have written a post on how to do so here.

There are several places you can update your site’s themes and plugins.  On both the plugins, and theme pages, new links will appear that show you need to update the various items.  All you need to do is simply click on each.  The second, way is to go to the previously mentions screen by going to “Dashboard” -> “Updates”.

This will give you an overview of all updates needed, including your WordPress install.  You can update each individually here, or even select multiple items to update.

A special side note is some plugins or themes from Themeforest or CodeCanyon, use a plugin named Envato Market, which you need to update these items form there.  Most all of Atomic Coffee Media designs don’t use this, but if your theme or plugin was purchased form the sites listed above, you might run into this

Backing up a WordPress site (well, any website) is something that is important and can be incredibly easy to do.  There are several reasons to make a backup, but mainly it will help stop a heartache down the line.  This might be from something as simple as an updated failed and your site isn’t responsive, or worst yet, your site got hacked.  This article will show you not only how to backup your site, but when to do so, and how to restore your site to a previous saved backup.

UpdraftPlus settings can be found on the left menu under “Settings” -> UpdraftPlus.  However, the plugin also added a handy way to access everything by adding a new top nav link called “UpdraftPlus”.

In the settings, you can determine if you want to manually backup you site, or even choose a schedule and have the backups taken care of automatically.  You can also determine the amount of backups you want to store.  Each or these backups takes a bunch of space, so I typically leave it at the default “2” backups.

You can also choose where to store the backups.  If you choose nothing it will store it on your server. However, you can choose a ton of other places to keep your backups safe.  For example you can store your backups on DropBox or Google Drive for safe keeping.  This is handy as even if your server is completely destroyed, you can restore your site from the remote location.  It does take a bit longer when you want to restore things however, but I think it’s worth it.

After configuring your settings, backups could never be easier.  If you chose to have automatic backups, you can just sit back and the plugin will automatically create them.  If you chose manually, you simply go to “UpdraftPlus” -> “Backup / Restore and click on the “Backup Now” button.  A popup will appear which will ask you if you want to backup both the files and database.  Of course you do, so leave both check and click on “Backup Now”.

A progress bar will appear and you can see the activity of the backup.  The larger your site the longer this will take.  When it’s done, you can see the backup listed below the Backup section.

As mentioned above your backups are listed below the backup section.  There are three columns.  One is the date of the backup, which is handy if you know you needed to rollback to a certain date.  The second column has 5 buttons named Database, Plugins, Themes, Uploads, and Others.  Your can click on any of these to download each item directly to your computer.  I never found this useful, however, maybe you will.

The third column named “Actions”  is the most important as you can choose to delete a backup or restore a backup.  Clicking on restore brings you to a screen on what you want to restore.  I always click on everything here, then click on “Next”.  You will be presented a screen that verifies the plugin processed everything and is ready to restore.  Click on “Restore” and sit back while the plugin does its magic.  Once again, this could take a bit longer depending on the size of your site, or if your backing up remotely.

“A picture is worth a thousand words” holds very true in your WordPress site.  A WordPress website is only a framework to hold your images and text.  The images you pick will make a difference on how professional you look and set the tone of the site.

Most businesses don’t have a  budget to hire a photographer.  There are however, some stock photo sites that have excellent photography at a price. iStock Photo, Shutterstock, and Dreamstime, are just a few that come to mind.  A google search, of course, will reveal dozens more sites that will sell you stock photography.

What if you can’t even afford the cost of these stock photos? Well fear not, there are plenty of sites out there that will find that perfect photo completely free!  Most of these have non-exclusive rights to use the photography, however some might require attribution, so make sure you read up on the licence terms.  That being said, who can beat free?

Make sure that after you download the images to rename them.  This of course will help you organize your photos, but also is great for SEO!  I wrote a story about images and SEO here if your interested in  learning more.

Also, if you are passing these on to a designer to develop a site, download the largest image size available.  Most professional WordPress designers have access to photoshop to resize the images to the perfect dimensions for your needs.

Picking the right file type

There are a ton of file types out there for images, however, the most common will be JPG, GIF, or PNG.  Each has a strength or weakness, and can affect how large of a file size you end up up with.

Before you pick which image type, decide on what you need this for?  Is the image a logo or a photo and does it need a transparent background?

Logos are best suited by using either a GIF or PNG as an image type.  The bonus of these is that you can set a transparent background.  However, GIF only uses a 256 color pallet and you need to pick the surrounding color (which can lead to a halo effect).

PNG is better as it can handle more colors and the transparency is spot on.  I almost never use GIF files anymore.

For photos, always choose a JPG for the file type!  A PNG will look just as good, however, the file sizes increase dramatically.  For example I saved a 1200px X 700px file in photoshop in both formats.  The PNG file turned out to be 1.2MB, while the JPG file was only 121K! Now that is an awesome savings!

If you save a file as a JPG, you can also adjust the quality of the photo to save size as well.  A safe and good bet is to always choose 60-70% as this will lead to a great image size without sacrificing quality.

If you need to edit, crop or save an image to different sizes, there are a lot of free online image editors out there.  Just do a google search for “Free online image editor”.  I didn’t spend much time on researching this as I have Adobe Photoshop installed on my computer.  However at first glance I think Pixlr (https://pixlr.com)

I think I’ll write a future blog comparing the online editors to find the best

Scale your images

Making sure your image is the right dimensions can also help with file sizes as well!  When picking images, remember that you can always scale an image down, but you will loose quality if you scale it up.

Your typical phone camera even has way too large of photos for the web.  For example my iPhone 7 (yes I need to upgrade :), produces images that are 4032px X 3024px.  Scaling this down can save a ton of size!  If it’s a fullscreen image, I usually can get away by having a width of 1400px.

Rename your images!

After you spent some time on resizing, optimizing and reformatting your images, take some time to name them properly.  Google searches though your images as well, so this is very important for SEO.

For example.. if you had an image of a Chicago hotdog, and your image was originally IMG_2453.jpg, name it instead chicago-hotdog.jpg. Now google will index your image with the keywords “Chicago” and “Hotdog”.  Don’t put spaces in your image names, instead use hyphens “-” as google will treat those as space.

SEO

Now that your images are properly formatted and you upload them to wordpress, you need to worry about the “Alt text”.  Don’t worry about the other fields, unless you are adding captions.  The reason the Alt text is important is that it describes your images to the search engines, it shows up if the image is missing, and helps with screen readers.

Now in the example above for renaming the image, I asked you to not use spaces, but replace those wiht hyphens.  The reverse is true for the Alt tag.  Ie… if your image is of a Chicago hotdog, rename the file to “chicago-hotdog.jpg” but put “Chicago hotdog” in the alt field in WordPress.