The Blog

Latest from Confluence

This is our blog page. I frequently post things about industry trends or Confluence projects. I also use this page to test new things such as Tabs, Accordions, Google Maps… As you can see, I am currently testing Bootstrap Accordions and the “.collapse” and “.in” classes. This page will likely change from time to time. Who knows, maybe next week I will switch it to use tabs or perhaps I will change the layout by adding a new column or two.

Feel free to drop us a line or stop by the office if you have any questions, comments, or thoughts about taking your online presence to the next level.


Arial view of Eagle from a recent flight with a friend.

This morning I read an interesting post about a woman that built a website using Godaddy’s DIY (Do it yourself) Website Builder.  Her expectations were that she could do it herself and immediately start seeing results.  After spending the time to do the site, she isn’t satisfied.  She even said, “GoDaddy makes all these claims about what they do for your site, but it just doesn’t happen.”

Unfortunately, companies like Godaddy, Wix, Squarespace, and even WordPress Theme Marketplaces such as Themeforest and Template Monster make it sound like anyone can build a website because it is super easy and free or at least really cheap.  Don’t get me wrong here, I think there are a lot of great website templates already made for WordPress, but what you see when you view their ‘live demo’ doesn’t always mean that is what you are going to get when you are done.  The fact of the matter is that to do it right, it isn’t easy or free and usually isn’t cheap.

There is a lot that goes into doing a good website.  Perhaps the most important part of doing a website is coming up with a well thought out plan.  However, in some cases, even the best plan still doesn’t mean you can or should do it yourself.  Now, I am not saying that people shouldn’t at least explore the DIY route as an option because I know that there area lot of technically savvy people out there that can figure out how to build a good website.  However, I am saying that it isn’t always easy and cheap.  Even, if you go the free route, it is almost never completely free.  For starters, for most professionals, time is money.  If you have all the time in the world, sure go ahead and give it a shot, but for most of us, time spent learning a new trade that we are only going to use once or maybe twice is time that could have been used making money.

As an example, I recently took on a task of building a new bike.  I will be the first to admit, I thought it would be a lot easier than it was.  In fact, I eventually took my bike and all the components to the local bike shop to have them complete the build.  Could I have finished it myself?  Sure, but what I found is that I was spending a lot of time watching Youtube videos and reading tutorials on things like cutting your cables to the correct length and applying the correct torque here and there…  At the end of the day, with time being money and or only doing it after hours, it was going to cost me in wages lost or lost time on the bike.  When I took it to the bike shop, they completed what would have taken me a day or more, in just a few hours.

So, in case you are thinking about doing a DIY website make sure you are prepared for the following:

  1. Do you know who your target audience is as well as your competition?
  2. Do you have a logo and a color scheme?
  3. Do you have quality photos and or videos?
  4. Have you written content about you, your business, your product(s) or service(s) that will convert lookers to bookers
  5. What is the main thing(s) you want your website to do?  I.e. Get customers to call, signup, get directions to your shop, read about you and or your services, and or buy online?

And those are the easy questions.  The following are just a handful of the harder questions:

  1. If you are going to sell something online, how will you take payment (credit card, check, cash on delivery, PayPal, etc.)
  2. Do you need a SSL?
  3. How are you handling fulfillment?  Ie, are you shipping products if so, you need to know how to charge for shipping based on size and weight and where you are shipping to…
  4. How are you handling security?  How are you going to prevent hackers and spammers from taking over your site or email?
  5. Do you have a way of taking backups of your site?
  6. Do you have an SEO plan?  Do you know the focused keywords that will get organic traffic to your site?

At the end of the day, a good website takes a lot of time and usually isn’t ever as cheap as people want it to be.  The perception that websites are easy and cheap is one that needs to go away.  The fact of the matter is that anyone (Godaddy, Wix, etc) that is selling you a cheap website, doesn’t really care if you wind up with what you want/expect.  Companies that sell cheap websites only care about quantity, not quality.  They make their money on having hundreds, if not thousands, of clients at a small monthly rate.

If you want a good website, find someone that will ask you hard questions.  Find someone that will make you think of things that you yourself hadn’t thought of yet.  Find someone that wants to learn about your audience, products and or services and will help you establish a hierarchy to your site.  You will most likely pay more upfront for your site, but you will save a lot in time spent getting it designed and built and you will most likely save money in the long run.  Depending on the type of business you have, your website should provide you an increase in sales and or an increase in productivity/business development…

Feel free to reach out to me if you have any questions about doing a new website or enhancing an existing site.

Thanks,
Scott

I decided it probably isn’t fair for me to say that companies like Wix and GoDaddy don’t, “really care if you wind up with what you want/expect.”  However, if you are paying for a $3.99/month hosting package and using their free website builder tools, you aren’t going to get someone who will write custom code, design you a great logo, read your copy to see if it sounds good and is free of typos and grammar errors.  They aren’t going to test your site on different browsers or mobile devices…  Basically, it boils down to, “You get what you pay for.”

Recently, Alex Grant reached out to me to share a piece he wrote on Security and WordPress Websites.  I have read several articles like this in the past, but Alex wrote his article in a manner in which even non-techy users can follow along.  On top of that, he really thought through all of the various parts of securing a WordPress site.  I honestly might incorporate this article into all of my project kick-off meetings going forward.  https://bestvpn.org/bloggers-guide-to-wordpress-security/

When I talk to my clients about security and hosting… I often get asked questions like, “why would anyone hack my site.  It’s not like I have any top secret data, or passwords, or credit card numbers…”, but the fact of the matter is that the hackers aren’t just looking for that kind of stuff.  Often times they hack sites for fun, or to use your site’s email server to send spam or phishing emails** from your email address.  Or like Alex mentions, they might hold your site hostage until you pay a ransom.

The point of this post, is to share with you that even as a small mom and pop business or a blogger of your hobby…  You should take a few minutes to understand some of the best practices in securing your WordPress website.

