- Pre-defined button colors: Black, White, Grey, Red, Blue, Green, Yellow, Pink, Brown and Orange
- Specify your own colors! Unlimited color combinations!
- Beautiful and easy to use admin panel!
- Button styles! Choose between Normal, Gradient and Stitched styled buttons!
- Awesome conversion focused button Headlines and Sub-Headlines (optional)!
- No images needed, just pure CSS!
- Search engine optimized buttons: Fully crawlable, W3C valid code, Nofollow or Follow links and Link-Titles!
- Dynamically sets height and width according to your theme’s link font and base size.
- Possibility to manually override the height and width of the button.
- Open your links in a new window (or tab) or have them open links in the same browser window.
- Simple usage, but with optional advanced settings.
- Admin panel to set your own custom fallbacks with dropdowns and colorpicker. No need to specify all your buttons with the same attributes anymore!
- Add the shortcode in posts, pages and widgets (through the text-widget)
[DKB url="http://dkoated.com/" text="Your headline here" type="extralarge|large|normal|small|extrasmall" color="black|white|grey|red|green|blue|orange|yellow|pink|brown|#000000|#ff0080|..."]
Advanced Usage (all options):
[DKB url="http://dkoated.com/" text="Main Button Text" desc="Sub-headline of button" title="Link SEO title" type="extralarge|large|normal|small|extrasmall" style="normal|gradient|stitched" color="black|white|grey|red|green|blue|orange|yellow|pink|brown|#000000|#ff0080|..." textcolor="#000000|#ff0080|#ffffff|..." height="100" width="100" opennewwindow="yes|no" nofollow="yes|no" custom="yes|no"]
- url=””: Requires a full link, including http:// or https://
- text=””: Displays as the button main text
- desc=””: Displays as the button sub-headline
- title=””: Title sets the hover popup and allows to include more keywords for search engine optimization
- type=””: Sets the button type (choose from extralarge, large, normal, small or extrasmall)
- style=””: Sets the button style (choose from normal, gradient or stitched)
- color=””: Sets the button color (options available: black, white, grey, red, blue, green, yellow, pink, brown, orange or use your own hex-color, such as #ff0080 or #000000)
- textcolor=””: Sets the button’s text color (options available: use your own hex-color, such as #ff0080 or #000000)
- width=””: Sets the width of the button (width in pixel, without “px”)
- height=””: Sets the height of the button (height in pixel, without “px”)
- opennewwindow=””: Opens the link in a new window or in the same window (choose either “yes” or “no”)
- nofollow=””: Forces search engines to either follow the link or to ignore the link, thus not visiting the links URL
- custom=””: Forces the button to be rendered in the colors specified in the admin panel’s custom colors
Please visit DKOATED CTA Buttons WordPress Plugin Page for more information and DKOATED CTA Buttons WordPress Plugin Demo Page for a working demo.
You can either use the WordPress built-in installer and upgrader or you can install the plugin manually.
- Search for ‘DKOATED CTA Buttons’ through the built-in Plugin menu in WordPress
- Click on ‘Install’, then click on ‘Activate’ (or ‘Activate plugin’)
- Download the plugin and extract the Zip archive locally
- Upload the extracted folder ‘dkoated-cta-buttons’ to your ‘/wp-content/plugins/’ directory
- Activate the plugin through the ‘Plugins’ menu in WordPress
- How do I use the plugin?
Easy: Just add the following code to either a post or page:
[DKB url="http://dkoated.com/" text="Main Button Text" desc="Sub-headline of button" title="Link SEO title" type="large|normal|small|extrasmall" color="black|white|grey|red|green|blue|orange|yellow|pink|brown" width="100" opennewwindow="yes|no" nofollow="yes|no"]. As you may see in the code, there are many options to choose from. Just remove the ones you don’t want. All options you choose not to use, will default to their default settings.
- But do I need to add that WHOLE thing?
No. Actually there are no required attribute fields for the shortcode. Theoretically, the minimum code you need to use is:
[DKB], but that wouldn’t make a lot of sense would it? I highly recommend to at least use the “url” and “text”-attributes:
[DKB url="http://dkoated.com/" text="Your headline here"]. Everything else, such as the attribute fields “title”, “type”, “color”, “width”, “opennewwindow” and “nofollow” are optional and if unspecified, these attribute fields will default to their default setting.
- What are the default settings?
- “url” defaults to your WordPress homepage URL
- “text” defaults to the “url” attribute
- “desc” defaults to nothing, so a button without sub-headline will be rendered
- “type” defaults to “normal”
- “color” defaults to “black”
- “opennewwindow” defaults to “no” (opens in the same browser window)
- “nofollow” defaults to “no”, meaning the link will be followed by search engines
- “custom” defaults to “no”, meaning no custom colors will be used to render the button
- Can I use just some attribute fields?
Yes. If you want to let’s say only specify the “width” and “nofollow” attributes, you would use this code:
[DKB url="http://dkoated.com/" text="Your headline here" width="200" nofollow="yes"]. All other unspecified attributes will default to their default settings.
- The buttons look all messed up! What’s wrong?
If you are using a webkit-based browser such as Safari or Chrome and you have the plugin WP-Minify installed, you have to explicitly exclude the file ‘dkoated-cta-buttons.css’ from minification within the WP-Minify options. The css file itself is already optimized and would not benefit from a minification anyway (perhaps by only a few bytes).
- What’s up with the “size” attribute?
Specify the exact width of the button in pixels. Just add a number (without ‘px’) and watch the button grow (or get smaller). Be cautious though, the specified size will, no matter what, be set and displayed. If you specify a longer text to be displayed within the button through either “text” or “desc”, the text will be cut off if the width of the button is smaller.
- How can I specify my custom button color in the admin panel?
Easy. Add your hex-color including the ‘#’-sign in the admin panel and use the following shortcode
[DKB url="http://dkoated.com/" text="Your headline here" <strong>custom="yes"</strong>]. Please note, that the use of the attribute “custom” always takes preference before the attribute “color”.
- I am having massive problems here. Please help!
Head over to DKOATED CTA Buttons WordPress Plugin Page and leave some feedback. I’ll try to help out as much as I can, alright? 😉
Contributors & Developers
“DKOATED CTA Buttons” is open source software. The following people have contributed to this plugin.Contributors
Translate “DKOATED CTA Buttons” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
- WordPress 3.4 ready
- Minified Admin Panel code a few bytes
- Slimmed down the Admin Panel icon pngs
- Minified the button stylesheet by a few bytes
- Added custom text colors to shortcode through the use of the new attribute ‘textcolor’
- Usage: textcolor=”#ff0080″ (use hex-colors only)
- Reduced some unnecessary plugin code
- Added a donators option to remove commented code
- Fixed some admin panel bugs
- Optimization options for next milestone release 1.5.0
- Minor performance increase through prepopulated default fallbacks for attributes type, style, color, opennewwindow and nofollow
- Added option to manually set the height of the button
- Validation checks for the attributes height and width (only numeric without ‘px’)
- Added custom CSS styling in the admin panel
- Changed the way additional overriding CSS is added to the shortcode
- CSS bug fixed: Normal button styles are now working again!
- New button styles: Three different styles to choose from!
- New button size: Extra Large!
- Fixed some minor annoyances in the admin panel
- Fixed an error, where the button would not render in the text-widget
- Cleaned up the admin panel with dropdowns for attributes
- Added colorpickers to select custom colors, including a color preview
- Place the shortcode everywhere you want, including in your text-widgets!
- Fixed another bug with the “color” attribute, where specified colors were not showing
- Fixed bug with the “color” attribute, where specified colors were not showing
- Fixed bug with the “color” and “custom” attribute, where specified overwrote each other
- Ability to use hex-colors (such as ‘#ff0080’) through the attribute “color” within the shortcode
- Fixed bug with the “custom” attribute, where custom colors were not overriding the attribute “color”
- Additional failsafe checks for attributes width, colors, custom colors and hex-values within the color attribute
- Admin panel works again
- Fixed naming error
- New feature: Admin panel to set your own custom fallbacks (overriding default fallbacks for unspecified attributes)
- New feature: Specify custom button colors in the admin panel and use them with the new attribute “custom” within the shortcode
- Custom fallbacks always overrides default fallbacks
- Minified some more sourcecode for performance optimizations
- Minified CSS for max. compatibility and performance optimization
- New readme.txt with advanced attributes help
- If “width” is specified, the plugin now checks if the value is properly inserted (only numeric without ‘px’)
- New fallback for attribute “url”: If left empty or unspecified “url” now defaults to your WordPress homepage URL
- New fallback for attribute “text”: If left empty or unspecified “text” now defaults to the URL of the link
- New feature: Specify a fixed button width in pixels through the attribute “width”
- New feature: Add your own link-title (good for SEO). If left empty or unspecified, the “title”-attribute defaults to the “text”-attribute
- Fixed some line-height issues with buttons that make use of sub-headlines
- Initial Release
- WordPress 3.3 ready