business & technology for wedding and lifestyle pros

Using Images In Blog Posts


Some of the most common questions people encounter as they begin blogging revolve around images: how to credit them, what the copyright regulations are, and general, proper blog image etiquette.

Using Images in Blog Posts

Images and the Fair Use Doctrine

First up, the legalities: images are copyright to the photographer. Unless you are the photographer, you have received permission from the photographer, or they have licensed their work for creative commons, you are using any images you post under the US government’s doctrine of “fair use”.

You should read this short page for the complete information about fair use but to paraphrase, there are four factors at play:

  1. The purpose and character of the use (commercial? non-profit?)
  2. The nature of the work itself
  3. The amount used of the work as a whole
  4. The effect of your use upon the market value of the work
Blogging Etiquette

As you can see on the copyright office’s page, the entire fair use area is gray. Here are a few things that are absolutes:

  • Getting approval from the owner means you are in the clear to use the image.
  • A creative commons license (which many bloggers who take their own photos provide in the terms and conditions of their site) means you are clear to use the image.
  • If the owner of an image asks you to take it down, take it down.  Period.
  • You should ALWAYS credit the owner/photographer.  Even if you have permission.  Even if it’s creative commons.  Unless it’s your image, or a stock image that does not require crediting (aka “attribution”), this rule should be followed 100% of the time. For example, the image above is a no attribution required stock image.
  • Pinterest is never the source of an image.  I repeat – your image credit should never be to Pinterest.  There is a photographer/blogger behind that pin who brought the amazing content to light.
Tips for Bloggers

If you are a blogger yourself, it is a great idea to have a policies or terms page on your site, telling your readers whether or not they are free to use the photos (and content) that you have posted and in what manner.

When you post images that you do not own, I think it bears repeating that you should always credit the photographer.  If you found the image on a blog other than the photographer’s, you should also credit the source of the information and any sources that they have named. It doesn’t cost anything to be nice and give credit where credit is due!

Bloggers and photographers, do you have tips to share on image etiquette or guidelines for usage?

Chime In

Basics of a WordPress Theme


Now that you have installed WordPress and know how to install WordPress plugins, it’s time to learn the basics of a WordPress theme! Themes hold the files that tell the browser what to display and how it should look.  If you remember from this post, PHP gets turned into HTML and that tells the browser what to display.  In coding language PHP = “get”.  CSS tells the browser how the html you have coded should look.

Basics of WordPress Theme

Photo: © Studio Firma / Stocksy

WordPress comes pre-installed with three themes, including the latest default theme, Twenty Fifteen.  Let’s take a look at the files in the Twenty Fifteen theme and see what they do.  Don’t worry if all of this is very confusing now!

PHP files control what is displayed

index.php – Displays your main blog page.  Includes PHP calls for all of the files that control how your main blog page is displayed.  Includes code for your main blog pagination.

header.php – The header file essentially sets up the page and includes PHP calls to “get” the CSS files for the theme, the blog information and title from your WordPress options, and your header image.  It also calls WordPress itself from your server and includes the opening html for the body of your page.  There can be much more included in here (and we’ll get to that when we talk about more complex coding).

footer.php – “Closes” your page in the browser.  Calls the WordPress footer.  Also typically includes any credits, copyright info, etc that you want to display.

single.php – Displays a single post.  Includes PHP calls for all of the other page elements that you display on a single post type. The post type’s content is called in content-[POST-TYPE].php.

content.php – Displays the content of a WordPress post with the “standard” post format, including its title and body.  The author bio is called in author-bio.php.

author-bio.php – Displays information about the post’s author.  Pulls from the WordPress user information fields.

content-link.php – Displays the content of a WordPress post with a “link” post format, including its title and body.

content-none.php – This file is called when a user performs an action where no results are found, including searches with no results.

page.php – Displays the framework for a WordPress page and includes PHP calls for all of the other page elements that you want to display on that WordPress page.  This file usually looks a lot like single.php, but typically does not include a call to the comments template.  The page content is called in content-page.php.

content-page.php – Displays the content of a WordPress page, including its title and body.

comments.php – Displays and formats the comments for a post.  This file is typically only called from single.php.

archive.php – Displays category, tag, taxonomy, and date archives.  Includes PHP calls for all of the other page elements that you display on your archive page.

404.php – If someone is searching for something on your site and goes to a permalink that doesn’t exist, they will see this 404 page.  Includes PHP calls for all of the other page elements that you display on your 404 page.

functions.php – A super-important file that you don’t want to edit until you know what you’re doing.  functions.php basically performs like a plugin, and any PHP code in this file will be executed when you call the function from your other template files.

image.php – Displays a single image attachment and includes PHP calls for all of the other page elements that you display on a single image.

search.php – Displays the framework for search results and includes PHP calls for all of the other page elements that you want to display on the search results.  Typically looks quite a bit like archive.php.  The search results content is called in content-search.php.

content-search.php – Displays the content of a WordPress post when it appears in search results, including its title and body.

sidebar.php – Displays the sidebar widgets that you have defined; if no widgets are defined, displays a default sidebar.

back-compat.php – Contains functions to help with the theme running on WordPress versions before 4.1.