Here are a few things that I consider requirements for every one of my websites (requirements vary from case to case, but these are pretty standard):

  1. Having regular backups of your site.  Ideally, the hosting provider will do this, but if they don’t then I require something like UpdraftPlus that will do regular backups and ftp the backup to a 3rd party location such as DropBox.com.
  2. Installing security plugins such as Limit Login Attempts that lock out users who try repeatedly to break into the site.
  3. Strong usernames and passwords (passwords can’t be a word found in the English dictionary)
  4. Site Monitoring plugins such as Sucuri or WordFence
  5. Taking updates when they come out (This would only be a concern if I didn’t have backups of the site)
  6. Only use plugins that are actively being supported and updated to work with the latest versions of WP.

Anyway, Alex did a great job on this article and I wanted to help him get it out there for all of you to use as well.  https://bestvpn.org/bloggers-guide-to-wordpress-security/

**Phishing scams are typically fraudulent email messages appearing to come from legitimate enterprises (e.g., your business email and or your personal email). These messages usually direct you to a spoofed website or otherwise get you to divulge private information (e.g., passphrase, credit card, or other account updates). The perpetrators then use this private information to commit identity theft.

 

This post is long overdue.  For that matter any post would be overdue as it has been too long since my last post.  However, I am writing today to say how much I LOVE the Gravity Forms plugin.  I have used several other plugins, but to date, I have not come across any form builder plugin that works as nice as Gravity Forms.  There are way too many features for me to tell you here, but here are some of my favorites:

  1. For starters, the user interface is super intuitive and easy to use.
  2. There are tons of add-ons to support just about every integration needed.  For example, I recently did an integration with MailChimp and it was a breeze.
  3. Their documentation and support is incredible.  I recently wrote some custom code to post all form data submitted to 3rd party CRM (where their wasn’t an add-on for) and I used their gform_post_submission action hook to make a soap call to the 3rd party web service.  It worked liked a charm.  Wish I could say the say the same about the 3rd party that was accepting the data.  Lack of solid documentation on the 3rd party side caused me a lot of frustration, but again, the Gravity Forms side of things was great.
  4. Creating dynamic forms is a breeze using their ‘Allow field to be populated dynamically’ option.
  5. Showing and hiding fields based off user inputs is also a breeze using their ‘Enable Conditional Logic’.  Ie. Show if any or all fields match the following…
  6. Setting up Notifications, Routing, etc. is easy and works like a charm.

Like I said earlier, there are too many awesome features for me to list them all.  I just got doing a pretty complex form for a client and was amazed at how smooth it went so I thought why not write about it while it was fresh in my mind.  Anyway, just wanted to give Gravity Forms some love for creating such a great product.

Ok, so the time it takes may vary, but let me say that following the instructions below, will get you up and running in a child theme in no time.  It is definitely faster than trying to create a child theme from scratch.

I don’t remember how I came across this, but I sure am glad that I did.  The developer of this handy little code snippet called “Use-Child-Theme” is FacetWP and you can download everything you need from: https://github.com/FacetWP/use-child-theme

There really are just a few simple steps to get your site going with a child theme.

First, get the files from https://github.com/FacetWP/use-child-theme.

Next, find the use-child-theme.php and upload it (ftp, file manager, etc.) to your active theme.  In this example, I am using the default Twenty Sixteen theme. /themes/twentysixteen/

Then open the functions.php file of your active theme and past in the following

require_once( trailingslashit( get_template_directory() ) . 'use-child-theme.php' );

Save and then go into the wp-admin > Themes > Editor and when it loads, you will see a new link at the top asking you to activate the child theme.

use-child-theme

When done, go back to Themes and you will see your child theme.

Screenshot 2016-07-15 16.04.42

It really is that simple.  This is going to become a must have in all of my future projects.

 

I am constantly amazed at the amount of spam I get from companies claiming to be successful web agencies.  Well, I am about to show you why you should ignore those types of emails.  Most of the time, if not all of the time, they are companies that have a bot that is crawling as many sites as they can looking for a contact us form.  The bot drops the exact same thing into every form.

So, yesterday I got the following email from the Contact Us form on my website:

From: Nancy Gill
Subject: Is Your Website Mobile Optimized?

Message Body:
Hi Dear

Is your website mobile optimised? 60% of total visitors in today’s date come from mobile devices like phones and tablets.

I checked your website and there is a lot of room for improvement.

We are a web development agency who help SMBs just like yours get beautiful, functional websites at very affordable prices.

Interested?? Email me back, I’d love to chat

Thanks!!
Nancy Gill
Business Development Executive

Well, I decided to see who this person was.  Her email address was Nancy@imarkdigitalsolutions.com.  So I went to http://www.imarkdigitalsolutions.com/.  Here is what I found:

  1. They are a company based out of India
  2. They bought the following theme from ThemeForest: http://themeforest.net/item/seo-wp-online-marketing-seo-social-media-agency/full_screen_preview/8012838
  3. They swapped out the logo with their own
  4. However, the majority of the content in the site is the demo content that comes with the theme.  Including their team and taglines, guarantees, etc.
  5. Some of their pages still contained, “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper.”

Anyway, it is easy to make claims that you can boost sales and get websites to appear on the first page of Google searches, especially when you are thousands of miles away.

So, beware of these types of emails and companies.  Personally, I would never work with a team or resource in another country without having some sort of way of protecting my money in some sort of escrow account, that I can release to them when the work requested is complete.  Otherwise, you might just be sending your money into a black hole.

In these screenshots below, notice the urls.  The first two are from ThemeForest and you can see the Buy Now button ($49) and then the last two are the http://www.imarkdigitalsolutions.com/

Screenshot 2016-06-23 09.48.34 Screenshot 2016-06-23 09.48.55 Screenshot 2016-06-23 09.49.08 Screenshot 2016-06-23 09.49.25

The following is from a newsletter by Wordfence, a WordPress security company.

The news this week has been filled with the so called “Panama Papers” which have resulted in the resignation of at least one world leader, the Icelandic Prime Minister, and have caused controversy to surround others including Russian President Putin and British prime minister Cameron.

The data involved was taken from a Panamanian Law Firm called Mossack Fonseca (MF) by a hacker and reveals secret financial structures used by the powerful and wealthy to hide their assets around the world.

We performed an analysis of MF’s network and it seems that the breach may have been caused by an outdated WordPress plugin: Revolution Slider. It turns out that not updating your WordPress plugins may result in the fall of world leaders and the largest data breach to journalists in history.

