One of the goals of refactoring my sites was moving from Blueprint CSS to Bootstrap. Blueprint CSS is no longer maintained, and Bootstrap supports responsive layouts. I wanted to make sure my sites were readable on mobile devices.
I would have preferred to use semantic class names in my markup, but since Bootstrap is new to me, I opted to follow example code as much as possible. In the future, I may get adventurous with using Bootstrap’s LESS source, but that day is not today.
Things were going great till I started using Bootstrap in my WordPress themes.
That’s when I ran into problems with the comment form.
I wanted to use a horizontal form, and that requires adding a Bootstrap class to the
<form> tag. Unfortunately, WordPress doesn’t allow additional classes to be added to the function that renders a comment form.
Similarly, the function to paginate links doesn’t allow customized classes on the
In a rush to get something out and working, I committed a grave sin — I hacked Core.
I added a few arguments to each of those functions to allow customized classes where I needed them, knowing full well those hacks would be blown away the next time I updated core. And that’s exactly what happened when I upgraded to WordPress 4.0.
I know what the correct solution is: replicate what Bootstrap does in
style.css. If I were ambitious, I could create LESS aliases on the Bootstrap rules using WordPress class names. I’m not ambitious. Instead, I attempted to reverse engineer what Bootstrap was doing with its
form-horizontal class and didn’t get far when I realized the time sink it would require.
So I opted for the less-wrong, still-lazy option — override those Core functions with a plugin.
Essentially, I copied the entirety of
paginate_links, renamed the functions with a
bootstrap_* prefix so as not to collide with Core, then called those functions from my themes. The code for this plugin is available on Bitbucket.
bootstrap_comment_form adds four additional arguments to allow customization of the opening
<form> tag and the submit button.
bootstrap_paginate_links adds one argument to customize the pagination output when rendered as a list.
This solution opens up something of a maintenance nightmare.
If the original functions in Core change, they won’t be reflected in the overrides. Unfortunately,
paginate_links render their outputs instead of caching them in strings. So my override functions can’t call their parents and manipulate their results. I would need to copy any changes to the parent functions manually.
Or I could avoid this nightmare and submit this change to WordPress.