business & technology for wedding and lifestyle pros

You Need a Test Site


Big red flashing word of warning!

Be super-careful when you are following these instructions and be very sure not to edit the web server or database for your actual website!  Always be sure that you have backed up your database and web server before doing this, just in case.

You need a test site.

Creating a WordPress Test Site

Photo: © Studio Firma / Stocksy

So how do you set up a test site for your WordPress blog?  First, purchase a separate domain name (anything works) and set it up for hosting.  Then, take the following steps to copy your production site (the techie term for your user-visited website) to your test site.

If you are using VaultPress, you can use their automated restore to a new site feature. However, if you have a large number of uploads, the restore will take a bit of time.

Let’s say your production site is www.mycookingsite.com/blog and your test site is www.mytestsite.com/blog.

Step 1: Copy your web server
  1. FTP the following files and folders from www.mycookingsite.com/blog/ to your computer or hard drive Note that I’m ignoring your wp-content/uploads folder, as there is really no need to upload your image library):
    • wp-admin
    • wp-content/themes
    • wp-content/plugins
    • wp-content/upgrade
    • wp-content/index.php
    • wp-includes
  2. On your computer or hard drive, delete the plugin folder for Jetpack if you have it enabled.  This is to insure that you do not confuse the WordPress stat engine when you create your test site.
  3. FTP all of the individual files that are at the same level as the wp-admin, wp-content, and wp-includes folder to your computer or hard drive.
  4. FTP all of the files from your computer or hard drive into www.mytestsite.com/blog/.

You’ve now made a copy of everything on your web server except your images (no need to have these on your test site).

Step 2: Copy your database

If you are using VaultPress:

  1. Navigate to your Backups.
  2. View your most recent backup.
  3. Click the Download button and select only the Database.
  4. Prepare backup and wait for VaultPress to email you with the link to your backup.
  5. You will receive a gzip file containing your database tables.

Non-VaultPress Option:

  1. Download the nifty WordPress Database Backup plugin.
  2. Go to Tools » Backup and run a backup of your entire database.

Step 3: Import your database

  1. Create a new SQL database through your web hosting company.
  2. Through your web hosting company, there should be a service called phpMyAdmin.  Log into phpMyAdmin using the username and password for your database.
  3. Select your newly-created database in phpMyAdmin and click on the “Import” tab.
  4. Browse for your backup file, be sure that the format selected is “SQL”, and click Go.
Step 4: Update your test database’s WordPress options
  1. In phpMyAdmin, click on your test database, and the table wp_options (or wp_xxxxxx_options).  BE SURE YOU ARE IN YOUR TEST DATABASE.
  2. Find the option name “siteurl”.
  3. Click the pencil on the siteurl line to edit the information.
  4. Change the siteurl to your test site.
Step 5: Update your wp-config file
  1. In FTP, navigate to the root of your TEST WordPress installation.  In our example this would be www.mytestsite.com/blog.
  2. Open the file called wp-config.php
  3. Change the values for DB_NAME, DB_USER, and DB_PASSWORD to your test database information.
Step 6: Validate
  1. Visit www.mytestsite.com/blog/wp-admin and log into your test site.  You will log in with the same username and password as your production site.
  2. Verify that your test site is visible at www.mytestsite.com/blog.

Voila!  A perfect copy of your blog.  Use your test site to edit your theme, install new plugins to play with, develop new functionality, test upgrades of WordPress or plugins, etc before applying the changes in production.

A few notes:

  • If you aren’t on WordPress, but instead have an HTML website, you should still have a test site.  Simply FTP the files from your web server to your computer, and then FTP back up to your new domain.
  • Your web hosting provider should also allow you to easily password-protect your test site’s domain.
  • You should also read the WordPress Codex articles about Restoring Your Database From Backup and phpMyAdmin.

Edited To Add: See comments below for some reasons why you need a test site – this can include changes to your WP theme, or testing out plugins and new functionality, and creating new page templates – and also a shortcut method that doesn’t involve a whole backup of your production site.

Chime In

What The Bachelor Teaches Us About Business


Let’s face it, a lot of us are fans of horrible reality TV, including The Bachelor.  But we if dive in a little closer, we can see that we can actually learn something from the “journey”…