Full details on our blog…

So, when you hear me talk about security and keeping your themes and plugins up to date, just remember that last line, “It turns out that not updating your WordPress plugins may result in the fall of world leaders…”

I am no longer a fan of Godaddy!  They boast award winning support, but when you want to chat with a hosting support tech, they are offline.  When you call in, their automated authentication system is just painful and when you finally get all your info entered and you have selected the type of support you want, you get told there is an approximate wait time of 25 minutes!  Is there any other way to get support when you need support?  If there is, I couldn’t find it.  Sure would be nice if they had a ticketing system where I could simply write out all my details and describe my reason for needing support and then have someone contact me.  That is the way it works at at my preferred hosting company, Flywheel.

In my opinion, Godaddy has gotten too big.

Disclaimer:  This is going to be a rant as I am currently experiencing issues with a hosting company and when I contacted them, I was notified that I was 43rd in the queue.

The more I do web work, the more I realize the importance of quality hosting. Unfortunately, quality and cheap don’t usually go hand and hand. I have been hosting websites for over a decade now and I have worked with dozens of hosting companies. Below are just a handful of my experiences:

  1. http://www.1and1.com/ – One of the first hosting companies I ever worked with (10+ years ago).  I had a site get hacked and a support tech tried to tell me it was my fault for writing bad code.  He told me that I must have had a form on the site where the hacker used a SQL injection to take over my site.  I showed him specific examples on how and why that wasn’t possible, but he insisted.  A day or so later, a mass announcement went out that that there servers were hacked at the IIS level and several sites were hijacked…  Needless to say, I moved my site and never looked back.  So, would I ever recommend 1and1.com? NO.
  2. http://hostgator.com – A client already had secured hosting at Host Gator and asked me to do a site for them. So, I did.  Not even a month later, the site was getting hit over and over with brute force attacks.  Installed some security plugins and all got a little better, but not a lot better.
  3. http://GoDaddy.com – Customer service is good, but sites always seem to be slow and it seems like Godaddy tries too hard to stand apart from all others and in doing so, they make their tools more complicated than they need to be.  On top of that, I have run into issues where sites have reached the max-input-vars preventing them from saving… Just not a fan!
  4. http://InMotionHosting.com – It seems like I am constantly experiencing issues with InMotionHosting.  Unfortunately, I have one client that can’t get access to their domain (long story) so I can’t move them to better hosting.  I tried really hard to like InMotion, but at the end of the day, I have given up and wouldn’t recommend them.
  5. http://ehost.com – Don’t even get me started.
  6. http://justhost.com – again, don’t even get me started.
  7. http://siteground.com – This is the only company that I still like for “Shared” hosting.  I haven’t really had any real issues with Siteground.com.  However, one of my sites was super slow and as soon as I moved them to http://Getflywheel.com, I saw an immediate performance increase.

Long story short, I now do as much of my hosting on “Managed WordPress Hosting” as possible.  As of now, I prefer Getflywheel, but I have heard great things about http://wpEngine.com.  Unfortunately, cheap hosting often comes with hidden costs.  If you are doing a site to blog about your travels, a hobby, etc., then you might be fine with cheap hosting.  However, if your site is for your business, don’t go cheap.  Remember, your website might be what your customers see first.  Don’t have their first impression be a bad one.  Get good hosting.  You could have the coolest website out there, but if it is slow or down, users will get frustrated and leave.

Update: I found this article few weeks after writing this post. Thought it was good because isn’t about any particular hosting company. It is just a great comparison of Shared Hosting vs. Managed WordPress Hosting.  http://www.codeinwp.com/blog/managed-wordpress-hosting-guide/

 

 

Aqua Resizer

Aqua Resizer is a great tool for ensuring that your sites images always get output at the correct sizes.  This little script by, Syamil MJ, is easy to use and works great for resizing, cropping, and scaling images on the fly.

Simply add the aq_resizer.php file to your site. I like adding extra files like this to a ‘lib’ directory, but you can put it in the root of a theme if you’d like.  You just need to know how to reference it in your functions.php file.

Using the require once command in your functions.php file, make sure it gets included.
require_once( dirname(__FILE__) . '/lib/aq_resizer.php');

Then, where ever you need to retrieve and resize images use the following code snippet:

$original_image = $project_image; // let's assume this image has the size 100x100px
$width = 360; // note, how this exceeds the original image size
$height = 240; // some pixel less than the original
$crop = true; // if this would be false, You would get a 90x90px image. For users of prior 
// Aqua Resizer users, You would have get a 100x90 image here with $crop = true
$new_image = aq_resize($original_image, $width, $height, $crop);

Note: In the snippet above, you can specify what ever image dimensions you’d like.

CMB2: This has become my favorite plugin.  I know a lot of people like Advance Custom Fields, but I got started with this one and have just been loving it ever since.  I will be doing an in depth on this in the near future.  Stay tuned, but here is a little teaser:

add_action( 'cmb2_admin_init', 'aa_projects_register_repeatable_group_field_metabox' );
/**
 * Hook in and add a metabox to demonstrate repeatable grouped fields
 */
function aa_projects_register_repeatable_group_field_metabox() {

    // Start with an underscore to hide fields from custom fields list
    $prefix = '_aa_projects_group_';

    /**
     * Repeatable Field Groups
     */
    $cmb_group = new_cmb2_box( array(
        'id'           => $prefix . 'metabox',
        'title'        => __( 'Repeating Field Group', 'cmb2' ),
        'object_types' => array( 'projects', ),
    ) );

    // $group_field_id is the field id string, so in this case: $prefix . 'demo'
    $group_field_id = $cmb_group->add_field( array(
        'id'          => $prefix . 'slides',
        'type'        => 'group',
        'description' => __( 'Generates reusable form entries', 'cmb2' ),
        'options'     => array(
            'group_title'   => __( 'Entry {#}', 'cmb2' ), // {#} gets replaced by row number
            'add_button'    => __( 'Add Another Entry', 'cmb2' ),
            'remove_button' => __( 'Remove Entry', 'cmb2' ),
            'sortable'      => true, // beta
            // 'closed'     => true, // true to have the groups closed by default
        ),
    ) );

    /**
     * Group fields works the same, except ids only need
     * to be unique to the group. Prefix is not needed.
     *
     * The parent field's id needs to be passed as the first argument.
     */

    $cmb_group->add_group_field( $group_field_id, array(
        'name' => __( 'Entry Image', 'cmb2' ),
        'id'   => 'images',
        'type' => 'file',
    ) );

}

