Tweaking Boldy
Our recent site relaunch was based upon a free Premium WordPress theme, Boldy by Site5. Leading up to our new site release and since that time we’ve released significant updates to this theme. There have been so many rather bold adjustments that we decided we would let the world know what exactly the process of tweaking an existing theme entails. We’re also planning future posts on the related topics of performance, security and interoperability.
Here’s what all we did to make “beBoldy”…
- Added or repaired administrative settings for disabling certain jQuery JavaScript libraries. Specifically, we repaired the ability to toggle off Cufón fonts JS file inclusion. We added the ability to toggle on/off PrettyPhoto Lightbox, Smooth Navigational Menu, and the footer contact form. This improves performance, because when certain features aren’t being utilized they shouldn’t be loaded.
- Updated all of the JavaScript libraries. We upgraded the jQuery library from v1.4.2 that was released with the theme to the current v1.5.2 linked via the free Google CDN. Improves performance.
- Separated the contact page form and processing logic into a custom plugin rather than being part of the theme itself. Changed the form to match some of the styling on the blog comments form. Updated the jQuery Form plugin (AJAX form responses) to the minified version that comes pre-built into WordPress. Removed external form processor script and switched mail delivery over to the more reliable built-in wp_mail() function. Applied stripslashes() to remove backslashes from message text.
- Separated the “Share” links from the bottom of blog posts into a custom plugin rather than being part of the theme. Repaired the broken links and added two Twitter parameters for username “via” and “related” fields for tweet pre-population.
- Updated the NivoSlider library for the home page rotator. Updating this JavaScript library also required updating the base CSS file that the plugin uses. Removed the initial loading image due to it being unnecessary and taking additional download time.
- Cleaned-up the main CSS file. Removed unnecessary spacing and minified the code. Removed a few items (images) that were in the CSS but missing causing performance degradation. Moved certain optional elements to separate CSS files, calling them only when required. Consolidated form styling entries. Moved all CSS calls to wp_enqueue_style() for optimal placement and load ordering.
- Moved all JavaScript to the footer of the HTML using wp_enqueue_script() for optimal placement and load ordering. Enqueued the calls from the specific pages that require them, for example home.php, to affect only the applicable page.
- Moved the home page boxes and home page slider images from being WordPress pages to simple text areas within the theme settings page. This helps keep WordPress pages better organized and prevents the possibility of search engine results for non page content. Applied htmlspecialchars() to the new and old fields to be compatible with certain codes using within the blobs.
- Removed some wasted spacing in the PHP files HTML output sections. Improves performance and SEO.
- Switched XHTML Transitional mode to Strict mode. This helps the browser render more quickly, but does require more diligence when managing pages, posts and widgets in order to remain W3C validator compliant.
- Removed forced <p> paragraph code symbols on the contact page and home page elements so the user can decide whether those blobs should contain any number of paragraphs or codes that can’t be wrapped within a single paragraph.
- Applied fix to the search form field. The “type your search” remark was disappearing after somebody clicked on the field, then clicked away. Fixed WAVE accessibility validation on site search box by adding an invisible field label.
- Removed the unwanted “Request a Quote” button from the home page element. Fixed a bug by adding removal of slashes on the administrative controls page to prevent backslashing of quotes in this box.
- Removed the “Blog Categories” display from the sidebar in the blog section. One can use a widget instead for greater flexibility.
- Added sidebar auto scroller to enhance any vertically scrollable pages. This keeps our phone number visible regardless of where somebody has scrolled to on the site.
- Moved Google Analytics code to the header as per the newer specifications. This ensures that Google measures the page load speed and improves performance.
So, as you can see there’s a lot to be done in perfecting an existing theme. It makes one realize that the cleanest theme is one that contains as little functionality as possible as that is best suited for plugins.
Thank you for taking the time to read this post. Note that we really appreciate feedback about what we’ve written as well as what topics you’d like us to discuss in future posts so please do leave a comment below.
11 Comments
Leave a comment
Call us
Free WordPress Plugins
Blog Categories
- Blog (23)
- Podcasts (8)
- Portfolio (2)
- Tips and HowTos (10)
I love some of your changes. Can you share how you made some of the above changes? For instance how did you get the nivo slider to not download the first image?
And what plug in are you using for your share and bookmarks at the end of each blog?
thanks!
Hello Marie. Thank you for your comment! It’s been many months since we applied these code updates to Boldy, and we basically re-wrote half of the theme in the process! Therefore, it’s difficult to remember exactly how the original theme handled the images in the slider. Try this: I believe you can put
style="display:none;"into the IMG tag for all of the images to prevent them from loading before the JavaScript kicks in and slides them. Let us know if that isn’t the case and we’ll take another look at the original theme to try to help you with that.To answer your second question, the Share and Bookmarks button was part of the original theme, and we did some code fixes and extracted its code, moving it into a new plugin. We haven’t released that plugin to the community yet. We have two more free community plugins in line getting ready to be released in the coming days. We’ll take your inquiry as a vote for us to release that plugin shortly afterwards!
Before we release a plugin to the community we have to put a lot of thought to the title, descriptions, FAQ, make screenshots, make a landing page, plus we have to test the plugin in various themes and in several versions of WordPress, then run the commands to commit the plugin to the wordpress.org repository and maintain it. So we have to pretty much gauge our time invested in the free work that we put into the community plugins. We are proud of our contributions and intend to continue with them!
Do let us know if you have any further questions. Thank you
Hi, great updates!
Have one question how did you get rid of the “Request for a Quote” button, I want to be able to just have text!
Mike
Hi Mike,
Thanks for the kind words. Sean, the fellow who does all the programming around here, is currently swamped with work. Thus he wanted me to let you know he’s aware of your question and will get back to you when he has the opportunity.
Thanks for your patience!
That’s great thank you
Hi,
Sorry have another question, have you managed to get a sidebar on the homepage to the right of the slider?
Regards
Mike
Hi Mike,
Thank you for your inquiry. What you are trying to do involves CSS code customization. We recommend programming a child theme to override the behavior you wish to “turn off” in this case. One should never modify the project files directly.
We essentially rewrote the Boldy theme to meet our needs. We didn’t release our copy to the community because we are not theme developers, thus we couldn’t support it. We’re big advocates of supporting ones projects with the community.
Based on our plugin development experience, we feel that one must follow a stable development path by never modifying existing project files unless they are being committed to the project’s repository.
To this end, the options that we would approve of for your situation are as follows:
#1 – Build a child theme or a custom plugin to fill the gap. Use the original theme or plugin paired with your new one to augment it externally.
#2 – Choose another theme or plugin project that is a better fit for your needs.
#3 – Rewrite as much as you want within theme or plugin and take ownership of it. The original theme or plugin has no relationship to the new one. Once one piece of code is changed, it’s a new project that you must maintain over time as the core develops.
Hopefully this makes sense. This requires some coding and some planning, but understanding this will save a ton of time and headache now and down the road. Please let us know if you have questions about our approach. Thanks again for checking in with us, and we hope we have been helpful to you.
Does point 2 requires any rewriting of css files? Or can I download v1.5.2 and overwrite it with the old one?
Hi Steve,
Sadly, once a theme becomes out of date (unsupported) your best bet is to pick another theme that is either commercially supported (paid) or community supported (free and active). Otherwise you will have plenty of work like this going forward, and we don’t generally recommend it. Just think of the TimThumb fiasco that occurred recently with thousands of themes that weren’t fixed at all, requiring massive PR to address it. We’ve only stuck with our beBoldy edition because we rewrote most of it. As it were; we have more updates to make to beBoldy in the time since this post was originally written!
So that’s your real answer. As far as how to fix this yourself, which I don’t generally recommend, you would need to change the <script> call in header.php to reference the new file, or a predefined jQuery URL or internal reference. Other themes normally use wp_enqueue() call within the functions.php file and use a predefined jQuery source. We used the Google CDN URL in beBoldy. It’s also common to reference the jQuery built into WordPress without specifying any URL using wp_enqueue(‘jquery’) in functions.php, or simply having any custom JavaScript file require ‘jquery’ as a dependency so it fires up.
Hi, thanks for this post! I’m tweaking this theme too, so that’s how I found this.
I have a question – how did you change the code so that the quotation marks show up in the homepage blurb, rather than backslashes? I had to just take the quotes out, but I would to put them back in, once I know how to fix that bug.
Thanks so much!
lily
Hi Lily,
Sadly, once a theme becomes out of date (unsupported) your best bet is to pick another theme that is either commercially supported (paid) or community supported (free and active). Otherwise you will have plenty of work like this going forward, and we don’t generally recommend it. Just think of the TimThumb fiasco that occurred recently with thousands of themes that weren’t fixed at all, requiring massive PR to address it. We’ve only stuck with our beBoldy edition because we rewrote most of it.
So that’s your real answer. As far as how to fix this yourself, which I don’t generally recommend, you would need to add a stripslashes() into the home.php file where it displays this text. If it’s getting multi-slashed, you may additionally need stripslashes() in the functions.php file where it saves this option. I cannot recall what all I had to do to get this fixed a while back.