Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Shaun Taylor
Shaun Taylor
2,654 Points
Posted by Shaun Taylor
Shaun Taylor
2,654 Points

Adding Custom Button types to Bootstrap/Wordpress

Hello - Ive followed the bootstrap with wordpress track and now I'm at a stage where I have the bare bones and need to customise the look and feel in order to use it for a client website.

Ive installed the Bootstrap Shortcode plugin so in the visual editor I can insert buttons. However I only get a choice of Default, Primary, Success etc... These all come with very specific colours.

I was hoping to create my own 'button types' - changing the colours to match the company colours I'm developing the theme for or at very least edit the current ones.

SO my question is; How to I create my own button type so the admin can use the bootstrap short code plugin and select a a button I've added that matches the colour of their site?

Hope someone can help. Many thanks,

Shaun.

3 Answers

James Gill
James Gill
Courses Plus Student 34,936 Points

Shaun,

If you want to preserve the Bootstrap styles for future updates (you probably do), then your options are:

  1. Add CSS styling inline, on a case-by-case basis.
  2. Write custom CSS to override specific parts of Boostrap's CSS.

The third option, of course, is to modify the Bootstrap CSS-if you have a local (non-CDN, etc.) copy. But I don't recommend that.

Hope that helps, -james

Shaun Taylor
Shaun Taylor
2,654 Points
Shaun Taylor
Shaun Taylor
2,654 Points

Hey James,

Thanks for the reply - I do indeed want to preserve the bootstrap .min.css where possible... I guess I'll have to write custom CSS and apply it to the specific div tag where the buttons live. I have a separate style sheet for customisation, So I can do it in there.

I was really hoping to be able to change the whole set of buttons to have a set that match my clients branding - However, as you say, I don't think this is possible without delving into the bootstrap CSS.

Thanks again.

Shaun.

Jay Wilburn
Jay Wilburn
22,994 Points
Jay Wilburn
Jay Wilburn
22,994 Points

You also have the option to create custom classes in addition to the Bootstrap classes, which is what I do. It saves time and allow you to keep the BS structure while adding your specific styles.