Business-Lessons-from-The-Bachelor

Photo: © ABC

Lesson 1: Not everyone is your soul mate

The Bachelor has 25 amazing women to choose from. Of course, his connection will be stronger with some than with others.

So how does this translate?

  • Not every client is your client.
  • Not every potential sponsor is right for you.
  • Not every guest blogger fits your aesthetic.
  • Not every blog/website/magazine/etc is a good fit for your advertising needs.

It took me a long time to come to terms with this. It’s hard to feel comfortable with saying no! But in the long run, it’s in your best interest to know your business or your blog well enough to make an informed decision about who you should work with and where best to spend your time and money.

Lesson 2: The popular choice isn’t always the right choice

Remember Bachelor Jake? Polls showed that most viewers wanted him to choose Tenley, but he followed his heart instead and proposed to Vienna.

There will inevitably be a time where you have to choose a path for your business. Perhaps it’s a price increase, a geographic move, or a new product you want to introduce. Your decisions won’t always be popular among the masses, and that’s OK. If you have evaluated and determined your course of action – stick to your gut and believe in yourself, because what’s right in everyone else’s eyes isn’t always the right choice for you.

Lesson 3: Sometimes you just have to let go

Megan left Chris’s season of The Bachelor when she knew the “spark” wasn’t there.

One of the most difficult problems faced in business is when to let go – of an idea, of an employee, of a product line, etc. There is no right answer. It’s of course different in each situation, but the key is learning to recognize when it’s time to cut the cord, and when you make the decision, confront the problem directly, make an action plan, and follow through.

Lesson 4: First impressions are important

On episode 1 of Ben’s season of The Bachelor, the all-important initial first-impression rose went to Lindzi, who was also one of the final two ladies.

We all know the old saying “you never get a second chance to make a first impression”. It’s cliche, but it’s true. Most first impressions are now made online, when someone is researching service providers or reading past reviews of products. Potential customers or clients may find your Twitter feed, personal blog, Facebook page, and of course your website.

  • How do you present yourself online?
  • How does your website/blog reflect on your business?
  • Is the branding consistent with your intended message?
  • Is what they see representative of what they get?

Lesson 5: It’s OK to admit you were wrong

Even if you aren’t a fan of The Bachelor, you may remember the absolutely wild After the Final Rose where Jason broke up with the winner, Melissa, only to ask Molly to date him again.  Jason and Molly have now been married for 5 years and have a daughter, while Melissa married a former boyfriend and has two children.

It’s inevitable that we will all make bad decisions.  Handling success is easy, but handling failure and accepting our bad outcomes is so much more important, in life and in business.  It’s OK to make bad calls, to admit you were wrong, and to try, try again.

Of course, there are many other life lessons we can learn from The Bachelor, most of which are quite obvious to non-reality-TV contestants!  What have you learned from watching The Bachelor?

Chime In

The Midas Whale


Several seasons ago, there was a duo on the Voice by the name of Midas Whale. Legend has it, one member of the duo asked the other if he wanted to form a band, and he replied “Might as well”, and thus the name was born. From then on, in the office, each decision we made because we “might as well” was referred to as a Midas Whale.

The Midas Whale

Photo: © Dreams by the Sea / Etsy

Over time, I’ve come to the realization that though he may originally appear cute and harmless, the Midas Whale is a dangerous predator. It’s so easy to follow the Midas Whale that the best alternative may be left by the wayside.

Perhaps:

  • You’re going down the path of least resistance.
  • You might not truly want to take the route, but you can’t think of a reason not to.
  • Your first choice wasn’t available, so this is the next best thing.
  • Other people are doing it, so you think you should as well.

Before following the Midas Whale, ask yourself:

  • Is there another course of action with a higher potential upside?
  • Am I doing this because it’s easy, or because it’s best?
  • What do my instincts say about the choice?
  • Am I swimming with the current (pardon the pun) or simply being carried along?

Have you followed a Midas Whale? How did you feel about your decision?

Chime In

Adding a Visual Editor Stylesheet


By default, WordPress’ visual editor looks a bit boring, and might not be very reminiscent of your actual post’s look and feel. Today, we’re going to change all that by adding in a visual editor stylesheet to your WordPress theme.

