Add Bootstrap Classes to the Next and Previous Image Buttons

When viewing media (usually the image.php template) within WordPress – there are buttons to browse the next and previous buttons that you might want to customize if you are creating a Bootstrap WordPress them. If this is the case – styling the buttons with Bootstrap is easy. You can simply add the following to your theme’s functions.php file.

/**
 * Add CSS class to image navigation links.
 *
 * @wp-hook previous_image_link
 * @wp-hook next_image_link
 * @param   string $link Complete markup
 * @return  string
 */
add_filter( 'previous_image_link', 'lucidity_img_link_class' );
add_filter( 'next_image_link', 'lucidity_img_link_class' );

function lucidity_img_link_class( $link ) {
    $class = 'next_image_link' === current_filter() ? 'next' : 'prev';
    return str_replace( '<a ', "<a class='btn btn-default $class'", $link );
}

Note – you can change the btn-default class to btn-primary or whatever you need.

Add Bootstrap Button Classes to the WordPress Comment Form

Looking to stylize that WordPress comment button on the WordPress comment form? Adding the correct classes needed to the comment form button are as easy as finding where comment_form() is called in your theme. In my cases – this is within the comments.php file.

Once you find that – you just need to change
comment_form()
to:

$args = array(
'class_submit' => 'btn btn-default',
);
comment_form($args )

