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!

HOWTO: Target Firefox for Specific CSS

Generally – the best way to handle CSS is to keep it simple, clean, and without any hacks. From now and again there are some times when I need to write CSS specific to IE (using conditional comments). I recently came across a site where I needed to target Firefox because of a width issue. This is the first time in my many years I ran into this – and tried a number of hopeful solutions but nothing worked. I then found that if I used: @-moz-document url-prefix(){} that that would work out and only Firefox would use the styles within that.

Example:

.font_example {font-size:1.1em;}
@-moz-document url-prefix() {
     .font_example {font-size:1.075em;}
}

Safari, Chrome, IE, etc will use the first .font_example code while Firefox will use the code within @-moz-document url-prefix(){}.

While this is not recommended for everyday usage – when and if you hit a wall, this could be something that will save a lot of time and headaches!

WordPress Themes Over the Years…A Look Back and Then into the Future

After working with WordPress for over five years now, I have seen a lot of changes both front-end and backend – both for developers and for users. I work for the most part on WordPress themes for a few hours a day and have been doing so for the last 3+ years full time. As I wrap up the final changes for my company’s commercial WordPress theme Lucidity – I wanted to take a few minutes and point out some of the changes over the years and also talk about where I think themes are going.

I remember back in the day being excited about Alex King’s Theme Competition and wishing I had some spare time (I was working full time and doing consulting every other moment) to also participate. These early themes were generally simple and were something people would use on their simple blogs -using a hand full of WordPress functions. During this time, the functions.php was unheard of and there were not too many custom functions that were used (for most themes). The big difference between them were mostly in how the sites were laid out with HTML and CSS. Even though these themes were simple – they were great because it allowed you to easily modify the look and feel of your site by editing a few template files and modifying the CSS.

These themes were more about look and less about function.

If you think about themes then and themes now – the difference is often huge. Most themes now are packed with custom functions, have advanced admin options, and give the users greater control of their content, the site’s look and feel, and general options – all without having to modify any template files or know any CSS. Themes are more complex, are generally made up of more template files, and are much more flexible.

These themes are more about providing both users and other developers with a framework and tools to easily manage content.

Recently Alex King/Crowd Favorite released Carrington Build which is a perfect example of where themes are going. This theme offers an unbelievable amount of flexibility and customization and will make both users and developers eager to use this theme.

So as I wrap up development on Lucidity – I am trying to bridge the old (simple) with the new (framework/tools). I look forward to getting this out to the public so they can enjoy the ease of use, flexibility, and further control over their content.

All in all – WordPress themes have come a long way and will not only continue to improve user’s front end experience, but also improve the backend experience when using WordPress. Look for even greater things to come!

CSS Tuesday: Images as List Bullets

There are plenty of ways to spruce up the boring bullets used in HTML lists.

The best way and most browser compatible way I have found to do this is using the following code:

ul li {background: url('images/dot.gif') no-repeat 0 3px; list-style:none;margin:0 0 2px 0;padding:0 0 0 10px;}

You can see that here:

  • Example of fancy bullet
  • Another bullet point

Vs. The plain list:

  • Example of fancy bullet
  • Another bullet point

Something like this may seem simple, but it is often overlooked and can really dress up a site.

CSS Tuesdays: Keeping it Simple

I just released my fist two commercial WordPress themes: Lucidity and Lucidity Catalog with a focus on simplicity.

After creating over one hundred custom WordPress themes – I decided to take my most requested features, coupled with a slick admin interface, and some really simple XHTML and CSS and put it together to create a really easy to use and customize theme.

If you looking for something really easy and clean – take a look at the CSS used. You can see that a little goes a long way!

Just remember – keep it simple. When you overcomplicate – you will end up with sloppy code, hacks, and problems with old/new browsers alike.

CSS Tuesdays: Fun With User Agents

If you are going to do any serious CSS development and/or troubleshooting – you need to be able to see the site on as many browsers as possible. Generally – we have several browsers on several operating systems going at once so we can make sure our bases are covered.

Last week I built a mobile theme for a client and after a few refreshes on my iPhone – I decided I needed something easier and more developer friendly (I needed to view source). I use the “Develop” menu in Safari (Preference > Show Develop menu in menu bar) – and with that, I was able to choose my user agent (iPhone) – and then view how it would look using Safari which was much faster then using my iPhone – and I could easily view the source. If you need to do any development that depends on the user agent – don’t forget about this little trick!

Choose Your User Agent

Choose Your User Agent

CSS Tuesday: Overide Inline Style

How many times have you worked with either someone else’s code or some crazy dynamically generated code that uses inline styles for everything which you need to change or override but cannot for some reason or another? I have seen this a lot with custom applications written by programmers who think they are doing designers some sort of favor.

Something that I recently found that will allow you to override inline styles:

<p style="margin:20px">The inline style (style=) will give the paragraph a 20px margin.</p>

Let’s override that because I think 20px is overkill and I only have access to the stylesheet:

p[style] {margin:10px !important;}

Of course that will override any paragraph tag that has an inline style – but you can see where this is going.

Reference: http://css-tricks.com/override-inline-styles-with-css/