Remove Extra Spacing in Dropdown Menus (Bootstrap)

When working with Bootstrap dropdown menus – there is a gap when hovering over items in dropdown menus at the very top and very bottom of the menu. If it bothers you like it does me (when looking at a hover state of a menu item in the drop down), you can easily solve it by adding in one line of code:

nav.navbar-fixed-top .dropdown-menu {padding-top:0;padding-bottom:0}

Note: You may need to change the class of the navbar to match whatever you have in your code.

Before:

With that code – you can see the difference:

After:

Sometimes the extra/default spacing is fine – but there are other times where you need to get the hover state to go all the way to the top/bottom. With this simple CSS – you can easily make your designer happy.

Control Image Cropping Better (WordPress)

Recently we were working on a project that used the WordPress add_image_size() function to crop images a specific size for the archive view. We noticed that there were a lot of faces getting cut off (at the top of the image). Fortunately – there is a way to fix this:

In our theme we were using:
add_image_size(‘archive, 220, 120’, true) which hard cropped the image at 220px x 120px) but the hard crop started at the center of the image and went out. In order to reduce the head cropping – we changed it to:
add_image_size(‘archive, 220, 120’, array(‘center’, ‘top’)). Having something in the array still signals for a hard crop – but it starts at the top/center (as I specified) vs. center/center.

After changing the crop options – make sure you rebuild your thumbnails with something like: AJAX Thumbnail Rebuild

There are other options as well:

  • x_crop_position accepts ‘left’ ‘center’, or ‘right’
  • y_crop_position accepts ‘top’, ‘center’, or ‘bottom’

Further documentation: https://developer.wordpress.org/reference/functions/add_image_size/

Premailer: Great Tool for HTML Email Newsletter Pre-Flight Checks

Recently I had to debug an HTML email issue where the layout was not showing as expected. I soon found and used Premailer which was a huge help. Simply point the tool to either a URL or copy and paste in the code you would like to use and it will do the following:

  • Remove classes
  • Remove unused IDs
  • Remove comments
  • CSS styles are converted to inline style attributes
  • Relative paths are converted to absolute paths
  • CSS properties are checked against e-mail client capabilities
  • A plain text version is created

warnings

After you submit your URL or code, it will give you the HTML and plain text versions to download as well as show you any warnings about remaining styles/code which if you know your audience – you can then use to further make decisions about styling/coding your newsletter.

Query All Custom Page Templates in WordPress

Make your WordPress quality assurance easier by using this custom query to easily find all custom pages templates and the pages that use them.

Here is a query you can use/run to find an example of any custom page template created and used on your WordPress site:

The Custom Page Templates Query

SELECT posts.ID, meta.meta_value
FROM wp_posts AS posts
LEFT JOIN wp_postmeta AS meta ON posts.ID = meta.post_ID
AND meta.meta_key = '_wp_page_template'
WHERE posts.post_status = 'publish'
AND meta.meta_value IS NOT NULL
GROUP BY meta.meta_value

The Custom Page Templates Results

That query will then return results that show the post ID as well as the page template file name so you can then easily see all your custom page templates in place. (See image below as an example)

WordPress query results for all custom page templates

Using the Results for Quality Assurance

In order to then actually see the pages that use the custom page templates, you would use the following URL format:

http://www.yoursite.com/?p={ID}

Real world example using this web site as well as the post ID of 123:

http://www.sandboxdev.com/?p=123

To do your final QA – you would just substitute the post ID with each found in the query results. You can then be sure you have tested a sample of each custom page template.

Easily Align Fields in Columns with Gravity Forms

Recently while working with Gravity Forms on a project – we needed to set up a large form that would span two columns. Since this is something common – I decided to look first at the Gravity Forms documentation.

Per the documentation I found this:

In Gravity Forms 1.5 we added “Ready Classes”. Using these new classes, you can easily create more advanced alternative layouts for the fields in your forms. Essentially, Ready Classes are class names that you can add to the parent element surrounding each field to take advantage of pre-defined styles included in the default form stylesheet.

By simply adding a new class to your form field (Advanced > Custom CSS Classes) – you can easily create columns (2 or three) without any custom CSS classes to worry about. In seconds – I had the style I needed!

Readyclass_admin_input

If you are looking to customize the layout for your Gravity Forms forms – do yourself a favor and read the following documentation: https://www.gravityhelp.com/documentation/article/css-ready-classes/ as it will save you a lot of time and frustration.

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.

bootstrap-buttons

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

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

centralized-site-management

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

staging

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.