customizer.php – Contains the functionality that allows for customizations to the Twenty Fifteen theme (under Appearance » Customize).

custom-header.php – Contains the functionality that allows for a custom header in the Twenty Fifteen theme (under Appearance » Header).

CSS files control how things look

style.css – a theme’s stylesheet is where the CSS for a theme is held.  Themes can have one or many stylesheets.  CSS is pretty complicated, so for right now know that each little section of CSS is called a selector, and selectors control how whatever is inside them is displayed.

rtl.css – If you are publishing in a language that reads right to left, this stylesheet will be used.

English, please?

Let’s look at an example and maybe this will start to make more sense.  Remember single.php?  It’s the file that displays your single post page.  We’ll use a common single.php format, with the content on the left and sidebar on the right.

single.php is going to start by doing a PHP call for header.php. Remember, the header.php has already called in all of your stylesheets and WordPress itself.

<?php get_header(); ?>

Each section of your page is styled using CSS selectors inside either <div> or <span> tags.  Think of a <div> tag as a section of your page and a <span> tag as a portion of a section.  Div tags (“divs”) can either be IDs (noted with a #) or classes (noted with a .).  IDs are meant to be used once on a page, while classes are intended for items to used multiple times. Divs are opened with <div> and closed with </div>.  The header.php file probably had several divs to display your header image, menu bar, etc.  In single.php the main content area of your page is also enclosed in a div tag.  Let’s call it “primary”.  When you include a div or span tag in your php file, WordPress will look in your stylesheet for the div or span tag name and display the results using the CSS selectors assigned to that tag.  Because we are calling a single post, the class of this primary div will be “content-area”.  We’ll also tell the browser that this is the main content area.

<div id="primary" class="content-area">
     <main id="main" class="site-main" role="main">

The template is then going to ask the WordPress database for the data from the post itself. This portion is referred to as “starting the loop”.

<?php while (have_posts()) : the_post(); ?>

Once it knows what the post is, the theme calls the appropriate content template file for the post’s format.

<?php get_template_part( 'content', get_post_format() ); ?>

If the post has no post format (let’s say it’s just a standard blog post), it will look to the file content.php. content.php lets the browser know that this is an article, with both header and content sections.  The WordPress function the_title(); calls the post title and the WordPress function the_content(); calls the post content.  To simplify:

<article>
     <header class="entry-header">
          <?php the_title(); ?>
     </header>

     <div class="entry-content">
          <?php the_content(); ?>
     </div>
</article>

That’s pretty much it for content.php. Once content.php has finished its display, we return to single.php.  single.php would next typically include a call to your comments.php file.

<?php comments_template(); ?>

Now we’ve “looped” through a complete post, so we’ll tell WordPress we are done.

<?php endwhile; ?>
</main>
</div><!-- closes .content-area #primary -->

Lastly, we’ll call the sidebar and the footer.  Remember, the footer closes the page, so after the footer is called, single.php has done its job.

<?php get_sidebar(); ?>
<?php get_footer(); ?>

This is a lot to wrap your arms around, I know!  But I hope it’s starting to make some sense, because we’re going to be talking a lot more about themes as we start to edit each of the theme files, make new theme files, and add in awesome new functionality!

Any questions so far?

Chime In

Google Analytics Advanced Segments


I’m sure most if not all of you know about the awesome tool that is Google Analytics.  It’s free, there are multiple wonderful plugins to integrate it with WordPress (I use Yoast’s plugin), and when used correctly, you can track all kinds of interactions with your website.

Google Analytics Advanced Segments

One of the easy features to implement is the Advanced Segment feature.  Advanced Segments require no updates to the Analytics code on your site, only a little bit of configuration within Google Analytics.  I use Advanced Segments for a variety of things, but one important use is to track how readers from a specific referring source interact with your website.

Creating an Advanced Segment

Let’s say I want to see how readers from Pinterest interact with my website. First, log in to Google Analytics and access your website profile. Click on Add Segment.

Google Analytics Advanced Segment Tutorial

Click the red New Segment button and give your segment a name. We’ll call ours “Pinterest Visits”. Select Traffic Sources. In the Source field, leave the condition as “contains” and in the value field type pinterest.com. Click save.

Tutorial on Google Analytics Advanced Segments

Now, navigate back to your Google Analytics dashboard. Click on the Add Segment button again. Search for pinterest, find your recently added segment, and click apply.

Using Advanced Segments

Your Dashboard will now show you how “All Sessions” and “Pinterest Visits” stack up to each other!

Analyzing Data with Advanced Segments

Now to take it even further, let’s say you sell a product and have a checkout page on your site.  If people successfully check out, they are taken to a “thank you” page.  That thank you page represents your sales conversion page.  With Advanced Segments you can now see how many visitors from Pinterest are converting into sales.

Navigate to Behavior » Site Content » All Pages.  In the search field, type /thank-you/ (or the slug of your order success page) and click the magnifying glass. Voila! Data showing you how many sales conversations you received from Pinterest visitors.

Of course, this is also useful for other page views, such as how many visitors are viewing your contact page, and other referring sources, such as external advertising you might purchase. Coming soon, we will talk about Google Analytics Event Tracking and how to combine Event Tracking with Advanced Segments, which is where the real fun comes in!

So have I inspired you to try out Advanced Segments?  How will you apply them to your site analytics?

Chime In

Installing WordPress


For the vast majority of you, installing WordPress will be an incredibly simple exercise.  Most hosting companies offer a one-click install package, such as Fantastico or Softaculus.  So mosey on along to your hosting provider’s interface and tell it to install WordPress already!  If your hosting provider does not have a one-click install, you will need to download the latest WordPress package and follow these instructions for installation.

How to Install WordPress

As you might remember from this post, WordPress needs a MySQL database to run.  You will need to define a database name for your MySQL database, a table prefix (usually wp_), a URL to install WordPress to, and a MySQL database username and password that WordPress will use to connect. A one-click installer may select the database username and password for you, so don’t worry if this isn’t one of the options available.  You may also get the option of selecting an admin username and password.  If so, take advantage, as “admin” is the most common username tried by hackers.

So, for example, if you are want people to visit your blog at www.mycookingsite.com/blog you might choose:

Database name = mycookingblog
Database prefix = wp_
URL to install WordPress = www.mycookingsite.com/blog
DB username (if asked) = your FTP username
DB password (if asked) = 0987fed654cba321
Admin Username (if given the option to select one) = johndoe
Admin Password (if given the option to select one) = 123abc456def7890

Take careful note of your username and password.  I recommend choosing a 16-character randomly generated password (something more secure than the one above, obviously!).  The database username and password are stored in a WordPress file called wp-config.php that will be automatically created for you by your installer.  Any time you change your password (which you should do relatively often, for security purposes), you will want to update wp-config.php.

If you are using a one-click installer, you will receive an email from your hosting provider once WordPress is successfully installed on your server.  Go ahead and go to WordPress and log in.

The login location for My Cooking Site would be: www.mycookingsite.com/blog/wp-admin

Username = admin OR your johndoe
Password = given in your installation email OR 123abc456def7890

Welcome to WordPress!

There are a few things that you will want to do immediately.

Delete the “admin” user. If your installer did not give you the option of selecting a custom admin user, you’ll want to:

  1. Navigate to Users » Add User.  Create a new user for yourself.  Make sure that author name is the one that you want to be visible inside WordPress.  Give that new user the role of Administrator.  Make sure that you choose a password that is secure and different from your database password.  Again, I recommend a 16-character randomly generated password.
  2. Log out of admin and in with your new username.
  3. Navigate to Users » Add User.  Delete the admin user.  Hackers target blogs that are easy to get into, and the first username that they will try is ‘admin’.  Make yourself less susceptible by deleting the user.

Adjust your basic settings.

  1. Navigate to Settings » General.  Update all of the fields.  Be sure that the “Anyone can register” box is unchecked.
  2. Navigate to Settings » Reading.  Select the box that says: “Discourage search engines from indexing this site”.  We’ll uncheck this box once your blog is styled and ready for the world to see!
  3. Navigate to Settings » Permalinks.  Choose either “Post Name”, “Day and Name” or “Month and Name”.  Leaving the default is bad for SEO (search engine optimization purposes).  A post URL of www.mycookingsite.com/blog/?p=123 means nothing to Google; a post URL of www.mycookingsite.com/blog/2010/01/brownie-recipe is much more descriptive!

Remove WordPress default content.

  1. Navigate to Comments and delete the initial comment that WordPress creates.
  2. Navigate to Posts and delete the “Hello world!” post.
  3. Navigate to Pages and delete “Sample Page”.
  4. Navigate to Plugins and delete the “Hello Dolly” plugin (unless you really love the song Hello Dolly!).

Voila – you have WordPress!  The next post in this series will be all about plugins!

Chime In

Google Analytics Site Search


Google Analytics is one of the most powerful tools for your website. It’s widely regarded as the industry standard, and data from GA provides a wealth of statistics about your visitors, most notably: the pages visited on your site, referring sources, and interaction with the various sections of your website. We’ve previously talked about Advanced Segments and how to configure them. Today, we are going to enable a little feature that isn’t on by default: Site Search.

If you have a search form on your site, Site Search is for you. Google Analytics Site Search will track your users’ search terms, time on site after searching, number of pages visited after searching, and number of results found. To enable this optional feature, sign into Google Analytics and visit your property. Click on Admin. You will see your Account, Property, and View. Underneath View, click View Settings. Change the Site search Tracking to “On”. Add in your site’s query parameter (fancy jargon for the prefix to your searches). If you are using WordPress, this is normally just “s”. Save and voila – you will begin collecting data on your visitor’s searches!

Google-Analytics-Site-Search

To see your Site Search data in Google Analytics, navigate to: Behavior » Site Search » Overview.

I’ve found Site Search to be helpful in a few ways:

  • The obvious: discover what your users are interested in finding (some of these will surprise you!)
  • The ability to target specific search results pages with coding or ads
  • Determining how users who search convert to a specific activity or goal

So go ahead, turn on Site Search and grab some extra data (because everyone loves data)!

Chime In

TO TOP