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

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!

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.

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.

5 Cardinal Rules When Creating a Web Site

Over the years – working as a developer I have seen both a lot of great and horrible things with clients. In order to avoid the “horrible things” – I would highly suggest taking a moment and reading through the points below.

Step 1: So you need a web site…

Your development options:

  1. You also know someone who has a cousin who does web sites on the side
  2. You outsource it to a company who charges $10/hour
  3. You find a reputable web development company

Cardinal Rule #1

Realize your development decision has consequences. All options have costs you might not be thinking about. Not everyone wants/can spend a large amount of money on a project so they decide to choose option #1 or option #2. The initial project cost is lower on paper so you go with it. The costs you really need to consider with the first two options are often hidden.

  • Communication: How can I get ahold of you to talk about the project/status/any issues? (If this is someone who does it “on the side” or is located in another time zone – are you ok with a delay or odd hours of communication?
  • Quality: Can your cousin’s friend who does this on the side create something that you want to represent you? Perhaps sometimes – but more than often – you will get something for less money and quality and it will show.
  • Cost: Option #3 is not always the best for you either. Perhaps you have a new business and you want something really professional, but you do not have a budget to match what you want. I have seen companies put so much money into their site – that their business fails because they overspent.

No options is perfect – but you need to be comfortable with the decision and realize there are potential downfalls.

Cardinal Rule #2

Get a contract in place with guarantees/terms. If whomever you decide to work with does not want to get this in place first thing – huge red flag and good luck. This is an essential part of any business as it sets expectations and protections for both the client and developer.

Step 2: Let’s start this!

Now that you have started the process and selected the right web developers – it is time to start building your site. The fun (or nightmare) is just about the start.

Cardinal Rule #3

Never let your developer register for all needed accounts/licenses. I have seen it time and time again where a developer registered something, stopped working for their company/client and with their departure also went all the licenses/accounts. Example – your developer offers to register your domain name for you, but when they do – they then get all notifications of when it expires, and control renewal. The developer then ends their business relationship with you for whatever reason and when your domain name needs to be renewed – you have no control over it and after spending money/time on building your online presence – lose it all because your domain name has been bought by someone else. Ouch. I have seen it. Another example: your developer sets up your hosting account. The developer leaves and they stop paying for/close the hosting account. Good bye web site. Better yet – you do not own the account and cannot even request a backup of your site. OWN YOUR DATA/LICENSES/ACCOUNTS

Step 3: My site is amazing!

After the development is over – now you can enjoy the end product (or can you?).

Cardinal Rule #4

Know what your backup policy is/make sure you actually have backups. Some people think $5.00/month hosting is a great deal until they realize they do not have any backups or that backup are an added cost that they never sign up for. Whoops. I have also seen more expensive hosting packages that only keep backups for 48 hours. This may work for some people – but if there was an issue on Friday, and you get in on Monday and realize it – your backups are not going to help. Make sure you are comfortable with your backups.

Cardinal Rule #5

Keep your software up to date. If there are security updates – apply these sooner than later. No excuses. If you are worried about an update breaking something – set up a staging environment and test there. If you do not have a staging environment but feel like testing is still important – spend the time and money to get one. I have seen clients who have had a security breach because they decided it would be best if they “only update quarterly” which may sound nice in a written report to someone – but when security issues come up and there are patches – they need to be applied ASAP or your site becomes vulnerable. Resolving security issues always cost greater than applying the updates.

In summary – not everyone knows the process or what they need to do when starting a web site project or maintaining their own site. My company has helped a lot of clients from start to finish and will make sure we go over the items above. We have also seen/helped a lot of clients who had an issue with one of the cardinal rules above and I, if possible, hope reading this has made you more aware of potential things to think about when doing any web site development. Creating and maintaining a web site can be a great experience or a nightmare. I hope your experience is great!

Embrace the New , Remember the Old

Four years ago I put together a base theme/framework called “Lucidity” that served me well. I even created a mobile version which also worked great. As the years went on – and I started using Bootstrap for responsive designs, I realized it was time to update my personal site and here it is. I will be making some final tweaks over the next few days, but it feels good to get something new and more modern out there, while still using some of my favorite elements of Lucidity and the older versions of jappler.com along the way.

Hello new design

Goodbye old design

Install Varnish in Under 5 Minutes With Bitnami

If you have been following my posts for the last month (or talked to me about what I have been up to recently) you will not be surprised I have another post about the ease of use/awesome documentation when using Bitnami.

I still am 100% impressed with the documentation – as each example I have followed has worked flawlessly (not something I can say much…especially after spending an evening trying to fix my PS3 vs. play it a few nights ago).

What is Varnish?

Varnish Cache is a web application accelerator also known as a caching HTTP reverse proxy. You install it in front of any server that speaks HTTP and configure it to cache the contents. Varnish Cache is really, really fast. It typically speeds up delivery with a factor of 300 – 1000x, depending on your architecture.

Source: https://www.varnish-cache.org/about

Where is this amazing 5 minute install documentation?
Bitnami Varnish Installation

Seriously…check it out!

The Importance of User Defined Tests

When working on a large project or a seemingly simple task – I have come to realize it is extremely important to always get a test case (or test cases) directly from the client. As programmers and developers, we often have one idea of how something should work, while our clients have something different either because of business logic or lack of really knowing how to describe what is needed.

By having your clients define the tests – both the developer and client win. The client is forced to describe the actual function in a logical way. The developer can read over the test and fully understand what the outcome needs to be. The client and developer also have a defined result which will be easy to test.

As developers – we all test our work one way or another, but believe me, it is much better if your tests actually matched what the client uses as their tests (which is surprisingly different more than you would expect).Moral of the story – while the user does not need to create some extravagant testing plan – by asking them to define a test case – they are more likely able to better explain what they really need. The developer then is able to do their testing and be confident they know what result is needed and everyone is on the same page.

Install Memcache in Under 5 Minutes with Bitnami

The more I work with Bitnami, the more I absolutely love it. After migrating a number of applications over to my server – I realized I could benefit from using Memcache. I decided to do a quick look at the documentation for Bitnami and found exactly what I needed. Within 5 minutes I had Memcache up and running.

Of course after I did that – I also took a closer look to see what other PHP modules were available – and installed a few more. What I love most? The documentation is great and everything I try actually works – no exceptions – on the first attempt.

Still not sold? Not only are there a ton of PHP modules available, there are a ton of “stacks” available to download/use with ease. Example: Monit, PHP Frameworks like CodeIgniter, Apache Solr, Varnish, etc. Make sure you put this on your “to check out” list and then thank me later!