Category: HOWTOs

HOWTO: Easily Create Custom Buttons for Bootstrap

Looking to create custom Bootstrap buttons to fit in your custom design? There is a great tool available online: http://charliepark.org/bootstrap_buttons/ that allows you to select the exact colors you need in order to create a custom button class.

In the screenshot above – you can see I used the Photoshop color eyedropper to get the exact color information I needed – and then matched up the values (hue, saturation and lightness) with the eyedropper values (H,S,B). This makes creating custom Bootstrap buttons extremely easy because after selecting your values – the custom CSS class is then available for you to copy and paste into your stylesheet.

Fix Missing Padlock for SSL Sites

Ever since Google announced that they would take into account whether sites use secure, encrypted connections as a signal in their search ranking algorithms, a lot of our clients have been moving towards making their sites use SSL. Most clients find out that after moving to a SSL site – that they get a warning saying that not all items on the site are loaded securely. No fear – figuring out how to fix that is easy!

Why is my SSL web page insecure?

In order to make the entire site load using SSL without warnings any references to assets (images, fonts, CSS, javascripts, etc) must all be served securely as well. There are a number of ways to find insecure items on your site but one of our favorites which our clients can easily use as well is: Why No Padlock?. By simply submitting your site or page URL – you can see what resources are loaded using SSL and which are not – making it easy to identify and fix the issue.

Screenshot of Why No Padlock?:

Follow directions to easily fix your insecure SSL warnings

If you are looking for a quick and easy way to figure out a SSL issue – check out this free and easy to use site.

Querying Dates with the WP_Query date_query

Ever need to create a query within WordPress to show posts only before or after a certain date? In a recent project – we needed to set up a page that showed only posts after January 1, 2015, and then another with posts from before that date only in order to make a clear separation between recent/archived posts. Fortunately – this was easy by using the code below:

Using “After this date… logic

