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/

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

HOWTO: Add Page Slug to Body Class in a WordPress Theme

Even though the body_class() function in WordPress outputs a good deal of classes you can easy use – there are sometimes when having the actual page name as a class is helpful (custom CSS).

Usage Example:

  • Page Named: My Test Page
  • You need the ability to apply some CSS to something only on this page

In your functions.php file – add the following:

/* 
 * Add in page nicename to body class
 * @param $classes = array of class names or a string with space-separated classes names
 */
function sdac_body_page_name_class( $classes ) {
	global $post;
		$classes[] = $post->post_name;
	return $classes;
}
add_filter('body_class', 'sdac_body_page_name_class');

Once that function is in place you will then see this on the test page as a class in the body tag: “my-test-page”. With that in place you can then use something like this to make a page specific change in CSS:

.my-test-page .entry {margin:50px 0 100px 0;} 

HOWTO: Show Admin Bar to Admin Users Only

Since WordPress 3.1 – after you log in to a WordPress site – you now see a dark grey bar at the top. If you only want users of a certain role to see it (admins vs. subscribers) you can easily set that up by adding the following code to your functions.php file:

if (!current_user_can('manage_options')) {
	add_filter('show_admin_bar', '__return_false');
}

You can also only show the bar to editors, authors, etc by changing the first line. You can learn more about roles/capabilities: http://codex.wordpress.org/Roles_and_Capabilities

HOWTO: Add Custom Classes to Post Navigation Links

Sometimes you just need to have a bit more control over the display of the post navigation (next_posts_link, previous_posts_link). You can easily add in your own custom classes by adding the code below to your theme’s functions.php file. In the example below – I added in a custom class “older” and “newer”. You can add in anything there you would like.

add_filter('next_posts_link_attributes', 'sdac_next_posts_link_attributes');
function sdac_next_posts_link_attributes(){
		return 'class="older"';
}

add_filter('previous_posts_link_attributes', 'sdac_previous_posts_link_attributes');
function sdac_previous_posts_link_attributes(){
		return 'class="newer"';
}

HOWTO: Easily Change Registration Redirect in WordPress

Ever want to change the redirect for your WordPress site but were not sure how to do it? There is a quick and easy way to accomplish this. Simply put the following code in your theme’s functions.php file and change the URL after the “return”.

add_filter( 'registration_redirect' , 'sdac_registration_redirect' );
function sdac_registration_redirect() {
    return 'http://my-redirect-url.com';
}

HOWTO: Make WordPress Titles Title Case

Ever need to make sure all your titles showed up with using “Title Case” and not just by using CSS? By adding the following to your functions.php file in your theme – you can ensure the post title will have the case you want:

/**
 * Custom Title Case for the_title()
 * @returns $content (title with title case)
 */ 
add_filter( 'the_title', 'sdac_use_title_case' );
add_filter( 'wp_title', 'sdac_use_title_case' );
function sdac_use_title_case( $content ) {
	$content = ucwords( $content );
	return $content;
}

Change WordPress Author Permalink

Ever want to change the “author” permalink from something like /author/jzelazny to something more custom for your CMS like /teacher/jzelazny? This is relatively easy by adding a function to your functions.php file:

// Adjust your author permalink
add_action( 'init', 'custom_theme_init' );
function custom_theme_init() {
   global $wp_rewrite;
   // Change the value of the author permalink to teacher
   $wp_rewrite->author_base = 'teacher';
}

Flush your permalinks (Settings > Permalinks) and now all your /author/ pages will now be /teacher/.

Using meta_query With WordPress 3.1+

With WordPress 3.1 – we now have the ability to use “meta_query” to show posts associated with a certain custom field. I recently used this in order to create an events listing widget for a client. I needed to query posts in the “Events” category and that had a time stamp defined (which happened to be the start date of the event). The client wanted to show only current/future events (today or later) and wanted to show them in order by the closest event date to the furthest away.

Getting the general query together was a snap – but the orderby did not work unless I had the meta_key defined (this is documented but was overlooked initially).

Example

$now = time();
$args = array(
	'category_name' =&gt; 'Events',
	'meta_query' =&gt; array(
		array(
			'key' =&gt; 'sdac_event_time_stamp',
			'value' =&gt; $now,
			'compare' =&gt; '&gt;=',
			'type' =&gt; 'NUMERIC'
		)
	),
	'meta_key' =&gt; 'sdac_event_time_stamp',
	'order' =&gt; 'ASC',
	'orderby' =&gt; 'meta_value_num'
 );
$events_query = new WP_Query( $args); 

If you take a look at the query itself – the trick was to capture the time now ($now) and then use the compare within the meta_query. Overall – this sort of query makes working with custom fields a lot easier. If you have not checked it out yet – take a look.

Documentation
Function Reference/WP Query