Visual Editor Stylesheet in WordPress How-To

Photo: @Minamoto Images / Stocksy

What’s a visual editor stylesheet?

A visual editor stylesheet replaces the WordPress post editor defaults with your own theme’s styles, so that as you are crafting your post, you are able to immediately see the end result. Adding in this functionality isn’t necessary if you don’t have a lot of custom styling in your posts, but if you are using special fonts, image alignment, or even items as simple as custom bullet points, you may love this feature!

You’ll want to perform all of the steps below in your test site first, to be sure you have it down before replicating in your actual production site.

Below, my visual editor with the WordPress defaults:

WordPress Visual Editor Stylesheet How-To

Step 1: Edit functions.php

First, we’ll want to tell our WordPress theme that we want to use the visual editor stylesheet functionality. Add the following code into your theme’s functions.php file:

/**
 * Add editor stylesheet
 *
 */
 add_editor_style();

Step 2: Create your editor stylesheet

Log into your favorite FTP client (refresher on FTP here) and FTP down your theme’s style.css file to your computer. Change its name to editor-style.css, and FTP it back into your blog’s theme directory.

Step 3: Edit your editor stylesheet

In your WordPress dashboard, navigate to Appearance » Editor. You should now see your editor-style.css file. Click on it, and let’s edit it. Remember, none of the changes we’ll be making to this file will affect your front-end appearance, only what you see when you are creating a post.

Remove any unnecessary code, such as your theme’s container, header, footer, sidebar, widget, form styles, etc. You’re only looking for the styles that apply to your posts. If your theme’s CSS file is well-commented or well-sectioned out, this part should be easy.

Because the visual editor isn’t encased in your WordPress theme, you will want to remove any ascendant CSS selectors. For example, your theme (like mine) may have a class that applies only to post text. My ascendant selector class is .post_text, and the .post_text class precedes all of my CSS within posts. Where my style.css file says:

.post_text a, .post_text a:visited { 
	color: #aaa;
	text-decoration: none; 
	outline: none; 
	transition: color 100ms linear 0s;
}

, my editor-style.css only says:

a, a:visited { 
	color: #aaa;
	text-decoration: none; 
	outline: none; 
	transition: color 100ms linear 0s;
}

Also, any code directly in my .post_text CSS went straight into my editor-style.css file’s body tag, like so:

body {
	line-height: 1.5em;
	padding: 20px;
}

This process may take a little trial and error, but if you’re using this functionality, you probably know what custom code you are adding into your posts, and those are the classes you’ll want to have in your editor-style.css file.

Tip: If you are a bit blind (like I am) and your theme contains relatively small fonts, you may want to up the font sizes in your visual editor stylesheet to make it easier to see as you are writing your posts.

Step 4: Import custom fonts

If you are using custom fonts in your theme, such as Google Fonts, Typekit, or Fonts.com, you will need to import these into your visual editor stylesheet using the @import command and the CSS instructed by the font provider. This code can go at the top of your visual editor stylesheet. Example for the Google Karla font:

@import url('http://fonts.googleapis.com/css?family=Karla:400,700');

Step 5: Add a dropdown for custom styles in your visual editor

The excellent TinyMCE Advanced plugin allows you to add/edit the buttons in your WordPress visual editor. Install the plugin, then, under Settings -> TinyMCE Advanced, set up the buttons as you like them, and under Advanced Options check the box for “Load the CSS classes used in editor-style.css and replace the Formats button and sub-menu.” This adds a Formats dropdown to your visual editor, where you can easily select any styles in your editor-style.css for use in your posts.

Your visual editor should now look something like this:

Add a Visual Editor Stylesheet in WordPress

Much better, yes?

A few final tips:

  • It bears repeating, do this process in your test site first, as you are editing your theme’s functions.php file and installing a plugin.
  • If you are using caching of your site, disable it while you put the code into production, and purge your cache after making all of your updates.
  • Don’t forget that you can make custom changes to your editor-style.css that don’t affect your style.css file, such as making your fonts larger for easy editing.

Have fun with your new editor stylesheet!

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

TO TOP