$args = array(
   'date_query' => array(
      array(
         'after'    => array(
            'year'  => 2015,
            'month' => 1,
            'day'   => 1,
         ),
         'inclusive' => true,
      )
); 
$query = new WP_Query( $args );

Note: inclusive is used for after/before, whether exact value should be matched or not.

Next time you need to do a date query – make sure you check out the date_query option which makes these sorts of queries nice and easy.

Full documentation: http://codex.wordpress.org/Class_Reference/WP_Query#Date_Parameters

WordPress Site Management with JetPack

With the recent update of the JetPack plugin – a new feature called “Site Management” has been added.

If you run multiple WordPress sites – the chances are – you are using the same plugins on multiple sites. If you would like to streamline plugin updates – you can now easily do so with the new “Site Management” option in JetPack.

How does this work?

  1. Update to JetPack 3.3 and enable the new feature by clicking “Activate Now” in the JetPack banner (seen above)
  2. Log in to http://wordpress.com/sites to view the sites you have registered, add more if needed.
  3. Choose the site you want to configure for plugin updates and see all plugins listed. Select each plugin to configure it (perhaps some plugins you will always want to update automatically, but others not). There are two options – Active and Autoupdates. (Active = plugin active vs. inactive) Autoupdate (auto update this plugin vs do not auto update the plugin)

While this makes managing plugin updates easier – make sure you consider quality assurance testing. Auto updates or mass updating plugins makes updating easy – but the need for quality assurance testing is still needed and should not be overlooked. Whether you have unit tests or do testing with user scripts – remember to still plan for time/effort after the updates.

Thanks to JetPack for taking this on. I look forward to playing around with this.

Focus on Your Code Not Your Environment

We are big fans of WP Engine. There are a lot of great reasons to use them for WordPress hosting – but one of the coolest services they offer is the ability to set up and use their staging area. Recently – we created a new theme and used the staging environment for all development. Since we loved it so much – we wanted to share on how to use it!

Staging Environments Made Easy

When we started the development – we simply went to our WP Admin area, clicked on one button “Copy from LIVE to STAGING” and within minutes – an email was sent letting us know it was all set up. All content, themes, plugins, settings – all the same as the live site. Since working with the live content, plugins, etc – is crucial for quality assurance – being able to do this in one simple step is a real time saver. We then were able to stage everything, adjust content, widgets, etc and then click on “Copy site from STAGING to LIVE” and viola – everything we changed was then in place on the live site.

Staging: Not Just For Theme Updates

While the staging environment was great for the new theme – it can also be extremely helpful for general content changes, plugin update testing, and general debugging. Want to test out a mobile theme or a new plugin? Click the staging button and test. If you like it – simply push your changes from staging to live with one click.

Thanks WP Engine for making this staging environment so simple! If you are a WP Engine user and have not used this feature – take a few minutes now and check it out.

End of Month Reminder: Review Backup Strategy

At least once a month I recommend that everyone look at their current backup plan and ask a series of basic questions:

  1. Are backups running? (verify)
  2. What is the backup schedule? (Can I access monthly, weekly, daily?) (verify)
  3. Can I easily access the backups? (verify)
  4. Are these backups available if something happens to the backup server? (verify)
  5. Do I know how to restore the data/files if needed? (verify)
  6. Is there anything we can get rid of to reduce the size of the backups? (make sure you are backing up important data/files, and not garbage which will only cause headaches) (verify)

Backups are crucial for most companies and even for your personal files. Simply thinking that backups “are running” is not enough though. Make sure you also know how to deal with a problem before it happens so when/if it happens – you have a plan. Most people also assume backups are in place or someone else is taking care of it – but we, as web developers, get too many calls from potential clients who “thought the hosting company had backups” or “relied on a developer to do the backups” but realized they had nothing (yes this still happens).

Do yourself a huge favor and take responsibility for your backups. Ensure everything is in place, working, and get a plan together for restoring everything.

Remove Menu Items From WordPress Admin Bar

Ever want to remove items from the WordPress Admin Bar? If yes – there is a simple way to handle this using a few steps:

  1. Identify what you want to remove.
  2. View the page source and find the CSS ID of the item you want to remove (see screenshot). Note whatever comes after “wp-admin-bar-“. Example: wp-admin-bar-dashboard – you would note “dashboard”
  3. Add the following code into your theme’s functions.php file and customize the “CSS ID” that you want to remove. (The example below will remove the dashboard link)
/**
 *  Remove Dashboard Link for subscribers
 *
*/
add_action( 'wp_before_admin_bar_render', 'sdac_custom_admin_bar' );
function sdac_custom_admin_bar() {
    global $wp_admin_bar;
    $wp_admin_bar->remove_menu('dashboard');
}

Customize ‘Edit My Profile’ URL in WordPress Admin Bar

A lot of sites have custom profile pages (not the general one you find in the WordPress admin > Users > Your Profile/Edit My Profile). After building an awesome edit profile page – your users log in, see the WordPress admin bar, click “Edit My Profile” and they end up at the WordPress general edit profile – not the one you want.

No worries – you can easily customize the URL in the WordPress Admin by adding the following code to your theme’s functions.php file:

/**
 * Customize Edit Profile URL in WordPress Admin Bar
 * @param string $scheme The scheme to use. Default is 'admin'. 'http' or 'https' can be passed to force those schemes.
*/
add_filter( 'edit_profile_url', 'sdac_custom_profile_url', 10, 3 );
function sdac_custom_profile_url( $url, $user_id, $scheme ) {
    $url = site_url( '/edit-profile' );
    return $url;
}

Note: Where I have ‘/edit-profile’ – you would just need to put in the page slug of your custom edit profile page. Once that is in place – log in your site and see the URL in the Admin bar now goes to your custom page.

Analyze Your WordPress Queries

There are many ways to debug and optimize WordPress, and here is one more of my favorites: save queries for later analysis (from the Codex). If you are using a complex theme, several plugins, or even a few custom plugins – you may might notice your site is either slow, sluggish, or just seems to not load as fast as you would like.

Generally people will install a free theme or plugin(s) (I have seen sites with over 100 plugins) and think “wow – I have every possible custom functionality in place and I did not have to do any custom development!” Then the same proud individual will contact us because their site is not performing as they would like.

One of the first things we do is take a look at all the queries that are used on each page load and we do that by editing two files:

wp-config.php
define( ‘SAVEQUERIES’, true );

footer.php

<?php
if ( current_user_can( 'administrator' ) ) {
    global $wpdb;
    echo "<pre>";
    print_r( $wpdb->queries );
    echo "</pre>";
}
?>

Please note – these changes should only be used when debugging. If you keep them in place – it will have a definite impact on performance.

Once you have the changes in place (assuming you are logged in as the administrator) you will be able to view each query, what function called it, and how long the query took to execute.

From the output – you should easily be able to see what queries are most expensive, what plugins you might need to re-consider, etc.

Debugging with WPDB

One of the best things about developing with WordPress is the WordPress Codex. The amount of documentation and examples makes development and debugging much more enjoyable compared to working with other code.

If you do custom WordPress development or even plugin and theme development and are not familiar with the following options available with WPDB, take a few minutes to read more about them and then test them out. These few commands have saved hours of frustration for us when debugging custom development.

You can turn error echoing on and off with the show_errors and hide_errors, respectively.

<?php $wpdb->show_errors(); ?> 
<?php $wpdb->hide_errors(); ?> 

You can also print the error (if any) generated by the most recent query with print_error.

<?php $wpdb->print_error(); ?> 

Finally – you can also easily see your last query and last result using:

<?php $wpdb->last_query(); ?> 
<?php $wpdb->last_result(); ?> 

Further documentation from the WordPress Codex on these time saving helpers.

So – if you are ever unsure why a query is not working as you expect – simply add in the show error and print error code and you will instantly see exactly what is really going on.