HOWTO: Simple Bootstrap 4 WordPress Gallery

If you are looking for a simple way to have your WordPress inserted galleries use the Bootstrap 4 layout – look no further. Just drop this code into your theme’s functions.php file and any WordPress gallery you insert when selecting media ([ gallery ids=”” ]) will then use the Bootstrap layout.

Code Needed for the WordPress Gallery

/**
 * Bootstrap 4 gallery
 */
add_filter( 'post_gallery', 'lucidity_bootstrap_gallery', 10, 2);
function lucidity_bootstrap_gallery( $output = '', $atts, $instance ) {
    if (strlen($atts['columns']) < 1) $columns = 3;
    else $columns = $atts['columns'];
    $images = explode(',', $atts['ids']);
    
    // Set the # of columns you would like
    if ( $columns < 1 || $columns > 12 ) $columns == 3;
    
    $col_class = 'col-lg-' . 12/$columns;
    
    $output = '<div class="row text-center text-lg-left gallery">';
    $i = 0;
    
    foreach ( $images as $key => $value ) {
       
        $image_attributes = wp_get_attachment_image_src( $value, 'thumbnail');
        $output .= '
            <div class="'.$col_class.'">
              <a data-gallery="gallery" href="'.esc_url($image_attributes[0]).'" class="d-block mb-4 h-100">
                    <img src="'.esc_url($image_attributes[0]).'" alt="" class="img-fluid img-thumbnail">
                </a>
            </div>';
        $i++;
    }
    
    $output .= '</div>';
    
    return $output;
} 

A few things to note:

  1. This example uses the image size “thumbnail”. If you want to use something different – you can change that here on this line: $image_attributes = wp_get_attachment_image_src( $value, ‘thumbnail’);
  2. This example uses 3 columns. Depending on the size of your images – you may also what to change that. You can make the change by changing the two references to “3” in the code above ($columns == 3, $columns = 3)

You can see the gallery in action here: http://www.jappler.com/2014/07/25/recent-visit-911-memorial/

Google Font Pairing Made Easy

Looking to update your site’s font but not really sure what would look good? If you find a Google Font as a base font – Google offers pairing suggestions and then shows how they look with each other. This makes it easy to then pick a title font, body font, etc by seeing how they look together before you commit to one font or another.

Example:

Let’s say you really like the Google font Oswald as your title font, you can then adjust the fonts under the “Popular Pairings with Oswald” to see their suggested pairings in all their font weight possibilities. Overall – this is a huge help for both designers and design challenged people who are looking to make some typography changes quickly and easily. Thanks Google!

Structured Data with Bootstrap

Perhaps you used Bootstrap for your web site and are excited that you have a responsive web site with all the bells an whistles. You were hoping that would help your SEO ranking, but you should know there is more to be done! Enter “structured data“. Structured data can help differentiate a recipe from an article from an event – all things that Google supports and will display depending on how the structured data is set up.

Not sure where to start?

Navigation

The differences are not too much but can make a big difference.

Simple Default Bootstrap Navigation
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
</ul>
Simple Default Bootstrap Navigation with Structured Data
<ul itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"class="navbar-nav mr-auto">
<li itemprop="name" class="nav-item active"><a itemprop="url" class="nav-link" href="#">Home <span class="sr-only">(current)</span></a></li>
<li itemprop="name" class="nav-item"><a itemprop="url" class="nav-link" href="#">Link</a></li>
</ul>

Breadcrumbs

By adding a little code to your already existing breadcrumbs – you will provide structured data that search engines can understand.

Simple Default Bootstrap Breadcrumbs
<ol class="breadcrumb">
<li class="breadcrumb-item"><a itemprop="item" href="/"><span itemprop="name">Home</span></a></li>
</ol>
Simple Default Bootstrap Breadcrumbs with Structured Data
<ol itemscope itemtype="http://schema.org/BreadcrumbList" class="breadcrumb ">
<li class="breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemprop="item" href="/"><span itemprop="name">Home</span></a></li>
</ol>

Once you add in structured data to your site you can then use the Google Structured Data Testing Tool to make sure everything is set up and configured correctly. Not sold? Check out: The Beginner’s Guide to Structured Data for SEO: A Two-Part Series

Note: This is based on Bootstrap 4.

Fix: Nothing Showing For Popular Posts Widget

I recently ran into an issue with the WordPress Popular Posts plugin where it showed the bullet points for the number of popular posts I wanted to show – but no content.

Empty Popular Posts

Debugging the issue

  • I made sure I had JetPack installed
  • I had plenty of stats – but could not get any data to show. Stats were showing as expected with the JetPack plugin stats view
  • I deactivated/re-activated the WordPress Popular Posts plugin.
  • I turned off caching
  • I tried a number of different configuration options in the widget

I still was not seeing any content though. This then made me think I needed to try something different with the way the list item was formatted. At this point I then noticed that format field was blank. Since I could not remember if that was the default – I looked at the plugin readme file and added in the default (see below).

Default format setting that needed to be re-input
<a href='%post_permalink%' title='%post_title%' >%post_title%</a>

After that was in place and the widget settings were saved – the popular posts once again saved. If you notice something similar – and you are having issues getting content to show AND you know it is not a statistics issue – they the same configuration change I mentioned above. I hope it helps!

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://jzelazny.wpengine.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.