These shortcodes are available by default if you are using the GitHub Version of the theme. Follow these instructions to add them to the WordPress Theme Directory version.
I wrestled with the idea of creating shortcodes for ALL of Bootstraps components but I decided that was counter productive to the mission of creating a clean simple template for Developers to work with. So I created only two for Buttons and Alerts. If you fail to specify any value within the shortcodes list of accepted parameters it will just use regular default Bootstrap settings. The shortcodes.php file is located in “DevDmBootstrap3/shortcodes.php.” It is very procedural and very basic.
1 |
[btn size='sm' type='info' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] |
The “btn” shortcode will accept 4 different parameters all based around the default Bootstrap css classes for creating buttons.
1) Size: xs (Extra Small), sm (Small), lg (Large button) and no value will use default.
2) Type: default, primary, success, info, warning, danger, link (or any button class you create using “btn-yourclass”). No value set will use ‘btn-default.’
3) Link: This must be a fully qualified URL (must have http://). link=’http://devdm.com’ – YES. link=’Devdm.com’ – NO.
4) Icon: You can put in the class for any of the Glyphicons.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
[btn size='xs' type='default' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='default' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='default' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='default' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='xs' type='info' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='info' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='info' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='info' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='xs' type='primary' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='primary' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='primary' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='primary' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='xs' type='warning' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='warning' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='warning' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='warning' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='xs' type='danger' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='danger' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='danger' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='danger' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='xs' type='success' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='success' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='success' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='success' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='xs' type='link' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='sm' type='link' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn type='link' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] [btn size='lg' type='link' link='http://devdm.com' icon="glyphicon-heart"] Button [/btn] |
1 |
[alert type='info' dismiss='yes' size='3' title='Alert Block Title'] This is an alert box that has VERY important information. [/alert] |
The “alert” shortcode will accept 4 parameters.
1) Type: error or danger, success, info, and no set value will default to “warning.”
2) Dismiss: Creates the little closing “x” in the corner for the alert to be closed.
3) Size: The span size of the alert. Defaults to “3.”
4) Title: Gives the alert the <h4 class=”alert-heading”>Title</h4> element.
This is an alert box that has VERY important information.
This is an alert box that has VERY important information.
1 2 3 4 5 6 7 |
[alert type='info' dismiss='yes' size='6' title='Alert Block Title'] This is an alert box that has VERY important information. [/alert] [alert type='danger' dismiss='yes' size='4' title='Alert Block Title'] This is an alert box that has VERY important information. [/alert] [alert type='success' dismiss='no' size='8' title='Alert Block Title'] This is an alert box that has VERY important information. [/alert] [alert dismiss='no' size='4' title='Alert Block Title'] This is an alert box that has VERY important information. [/alert] |
[…] [shortcodes] (alerts and […]
[…] [shortcodes] […]
You deleted shortcode. Could you give us the codes for achieving the effects in the post? I love both buttons and alerts you created.
Hey Jane,
I had to remove it from the WordPress Themes Directory version. They told me it was the job of a “plugin.”
So the github version of the theme contains them but not that WP Directory version.
But if you take the contents of this file:
https://github.com/dannymachal/DevDmBootstrap3/blob/master/devdmbootstrap3/shortcodes.php
and put it into your functions.php file in your theme the shortcodes will be available to you.
how to create template woocommerce: woocommerce.php and single.php with devdm.
Thanks
I would say just duplicate the index.php file and rename it to woocommerce.php … it will handle the single product views as well as the categories. 🙂