and
<?php $hpSlider = get_post_meta( $slider_id, 'aa_slides_group', true );
    foreach ( (array) $hpSlider as $slide ) {
    $img = $title = '';
    if ( isset( $slide['message'] ) )
    $title = esc_html( $slide['message'] );
                                    
    if ( isset( $slide['image_id'] ) ) {
    $img = wp_get_attachment_image( $slide['image_id'], 'share-pick', null, array(
    'class' => 'thumb img-responsive',
    ) );
} ?>

Dashicons: https://developer.wordpress.org/resource/dashicons/#forms – for when you are creating custom post types and need an icon to display next to the name in the admin panel.
Isotope.js: I recently wrote a article on this for the Layout. https://getflywheel.com/layout/how-to-add-filters-to-your-wordpress-portfolio/
jQuery Flip: coming soon

Having a portfolio page on a website can be used for so many things.  People often think about a portfolio as a way of showcasing their recent work, often work surrounding a creative or development project.  For example, graphic designers may use a portfolio to showcase their logo, print, or website designs.  A builder or an architect may use a portfolio to showcase designs in the form of graphic renderings or as a final product.  However, a portfolio by definition is something used to hold materials such as papers, maps, drawings, photos, etc.  When talking finance, a portfolio refers to a group of investments.

The key takeaways here are that a ‘Portfolio’ has many uses and that they can hold and or group items of all types. You can use a portfolio to showcase all sorts of things like stamps, baseball cards, coins, photos, trees, places, team members, and much more.

In this post, I am going to demonstrate how to create a portfolio for your WordPress website.

Note: This post is written for more advanced web developers.  For example, I would recommend that you always do things such as this in a child theme.  Making customizations to a theme that you have downloaded from a third party (a theme that you didn’t develop yourself), means that you will not be able to take theme updates.  If you do, the theme update will wipe out all customizations.

The first thing I recommend doing is to create a custom post type (CPT).  I like doing a custom post type so that there is a clear place to add and edit portfolio items. For example, in the image below you can see that I have a site where I have created a CPT for Projects, Publications, and Reviews.  This just makes it super easy to keep my content organized.

Screenshot 2016-01-11 11.29.46

To create a CPT, place the following code into your ‘functions.php’ file

//Creating Custom Post types for Projects
function setup_projects_cpt(){
    $labels = array(
        'name' => _x('Projects', 'post type general name'),
        'singular_name' => _x('Project', 'post type singular name'),
        'add_new' => _x('Add New', 'Project'),
        'add_new_item' => __('Add New Project'),
        'edit_item' => __('Edit Project'),
        'new_item' => __('New Project'),
        'all_items' => __('All Projects'),
        'view_item' => __('View Project'),
        'search_items' => __('Search Projects'),
        'not_found' => __('No Projects Found'),
        'not_found_in_trash' => __('No Projects found in the trash'),
        'parent_item_colon' => '',
        'menu_name' => 'Projects'
        );
    $args = array(
        'labels' => $labels,
        'description' => 'My Projects',
        'rewrite' => array('slug' => 'projects'),
        'public' => true,
        'menu_position' => 5,
        'supports' => array('title', 'editor', 'thumbnail', 'excerpt', 'custom-fields'),
        'has_archive' => true,
        'taxonomies' => array(''),
        'menu_icon' => 'dashicons-admin-multisite', //Find the appropriate dashicon here: https://developer.wordpress.org/resource/dashicons/
        );
    register_post_type('projects', $args);
}
add_action('init', 'setup_projects_cpt');

function projects_taxonomy() {  
    register_taxonomy(  
        'project_categories',  //The name of the taxonomy. Name should be in slug form (no spaces and all lowercase. no caps). 
        'projects',        //post type name
        array(  
            'hierarchical' => true,  
            'label' => 'Project Categories',  //Label Displayed in the Admin when creating a new project
            'query_var' => true,
            'rewrite' => array(
                'slug' => 'projects', // This controls the base slug that will display before each term
                'with_front' => false // Don't display the category base before 
            )
        )  
    );  
}  
add_action( 'init', 'projects_taxonomy');

Note:  ‘Projects’ can be changed to just about anything.  I have used this exact same snippet to create CPTs for ‘Trees’, ‘People’, ‘Clients’, etc.

Now that we have a CPT, go into the admin and add a few sample projects that you can use to test this. Make sure you give it a title, add an excerpt, and add a featured image.

Once you have created a CPT and have added a few sample entries, you will want to display them on the front end of your site.  The next step is to create the template that you will use to display your projects.  Go into your theme directory and add a page called ‘projects-page.php’. In this new template, make sure to add the following to the top:

<?php

/* Template Name: Projects Portfolio */

get_header(); ?>

Make sure the template also contains the get_footer code:

<?php get_footer(); ?>

Once you have the basic foundation of your template in place, you will need to create the desired layout and then add the php that queries your CPT:

<?php
/* Query the post */ 
$args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
$loop = new WP_Query( $args ); //In this line we are telling WP to query the 'projects' CPT
while ( $loop->have_posts() ) : $loop->the_post(); //In this line we are saying keep looping through the 'projects' CPT until all are returned


Note:  In the query above you have started a while loop. In the code snippet below, we will end the while loop.

At this point, you have queried the CPT and now you need to display it on your website. While still working with the projects-page.php, add the following:

                                                
<?php echo '<div class="project">';?>
    <a href="<?php print get_permalink($post->ID) ?>"><?php echo the_post_thumbnail(); ?></a>
        <h4><?php print get_the_title(); ?></h4>
        <?php print get_the_excerpt(); ?><br />
        <a href="<?php print  get_permalink($post->ID) ?>">Details</a>
</div> <!-- End individual project col -->

<?php endwhile; ?>

In the snippet above, you will notice the addition of html tags. These tags control the layout of the page. It is important to include these within the while loop so that each project that is returned, gets the exact same html structure. In the code example above, the query will return the ‘Featured Image’ as a thumbnail, the ‘Title’ styled as an H4, the projects excerpt, and then a ‘Details’ link.

Note:  Because we are using a CPT, you will also need to add theme support for the post thumbnail. You may even need to define the thumbnail dimensions prior to using this code example.

add_theme_support( 'post-thumbnails', array( 'projects' ) ); // adds thumbnail support for the Projects CPT

When finished your projects.page.php should look something like this:

<?php
/* Template Name: Projects Portfolio */
 
get_header(); 

?>
<!-- ============ CONTENT START ============ -->
<div class="container>
        <div class="row">
        <div id="content-projects" class="page-wrap">
            <div class="col-sm-12 content-wrapper">
                <?php while ( have_posts() ) : the_post(); ?> <!--queries the projects-page.php-->
                    <?php the_content() ?> <!--Grabs any content added to the Editor-->
                    <?php endwhile; // end of the loop. ?>
            </div><!-- End intro/descriptive copy column-->
        </div> <!-- End intro/descriptive copy container-->
    </div>
        
    <div id="projects" class="row">        
    <!-- Start projects Loop -->
        <?php
        /* 
        Query the post 
        */
        $args = array( 'post_type' => 'projects', 'posts_per_page' => -1 );
        $loop = new WP_Query( $args );
        while ( $loop->have_posts() ) : $loop->the_post(); 
                                                    
        <?php echo '<div class="project col-sm-6 col-md-4">';?>
            <a href="<?php print get_permalink($post->ID) ?>">
                <?php echo the_post_thumbnail(); ?></a>
                <h4><?php print get_the_title(); ?></h4>
                <?php print get_the_excerpt(); ?><br />
                <a class="btn btn-default" href="<?php print  get_permalink($post->ID) ?>">Details</a>
        </div> <!-- End individual project col -->
        <?php endwhile; ?>
    
    </div><!-- End Projects Row -->
</div><!-- End Container --> 

<!-- ============ CONTENT END ============ -->

<?php get_footer(); ?>

Final Note:  Your html and css classes will need to be adjusted accordingly to match your website design. In my example, I am using Bootstrap to create my layout and I have created classes such as project and page-wrap…

KTC Consulting and Confluence Web Solutions partnered to redesign the Maximum Comfort Pool & Spa site.

mcps-homepage

This was a small site for the Colorado Emergency Services Association Safety Group: http://cesasafetygroup.com/

  • It features a slider that will allow for promoting upcoming meetings.
  • It utilizes a calendar for scheduling events.
  • Document management system to house all the forms associated with getting a cost containment certification

cesa

 

 

 

I’ve been seeing a lot of spammer and hacker traffic lately.  Thanks to plugins such as Wordfence, I can even see where the traffic is coming from.  Now, I realize that they are most likely using fake IP address, but it still allows me to see that I am getting a lot unwanted traffic from places like China and Russia.  The Wordfence plugin even alerts me every time there is a successful and failed login to my site.  It even shows me that they are trying to login with usernames such as, ‘admin’, ‘user’, etc.  So, how am I protecting myself here?  Well, first of all I use the above mentioned plugin called ‘Wordfence‘.  I also use ‘Limit Login Attempts’ to lock usernames out from trying to gain access with Brute force attacks.  In some of my sites, I use a Google Recaptcha plugin on the login page as well as contact us forms, which checks to see if the user is a bot.  In other sites, I use the Clef plugin which requires the user logging in to use their phone and a password on their Clef app installed on the phone.

Other things you can do:

  1. Set up two factor authentication – this generally requires using a normal username and password, but then getting a random code sent to your iphone via email or text message, which then needs to be entered.
  2. Hide your WordPress site or rename/move your login page.
  3. There are several other good plugins to use, but these are just a few that I like.  I do also like the Sucuri Security plugin.

Spam Bots/Referral Spam

What a pain these guys are.  For the most part, these spammers aren’t even a threat, but they really mess with your analytics. These get recorded as sessions/site visits even though they are not real humans visiting the site.

There are three kinds of bots:

  1. Ghost referrals – these visits are called Ghost because they never access your site, so although they show up as a session/page visit in your analytics, they really never even enter your site.  All they really do is hit your Google Analytics account.  They have scripts that randomly generate GA id numbers and when they find a match they shoot fake data to the GA servers.  Because they are not true visits to your site, they can not be blocked via the .htaccess file.  The only way to stop ghost spam in Google Analytics is with filters.
  2. Fake referrals/bad crawlers – These are actual bots that are crawling your site with some sort of purpose.  Ie.  they are generally looking for things.  It could be a way to hack into your site, it could be looking for an open comment field so that they can paste in links for Nike Air Jordan’s, fake Rolex Watches, Viagra…  These crawlers actually visit your site.  They usually ignore rules specified in your robots.txt file.  That being said, they can be blocked via the .htaccess file.
  3. Good bots – We want these to crawl the sites.  These are Yahoo, bing, Google, etc.  These bots generally obey the rules put into your robots.txt file.

If you are seeing skewed results in your Google Analytics such as the following, give me a call.  I can help.

Screenshot 2015-06-17 09.56.13 Screenshot 2015-06-17 09.51.48

WordPress Security

Security is currently a very hot topic for WordPress Users

Over the last 3-4 weeks there have been several warnings around security vulnerabilities followed up by several updates to plugins and core WordPress to patch those vulnerabilities.  At Confluence Web Solutions, we have decided to go a step further in protecting our site.  Last week we installed the Sucuri WordPress Plugin: “Sucuri Security – Auditing, Malware Scanner and Security Hardening“.

https://wordpress.org/plugins/sucuri-scanner/

Right out of the gate we liked this plugin for the following reasons:

  1. It will scan your site and let you know if your site has been infected in any way.
  2. The scan results will also let you know if there are any existing vulnerabilities.  For example, it can help by letting you know where disabling of PHP execution is needed, thus reducing access in key locations such as the wp-config.php file, the .htaccess file, and directory browsing…

There are several other reasons why this plugin is great, but here is another.  The plugin will monitor, log, and report failed login attempts.

If anyone has ever read any of my prior posts around WordPress Security and Hardening your sites, you would know that I NEVER use ‘admin’ as a username.  So, this morning when I received the following email, I know that someone/some bot is finding my login page and trying to gain access by using ‘admin’ as the username.

Subject: Failed Login

Login Info:
Time: May 13, 2015 8:41 am

Website Info:
Site: http://confluence.solutions
IP Address: xx.xx.xx.xxx

Notification:
User authentication failed: admin

Explanation: Someone failed to login to your site. If you are getting too many of these messages, it is likely your site is under a brute force attack. You can disable the notifications for failed logins from here [1]. More details at Password Guessing Brute Force Attacks [2].

Once again, WordPress has released a new update.  We are now up to Version 4.2.2 and once again this is a critical security update released to patch cross-site scripting  vulnerabilities.  The cross-site scripting vulnerability was contained in an HTML file shipped with recent Genericons packages included in the Twenty Fifteen theme as well as a number of popular plugins.  That being said, you are probably going to see a lot of updates to your installed plugins as well.

Here is the announcement posted on the WordPress site:

WordPress 4.2.2 Security and Maintenance Release

Posted May 7, 2015 by Samuel Sidler. Filed under Releases, Security.

WordPress 4.2.2 is now available. This is a critical security release for all previous versions and we strongly encourage you to update your sites immediately.

Version 4.2.2 addresses two security issues:

  • The Genericons icon font package, which is used in a number of popular themes and plugins, contained an HTML file vulnerable to a cross-site scripting attack. All affected themes and plugins hosted on WordPress.org (including the Twenty Fifteen default theme) have been updated today by the WordPress security team to address this issue by removing this nonessential file. To help protect other Genericons usage, WordPress 4.2.2 proactively scans the wp-content directory for this HTML file and removes it. Reported by Robert Abela of Netsparker.
  • WordPress versions 4.2 and earlier are affected by a critical cross-site scripting vulnerability, which could enable anonymous users to compromise a site. WordPress 4.2.2 includes a comprehensive fix for this issue. Reported separately by Rice Adu and Tong Shi from Baidu[X-team].

The release also includes hardening for a potential cross-site scripting vulnerability when using the visual editor. This issue was reported by Mahadev Subedi.”

 

https://wordpress.org/news/2015/04/wordpress-4-2-1/

“WordPress 4.2.1 is now available. This is a critical security release for all previous versions and we strongly encourage you to update your sites immediately.

A few hours ago, the WordPress team was made aware of a cross-site scripting vulnerability, which could enable commenters to compromise a site. The vulnerability was discovered by Jouko Pynnönen.”

wp-4-2-1-security-update

So, just a few days ago I posted a comment on taking WordPress updates and just today WordPress released v4.2.

Screenshot 2015-04-23 15.58.57

From what I can tell so far, this release is just an upgrade released for the purpose of enhancing the user experience…  It doesn’t appear that this is a critical security patch…

Do you need to take WordPress and Plugin updates? YES.  Now, many updates are just recommended and if you don’t take them, your site isn’t going to crash or get hacked, but a lot the updates are for the purpose of patching security vulnerabilities.  For example, the FBI just announced that ISIS has been hijacking WordPress sites and using them to spread their message.  https://nakedsecurity.sophos.com/2015/04/08/fbi-warns-wordpress-users-of-isis-threat-patch-and-update-now/

Also, Sucuri, a company that specializes in website security, just announced yesterday that cross site scripting vulnerabilities have been found in several major WordPress plugins https://blog.sucuri.net/2015/04/security-advisory-xss-vulnerability-affecting-multiple-wordpress-plugins.html

And WordPress itself announced that they have released a new version to fix any cross site scripting issues that they may have had.  https://wordpress.org/news/2015/04/wordpress-4-1-2/  In fact, here is a quote directly from their site, “This is a critical security release for all previous versions and we strongly encourage you to update your sites immediately.”

So, what should you do if you are concerned about this?  Well, if you are one of my clients, nothing because I have your back.  I subscribe to these sites and get the alerts as soon as they come out.  I then check my sites and make sure that they are up to date and have all the required security patches…

If you are hosting your own site (outside of managed hosting.  Most, if not all, managed hosting companies take care all this as well), you should do the following things:

  1. Make sure that your site(s) are up to date with the latest WordPress framework and that all plugins are updated as well.
  2. If you are not using a plugin, then you should get delete it.  Don’t just deactivate it, go ahead and delete it.
  3. Make sure that all of your themes are up to date.  Even themes that are not active.  I would even recommend that you delete themes that you don’t need or have a reason to keep.
  4. Back up your site regularly.  I use UpdraftPlus and I have backups made regularly that get uploaded to dropbox.com
  5. Harden your site.  Create strong passwords, use plugins like ‘Limit Login Attempts’ and ‘Two Step Authentication’…  Never use ‘Admin’ for your username…
  6. And if you are really concerned you can do things like implement iThemes Security which will do things like hide your login page and much much more.
  7. Also, hosting is important, the cheaper the hosting, the more concerned I would be.  Make sure you host with a trustworthy hosting company and if you are willing to pay the price Managed Hosting such as WPEngine will do all the things needed for you.  Ie, they will take backups, make sure all plugins, themes, and WordPress are up to date, force security in things like strong passwords…

So, make sure your website is safe and if you have any questions, feel free to drop me an email…

Thanks,
Scott

My answer to this question is, absolutely. Now, that being said, if your website already has a separate Mobile website, then you should be alright or at least better off than all those who just have an old school website (non-responsive). However, to have a website and a mobile site often means you have paid for two sites (increased cost) and often means that you have to update content in two places or sometimes have to manage two sets of images and content. It is possible to have a mobile site pull content and images from a normal non-responsive website, but it still means two code bases and special code to detect and redirect users based on the device type they are coming from… Long story short, a website and then a separate mobile site still means more to test, additional complexities in content loading, and more code to manage and host. So, my opinion is that responsive design/responsive website is the way to go, but don’t just take my word for it, here is a great article from Search Engine Land about how not having a mobile friendly presence can actually ding you in search.

How Much Traffic Will You Lose From The Upcoming Mobile SEO-Pocalypse?

http://searchengineland.com/much-traffic-will-lose-upcoming-mobile-seo-pocalypse-216564

I thought this was worth posting.

http://www.foxnews.com/tech/2015/03/17/microsoft-to-axe-internet-explorer/

“Many Windows users associate Internet Explorer with terrible performance and badly rendered websites, but that hasn’t actually been the case for a long time. The most recent iterations of the browser have worked well enough, yet the legacy of the monstrosity that was Internet Explorer 6 loomed large over them. Even Microsoft took shots at the browser in ads for later versions, but that wasn’t enough to remove the stigma.”

I would even go a step further and say their browser didn’t really start getting good until IE9.

“Meanwhile, the Explorer team has been on a bug hunt of late, patching over 40 IE vulnerabilities in a mid-February update, including one that was disclosed prior to the big patch day, to ensure that we stay safe while the company makes the transition.”

Over 40 vulnerabilities in IE patched this last Feb.

Anyway, people often ask what I use and I respond, Firefox or Chrome.  As of late, I have been using the new Firefox Developer Edition and have to admit that I really like it. https://www.mozilla.org/en-US/firefox/developer/

I am going to try to explain this.

Example One: @media (max-width:768px){color: font-weight: etc.}

Example one is saying for a window with a max-width of 768px use all style that fall under this query. At that size you would be talking about anything smaller than a desktop screen in most cases.

Example Two: @media screen and (max-width:768px){color: font-weight: etc.}

Example two is saying for a device with a screen and a window with max-width of 768px apply these styles. These two are almost identical except you are specifying screen as opposed to the other available media types the next most common one being print.

Example Three: @media only screen and (max-width:768px)

This is a quote directly from W3C to explain this one.

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

As there is no such media type as “only”, the style sheet should be ignored by older browsers.

We recently got a project where we needed to use custom icons with hover states.  There are several ways to do this.  In the past we might have used sprites, but in this case we opted to use SVG files.  SVG, stands for scalable vector graphics, that are created with Adobe Illustrator.

Some of the main benefits of SVG files are:

  • Small file sizes that compress well
  • For the most part they scale to any size without losing clarity
  • They look great on retina displays
  • You can use css to control colors, hover states, and you can add filters to due things like blur the file.

Of course, you can load an SVG file into a page just like you would an image (<img src=”file.svg”>), but you can also use the code within the SVG file.

You can open any SVG file in a text editor and get the source code used to created the file.  It would look similar to an XML file.
Screenshot 2015-02-22 15.29.51

And that code when rendered by a browser, displays a Twitter icon.

The nice thing about using SVGs this way, is that you can add CSS classes to it and then control things like the color and hover color. However, SVGs don’t use your typical background-color element, instead it uses its own controls such as “fill” ie. fill:#424242;

Today, I decided to implement and test the new Google reCaptcha api.  So, while doing this, I decided to also do some routine maintenance by taking updates, reviewing my security settings, etc.  While doing this, I noticed that hundreds of lock outs were being recorded in one of my log files.  Upon looking closer, I noticed that over 100 lock outs were recorded for the ‘admin’ username.  Fortunately, I never use the ‘admin’ as a username and I also use ‘Limit Login Attempts’, but it does go to show that my login page is getting found and hackers are trying to gain access.  I am sure that these attempts to gain access aren’t by humans, but humans that have written the scripts that are getting sent out through the web on bots that crawl every site it comes across looking for login forms.

The takeaways here are:

  1. Never use ‘admin’ or ‘Admin’ as a username.
  2. Installing and activating ‘Limit Login Attempts’ really does work if for no other reason than to record lock outs in the log files
  3. You can now add Google’s reCaptcha API to my login and my Lost Password pages as well as comment forms.
  4. Create strong passwords (greater than 8 characters, use both lower and upper case letters, use at least one number and one special character, and never use a word that would be found in the English dictionary).
  5. If you want to take your site’s security to the next level, you can move or rename the login page to even make it harder to find.  There are plugins that will help with this and there are services that you can enroll that will identify malicious IP address and block them from accessing the site.

I often hear people say things like, ‘WordPress is a great blogging tool, but not sure if it would work for my website’ or ‘WordPress is good for small websites, but wouldn’t work for a large website or a site that gets a lot of traffic…’

Well, let me just show you a few examples of WordPress in action that put those types of statements to sleep.

These are just a few of the thousands of examples of WordPress in action.  You can see more at https://wordpress.org/showcase/

It may have gotten its start as a blogging tool, but over the years, WordPress has evolved into a versatile content management system (CMS).  It is still popular as a blogging tool, but it now also allows you to create fully functional websites and mobile applications.

It is now estimated that about 23% of all websites out there are powered by WordPress. http://w3techs.com/technologies/details/cm-wordpress/all/all

This happens all the time. Honestly, it used to happen to me, but then I got One Password from Agilebites.com https://agilebits.com/onepassword This allows me to save all my passwords securely on my computer.  I was a mess before getting this and use to try to come up with clever passwords and I used to come up with a secret questions that only I knew the answer for and then I would store the secret question in an excel spreadsheet with hints…  What a drag!  One Password has been awesome and I would recommend it to anyone who has lots of online accounts to manage.  In my opinion it is worth every penny of the 49.99 price tag.

However, that really isn’t the point of this post.  So, back to losing your WordPress login, if the ‘Lost your password’ link is enabled on your login page and you know the email address you used, you can enter it and WordPress will send you an email to reset your password.

If you have lost both password and email or the ‘lost password’ option isn’t available, you may need to login into your hosting account and access your site’s phpMyAdmin

  1. Log into phpMyAdmin.
  2. Select the database of your WordPress site.
  3. You should see the tables appear in the left hand column.  You’re looking for the ‘wp_users’ table.  If you don’t see it, look for one with ‘xx_users’ in case you changed the table prefix.
  4. Click the “Browser” link or icon.
  5. Find the username in the right-hand content area and look for the Edit link or icon (it’s usually a pencil icon).
  6. You’ll see a list of your user information pop up.  Delete all of the text in the “user_pass” area.  It will be encrypted so it won’t show you what the password is.  Enter the password you want to change it to.  Then in the drop down menu next to it select “MD5″ option.  This encrypts the password and is how WordPress stores all passwords.
  7. Click “Go” on the bottom right and you should be all set.
  8. Go back to your site’s login page and verify your new password does indeed work.

If this all seems way to complicated, contact your web guru and have him or her do it for you.

 

Over the last few years, I have been following the works of a handful of WordPress Developers and in doing so, I have learned a lot of great tips and tricks from security enhancements to making simple tweaks to the admin interface for easier site management.

Here is one that I almost always use now:

Remove or unregister widgets that aren’t wanted and needed.  Simply add this to the functions.php file and then when you into your widgets page, all of the widgets will be removed.

Now, say you want to keep a few of them.  Well, you can add a // in front of the line with the widget you want to keep or simply remove the line of that widget.

// unregister all widgets
function remove_default_widgets() {
unregister_widget(‘WP_Widget_Pages’);
unregister_widget(‘WP_Widget_Calendar’);
unregister_widget(‘WP_Widget_Archives’);
unregister_widget(‘WP_Widget_Links’);
unregister_widget(‘WP_Widget_Meta’);
unregister_widget(‘WP_Widget_Search’);
unregister_widget(‘WP_Widget_Text’);
unregister_widget(‘WP_Widget_Categories’);
unregister_widget(‘WP_Widget_Recent_Posts’);
unregister_widget(‘WP_Widget_Recent_Comments’);
unregister_widget(‘WP_Widget_RSS’);
unregister_widget(‘WP_Widget_Tag_Cloud’);
unregister_widget(‘WP_Nav_Menu_Widget’);
}
add_action(‘widgets_init’, ‘remove_default_widgets’, 11);

Check back again for other tips & tricks I have learned over the years.

Below is my attempt to explain the Bootstrap 3 Grid.  At first this, I thought this was going to be difficult, but upon digging in and building my first site with it, I found it to be pretty straight forward.  Bootstrap 3 grids are comprised of Containers, Rows, and Columns and those are the three main components.  So, here we go.  This is a quick and to the point explanation.  A cliff notes explanation of sorts.

Containers are responsible for the width.  .container gets set to a max-width, but container-fluid extends to the width of the screen.

Containers have 15 pixels of padding on each side so that content will never hit the edge of a container or the screen.

Rows and Columns are percentage based.

All rows have a negative 15 pixel margin.

The main purpose of a row to set up your columns.

All columns float left.  Columns should add up to to fill a 12 column grid.  For example, a four column layout for a laptop and above would need to use .col-md-3 four times within a row.

Never use a row outside of a container.

Columns have 15 pixels of padding on each side.  So, when two columns are placed next to each other there will be a 30 pixel gutter between them.

Never use a column outside a row.

Offsets allow you to push a column right by adding a left margin to the side of the column where the offset is added.

Push and pull, now here is where things get interesting.  Push and pull allow you to reorganize or better yet reorder your columns.  For example, you might want columns to stack in one order for mobile, but different order for tablet or desktop.

That is the basics in a nutshell.  So, in conclusion, a layout for say a footer with 4 columns would look something like this.

<div class=“row” id=“footer”>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footOne”>Footer column one content</div>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footTwo”>Footer column two content</div>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footThree”>Footer column three content</div>
<div class=“col-xs-12 col-sm-6 col-md-3” id=“footFour”>Footer column four content</div>
</div>

Because Bootstrap is based off the “Mobile First” concept, the above html is basically telling the browser that at a mobile device (xs) each column should be set to 12 or full width.  Therefore, the four columns will stack on top of each other.

On a tablet (sm), the columns will be set to 6 wide or 50% (two columns with one set of two stacked on top of the other).

On a laptop or larger (md) each column is set to 3 and therefore, it gets rendered as 4 columns in a horizontal row (again, all columns get floated left).

UpdraftPlus – Backup & Migration tool is definitely one of our favorites.  For starters, it makes taking backups a breeze.  You can get your backups stored locally on your server or sent to remote storage in the cloud.  We recommend doing both.  It gives you the option to take backups before doing any plugin, theme, or core WordPress updates.  You can even schedule nightly, weekly, etc backups to take place on any night of the week.

iThemes Security – This day and age, security is crucial.  Unfortunately, hackers have gotten so smart and most often hack sites just for fun and bragging rights.  It is important to have a good username and a strong password.  For example, do not select a username such as ‘Admin’ and never use a password that can be found in the English dictionary.  Hackers have written scripts that will hit your login page and try every page in the English dictionary if they find your login page and the site allows them.  With iThemes, you can hide your login page, prevent Brute Force attacks, blacklist IP addresses, and much more.  Another good plugin is ‘Limit Login Attempts’

Yoast SEO – This tool is great for guiding users in selecting the right keywords to add to html titles, meta descriptions, content headings, image alt tags, and your page copy.  upon activating this plugin and telling it what keywords you believe are important, the plugin will show you your pages grade.  From there, you can tweak your content until you are happy with the rating.

Of course we like several other plugins and services as well, but we will mention some of those in later posts.  For example, we like MaxCDN and Clourdflare as well as W3 Total Cache and WP Super Cache.  Check back to learn more.

Top Four reasons you need a responsive website: https://www.score.org/resources/top-4-reasons-your-business-needs-responsive-website

  1.  “Nearly 70 percent of Americans now use their mobile devices, including smartphones and tablets, to conduct Internet searches.”
  2. “If your competitor’s site is already responsive, you can’t afford not to catch up and do the same.”
  3. “Putting money into creating and maintaining one site is less expensive than creating and maintaining one primary website and a mobile site.”
  4. “Google cares. Yes, (the almighty and powerful) Google and other search engines are favoring responsive websites in search rankings. Search engines want to provide users with the most relevant search results, so mobile users in particular will be shown responsive sites before non-responsive sites in search results.”

Everybody Scrolls: http://hugeinc.com/ideas/perspective/everybody-scrolls

“We learned that participants almost always scrolled, regardless of how they are cued to do so – and that’s liberating. While it’s hard to make universal recommendations, we’d suggest that designers use the cue that works best in its context.”

This is a WordPress site using the Bootstrap 3 Framework.