Bearded WordPress Theme Modifications and Bug Fixing
ProWP is no-longer using the ‘Bearded’ WordPress theme. This post will stay up for posterity.
I love the WordPress community, and the fact that developers around the world are willing to create and distribute useful resources, free of charge, is just amazing.
In fact, this very website is built upon a theme called ‘Bearded’ released for free on the WordPress theme repository. We could have built this website from scratch using our own design and development, but what example would that set? We’re all about embracing the open source nature of WordPress, and hopefully enabling you to do the same.
Today our website theme will be the focus of this blog post.
‘Web OCD’
I’ve ‘diagnosed’ myself with a condition I like to call Web OCD, and I can’t help but strive to make things better to websites in my own little way.
As a bit of background, I previously spent 5 years as a QA analyst inspecting and developing numerous websites for a web agency. If any bad code or obvious errors were to make it to a customer, I’d consider myself a failure.
This very website for example has been scrutinised by my eagle eyes and there are a few issues I found in the original theme files that I have since fixed. I’ll briefly run through them to give you a nice example of a subset of my work.
What’s Changed?
Font Colour
The font of paragraph text throughout the theme has been lightened ever-so slightly to further improve legibility. From #27313D to #666666 – a subtle, but worthwhile difference.
Footer Attribution Text
This theme has the ability for the footer attribution text to be modified in the WordPress Admin, but unfortunately it appears to be broken. We’ve been digging through the code for a better fix, but in the meantime we just manually opened up the footer.php file and added our own message to line 46.
Menu Width
See the main menu at the top there? It just so happens that some of our pages have rather long names, therefore the width of allocated space within the menu had to be increased to accommodate additional text. A simple CSS fix rectified this.
List Styles
When using lists throughout the website (for example, within the footer of the page) we noticed the bullet point margins were a little out of whack. A quick removal of any
list-style:inside CSS declarations quickly cleared this up.
Homepage Text Alignment
You may notice the three inline blocks of text on our homepage. Originally centre aligned, we changed these to be left-aligned for better readability.
Google+ URL’s Not Saved in Admin Backend
When entering a Google+ URL into the theme settings page in the Admin panel, the URL will disappear upon saving the page. To rectify, in functions.php, edit line 381 from:
'google-plus' => esc_url( hybrid_get_setting('bearded_social_google') ),to:
'google-plus' => esc_url( hybrid_get_setting('bearded_social_google-plus') )Bonus: Online/offline status update
Just a quick mention to a little utility I built. The status bar at the top of every page is a live update of whether ProWP staff are available to help with your website; green means we’re online and red means we’re away. Just a nice friendly touch we thought our customers might appreciate.
Conclusion
When huge resources such as WordPress themes are distributed for free, you really can’t blame the developers for getting minor things wrong. WordPress themes take a long time to create, and it’s only natural that certain elements may not work as intended, or you find the odd typo here and there.
You’ll often find that some of the best WordPress themes available have actually been created by agencies and individuals overseas. With English being a second language to many theme developers, one needs to take into consideration how well a WordPress theme is supported, and how easy a theme is to change and modify.
ProWP.co.uk aims to bridge the gap between complex WordPress themes and you, the end user. We know WordPress inside out, and can often rectify the most frustrating of issues.
So how about you let us take a look at your website? You’ll be pleasantly surprised as to what we can find and improve.
Same problem here. Did you find a solution?
Hi there,
I have been putting together a website using the Bearded theme and it really is a nice theme.
I am however, having some issues with the ‘Animate Slider’ plugin.
Upon initial loading of the page, all of the background images and content for the slider are displayed underneath each other for a second. After the page is loaded properly the slider works as it should.
I noticed that on the home page for this website the slider is hidden momentarily while it loads and then displays afterwards.
Some indication as to how this may be accomplished would be greatly appreciated.
Thanks
Daniel
Hi Daniel,
From what I can tell the Animate Slider plugin isn’t as best optimised as it could be. I also had this issue but resorted in the end to just using one single background image for my slides.
I know it doesn’t solve the issue at hand, but it was the best workaround for me without spending time trying to hack the plugin right.
Hi Guys
Ive come across this blog and wondered if you could help, Ive built the site using bearded theme (as mentioned above) although my client has asked if a search bar can be added to the header area (below the menu lines) and also a nav bar across the top of the main image banner.
I got this far and love this theme and wondered if there was any way of dropping these in??
Let me know your thoughts.
Thanks
David Luukas
Hi David,
You’ll have to do some custom coding for these. As always we recommend using a Child Theme for any modifications.
For the nav menu, you can re-use your existing menu (or create a whole new one) by following this guide: http://codex.wordpress.org/Navigation_Menus
It’s then a case of CSS positioning and styling it accordingly.
For the search bar, just find your preferred location within the HTML of the theme page
header.php, and create a widgetised area – http://codex.wordpress.org/Widgetizing_ThemesThen just drag the Search widget into the area from the WP Admin.
I assume being a web designer you know how to do all of this, but let us know if you need somebody to help.