There are a number of modifications you can make to the comment form (changing button text, changing labels, adding notes, etc that you can make with the comment_form() function which are worth looking at here: https://codex.wordpress.org/Function_Reference/comment_form

Good Ol’ Siri

Siri Knows Who I Am

I love Siri. She helps me with measurement conversion (especially helpful during these Olympics and all the metric conversions), driving directions, game scores, figuring out what song is on, and making sure I remember who I am 😉

Thanks Siri!

If you have an Apple device with Siri and are not using her – get inspired: What to ask Siri

Add Bootstrap Classes to WordPress Widgets

When creating your Bootstrap WordPress themes, you will notice the sidebar widgets (archives, categories, etc) which use dropdowns do not share the Bootstrap styling because there is no place easily accessible to add in the needed classes or CSS.

Considering the options – here are two ways you can turn those default selects into something that matches the rest of your beautiful Bootstrap site.

Add a filter in your functions.php file

This is specific to the category dropdown. I was hoping we could use the same on the widget_categories_dropdown_args filter, but that is not possible as of WordPress 4.6. (see next example to address this). This filter works great if you use the categories widget and no other that display a select.

/**
 * Add CSS class to sidebar category selects.
 */
add_filter( 'widget_categories_dropdown_args', 'lucidity_widget_categories_dropdown_args' );
function lucidity_widget_categories_dropdown_args( $args ) {
    if ( array_key_exists( 'class', $args ) ) {
        $args['class'] .= ' form-control';
    } else {
        $args['class'] = 'form-control';
    }
    return $args;
}

Add some Bootstrap CSS to your style.css file

This works great if you have multiple selects displayed within your widgets. Note: the sidebar in the example has an ID of “sidebar”. This CSS is brought over from the Bootstrap .form-control style.

#sidebar .widget select {
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

I hope this helps make your site a bit more cohesive with the Bootstrap styles!

TiVo Bolt

TiVo Bolt

I have been a faithful TiVo fan for well over ten years now. I have had my share of different versions and I have to say – no version has been more impressive than their latest release – the TiVo Bolt. It is responsive (really really fast), it allows you to skip entire commercial breaks with the press of one button, it makes recording your favorite shows easy (as expected), and makes me once again super excited about TiVo (vs. only excited with the older model I had prior). Of course there are a number of other features that now seem standard to me because I have been a TiVo person for a long time.

If you use your cable provide DVR – you are selling yourself short. The Bolt comes with one year of TiVo service included, a user interface which beats anything I have ever seen, as well as makes finding shows to watch enjoyable. Did I mention you can skip entire commercial breaks with the press of one button? 😉

Great work on the latest release TiVo! If you have ever considered moving to TiVo – this is the model to finally buy.

Remembering My Mentor: Alex King

I was very sad to hear that Alex King died a few days ago and have been trying to think about what to say. If you do not know Alex or who he is – he was many things to many people – but to me – he was my mentor. I was an early adopter of WordPress (back before themes and plugins). I started following him (RSS) back in 2002 because he was always creating/sharing snippets and eventually themes/plugins that made WordPress better. I also was one of the first users of his Tasks software which I used religiously – so much so that I would email him with questions/suggestions, and would partake in beta testing new versions. He was also an avid golfer who enjoyed his PING irons like me.

After one email in which I mentioned I wanted to start my own company – much like he did, he offered his support, advice, and even started sending me referrals. I am sure I would not be where I am today without him. He was meticulous with his code and kind with his words. He was always very approachable and always made time for me. He consistently put a lot of thought into his work – so much so that he one time asked for my feedback on possible change options for his email signature. He made sure things were not just done, but done right. He provided guidance to me on many levels – everything from code reviews to business advice.

To me – Alex King will always be the one person in my life that pushed me to get out of my comfort zone, put myself out there, and to do great things. He also taught me that not all ideas/projects will be a success – but to keep trying and never give up. While I am very sad Alex King is no longer on this earth – I am so happy to have made the connection with him 13+ years ago. I will be forever grateful for everything he has done for me and other developers like me. Thank you Alex – for your code, your time, and your inspiration.

My Apple Collection

Yesterday I finally got a book shelf to hold the majority of my Apple hardware/software collection. Amongst the collection – I have some eMates, Newtons, Cube, QuickTake camera, original Apple floppy disks, Apple II GS, ImageWriter, original iPod, iPhone, etc. I am still missing a 20th Anniversary Mac, but that is still on the list of things to get.

IMG_3879

What Can Siri Do For Me?

If you are like me – you have an Apple iPhone and the thought of using Siri sounds awesome but after a few smart comments trying to get her to say something funny back (because you are not sure what all you can really say/get out of Siri) – you forget about her and move on.

Apple recently updated the Siri page so now you can easily find out what you can ask her to make her as useful as you wanted her to be all this time. Enjoy!

http://www.apple.com/ios/siri/

My new favorite things to do with Siri

  • “Flip a coin”
  • “Yes or no?”
  • “Take a picture”
  • “Why did the chicken cross the road?”
  • “How humid is it in Chicago right now?”
  • “Pick a card”
  • “Call me champ” (or whatever you want to be called)

Custom Date Sort with jQuery Tablesorter and Bootstrap Table Plugin

In the past week I have dealt with two different needs to sort a table date column (using a custom date format) using a JS plugin jQuery Tablesorter 2.0 and Bootstrap Table. If you use custom date formats – the default sort will not always work. In my case – it was sorting the dates by month name alphabetically and not by date order. Here is how you can use both plugins to sort by date order:

Example date format: Jan 28-Jan 31 (date for this example was a span of dates – in which I wanted to sort by the starting date)

Custom date sort solution in two steps for jQuery Tablesorter and Bootstrap Table:

jQuery Tablesorter

  1. Add data to the table header:
    <th data-sorter="shortDate" data-date-format="yyyymmdd">Date</th>
  2. Add a hidden span before your actual date in the data that then matches the format specificed above:
    <span style="display:none"><?php echo date( "Ymd", strtotime($date) ));?></span> Jan 28-Jan 31

Very similar to the jQuery Tablesorter solution:

Bootstrap Table

  1. Add data to the table header:
    <th data-field="created" data-sortable="true">Created</th>
  2. Add a hidden span before your actual date in the data that then matches the format specificed above:
    <span style="display:none"><?php echo date( "Ymd", strtotime($date) ));?></span> Jan 28-Jan 31

Now you can easily sort any date format using these two plugins so you can format the date however you want and still be able to sort by date on that column.