Question

“How to use shortcodes in default wordpress editor instead of pagebuilder?”

This question applies to Division - Fullscreen Portfolio Photography Theme

Answer

It is possible to use shortcodes instead of pagebuilder since all pagebuilder blocks are in fact shortcodes represented by visual blocks. You can use shortocdes inside default wordpress editor or even inside pagebuilder content block. Below is full list of supported shortcodes with all parameters.

 

PLEASE NOTE THAT ALL SHORTCODE PARAMETER NAMES HAVE TO BE WRAPPED WITH SINGLE QUOTES WHILE PARAMETERS VALUES HAVE TO BE WRAPPED WITH SINGLE QUOTES IN CASE OF STRINGS AND NOT WRAPPED IN CASE OF NUMBERS LIKE ON EXAMPLE BELOW:

[bk_twitter_widget count=3 account="username" follow_us_text="Follow Us"]

count, accountm follow_us_text are wrapped in single quoutes since those are shortcodes parameter names while count value ( 3 ) isn't ( parameter value - integer/number ), account and follow_us_text values are wrapped becasue are strings.

 

1.COLUMNS

[one_half]PLACE YOUR CONTENT HERE[/ one_half]
[one_third]PLACE YOUR CONTENT HERE[/ one_third]
[one_fourth]PLACE YOUR CONTENT HERE[/ one_fourth]
[one_fifth]PLACE YOUR CONTENT HERE[/ one_fifth]
[one_sixth]PLACE YOUR CONTENT HERE[/ one_sixth]
[two_sixth]PLACE YOUR CONTENT HERE[/ two_sixth]
[two_third]PLACE YOUR CONTENT HERE[/ two_third]
[three_fourth]PLACE YOUR CONTENT HERE[/ three_fourth]
[two_fifth]PLACE YOUR CONTENT HERE[/ two_fifth]
[three_fifth]PLACE YOUR CONTENT HERE[/ three_fifth]
[four_fifth]PLACE YOUR CONTENT HERE[/ four_fifth]
[five_sixth]PLACE YOUR CONTENT HERE[/ five_sixth]

[one_half_last]PLACE YOUR CONTENT HERE[/ one_half_last]
[one_third_last]PLACE YOUR CONTENT HERE[/ one_third_last]
[one_fourth_last]PLACE YOUR CONTENT HERE[/ one_fourth_last]
[one_fifth_last]PLACE YOUR CONTENT HERE[/ one_fifth_last]
[one_sixth_last]PLACE YOUR CONTENT HERE[/ one_sixth_last]
[two_sixth_last]PLACE YOUR CONTENT HERE[/ two_sixth_last]
[two_third_last]PLACE YOUR CONTENT HERE[/ two_third_last]
[three_fourth_last]PLACE YOUR CONTENT HERE[/ three_fourth_last]
[two_fifth_last]PLACE YOUR CONTENT HERE[/ two_fifth_last]
[three_fifth_last]PLACE YOUR CONTENT HERE[/ three_fifth_last]
[four_fifth_last]PLACE YOUR CONTENT HERE[/ four_fifth_last]
[five_sixth_last]PLACE YOUR CONTENT HERE[/ five_sixth_last]

Mix column shortcodes to get desired layout. Always make sure that total sum of columns in row equal 1. e.g 1/2 + 1/2 = ,   1/3 + 1/3 + 1/3 = 1, 1/3 + 2/3 = 1, 1/4 + 1/2 + 1/4 = 1 and last column in a row have '_last' prefix e.g:

[one_half]
PLACE YOUR CONTENT HERE
[/ one_half]

[one_half_last]
PLACE YOUR CONTENT HERE
[/ one_half_last]

You can nest other shortcodes inside columns shortcodes.

 

2. CONTACT FORM

[bk_contact_form_widget button_text="Send"]

List of parameters:

  • button_text - text that will be displayed on the contact form button e.g send

3. TESTIMONIAL WIDGET

[bk_testimonials_widget count=3 autoplay=0]

List of parameters:

  • count - how many latest testimonials to show
  • autoplay - should it rotate testimonials automatically

 

4. RECENT POSTS WIDGET

[bk_recent_posts_widget count=3 prettyphoto_enabled=0]

List of parameters:

  • count - how many latest posts to show
  • prettyphoto_enabled - if enabled 1 - thumbs will be opened in popep when clicked, otherwise not

 

5. RECENT PORTFOLIO WIDGET

[bk_recent_portfolio_widget count=3 prettyphoto_enabled=0]

List of parameters:

  • count - how many latest portfolios to show
  • prettyphoto_enabled - if enabled 1 - thumbs will be opened in popep when clicked, otherwise not

 

6. RECENT COMMENTS WIDGET

[bk_recent_comments_widget count=3 prettyphoto_enabled=0]

List of parameters:

  • count - how many latest comments to show
  • prettyphoto_enabled - if enabled 1 - thumbs will be opened in popep when clicked, otherwise not

 

7. POPULAR POSTS WIDGET

[bk_popular_posts_widget count=3 prettyphoto_enabled=0]

List of parameters:

  • count - how many popular posts to show
  • prettyphoto_enabled - if enabled 1 - thumbs will be opened in popep when clicked, otherwise not

Posts are sorted descending by the amount of comments

 

8. TWITTER WIDGET

[bk_twitter_widget count=3 account="username" follow_us_text="Follow Us"]

List of parameters:

  • count - how many latest tweets to show
  • account - name of twitter username account from which tweets will be displayed e.g 'BillyKidLab'
  • follow_us_text - text that will be displayed under tweets wrapped with link to twitter account timeline e.g 'Follow Us'

 

9. FLICKR WIDGET

[bk_flickr_widget count=3, account="flickr_id" display="latest"]

List of parameters:

  • count - how many flickr images to show
  • account - id of flickr user, please use this site to get flickr user id http://idgettr.com/
  • display - 'latest', 'random' - choose which  images to display latest or random

 

10. DRIBBBLE WIDGET

[bk_dribbble_widget count=3 account="username"]

List of parameters:

  • count - how many dribble shots to show
  • account - dribbble username

 

11. PINTEREST WIDGET

[bk_pinterest_widget count=3 account="username"]

List of parameters:

  • count - how many pinterest pins to show
  • account - pinterest username

 

12. DROPCAP

[bk_dropcap dropcap_custom_colors=1 color="#ffffff" background_color="#393737" type="round"]

List of parameters:

  • dropcap_custom_colors - if enabled 1 then custom colors will be used for dropcap, otherwise 0 theme default colors will be used
  • color - dropcap text color in HEX format e.g '#FFFFFF'
  • background_color - dropcap background color '#393737'
  • type - type of dropcap - 'round' or 'plain'

 

12. SEPARATOR

[bk_separator text="" type="content-separator" margin=30]

List of parameters:

  • text - text that will be displayed as title - only applicable if separator type is set to 'content-separator'
  • type - type of separator:
    • 'content-separator' displays line and optional text with link to the top of page
    • 'plain' - displays only balnk space - no title, no line
  • margin - bottom margin of separator described in pixels e.g 30

 

13. BUTTON

[bk_button size="normal" button_custom_colors=0 color="#ffffff" hover_color="#ffffff" link="" target="_self"]

List of parameters:

  • size - button size - 'small', 'normal', 'large'
  • button_custom_colors - if enabled 1 then custom colors will be used for button, otherwise 0 theme default colors will be used
  • color - background color of button in default state in HEX format e.g '#EEEEEE'
  • hover_color - background color of button in hover state in HEX format e.g '#DDDDDD'
  • link - link for button e.g http://google.com
  • target - what will happen when button is clicked:
    • '_self' - link will be opened in the same window
    • '_blank' - link will be opened in new window

​​​

14. BIG TEXT

[bk_big_text size=60]

List of parameters:

  • size - size of text descirbed in pixels

 

15. HIGHLIGHT

[bk_highlight highlight_custom_colors=0 color="#ffffff" background_color="#555555"]TEXT TO HIGLIGHT[/bk_highlight]

List of parameters:

  • highlight_custom_colors - if enabled 1 then custom colors will be used for highlight, otherwise 0 theme default colors will be used
  • color - text color of highlight in HEX format e.g '#FFFFFF'
  • background_color - background color of highlighted text e.g '#555555'

TEXT that will be highlighted has to be wrapped inside shortcode like in example above

 

16. SOCIAL ICONS

[bk_social icon="facebook" text="Follow Us" link="http://facebook.com/username" target="_self"]

List of parameters:

  • icon - which social icon to show:
    • 'aim',
    • 'behance' 
    • 'blogger'
    • 'digg'
    • 'dribble'
    • 'ember'
    • 'evernote' 
    • 'facebook'
    • 'flickr'
    • 'forrst'
    • 'github'
    • 'google'
    • 'last-fm'
    • 'linkedin'
    • 'paypal'
    • 'quora'
    • 'rss'
    • 'share-this'
    • 'skype'
    • 'tumblr'
    • 'twitter'
    • 'vimeo'
    • 'yahoo'
    • 'you-tube'
    • 'pinterest'
    • 'email'
  • text - text to show when icons is hovered
  • link - link which will wrap social icon
  • target - '_self' - same window, '_blank' - new window

 

17. PRICING TABLE

[bk_pricing_table pricing_table_id=1234]

List of parameters:

  • pricing_table_id = id of pricing table to display. 

In order to get pricing table please go to WP Admin -> Pricing Table -> All Pricing Tables and click edit on pricing table that You want to display. On the pricing table edit page search for pricing table id ( post variable in string ) in Your browser url/adress field e.g http://www.yoursite.com/wordpress/wp-admin/post.php?post=4559&action=edit. Copy pricing table id, in this case 4559.

 

18. PROGRESSBAR

[bk_progress_bar progress_bar_custom_colors=0 progress=50 animated=1 overlay=1 text="" color="#FF4629" background_color="#f8f8f8"]

List of parameters:

  • progress_bar_custom_colors - if enabled 1 then custom collors will be applied to progressbar, otherwise 0 theme default colors will be used
  • progress - overall progress of progress bar described in percent e.g 0 -> progressbar empty, 50 -> progressbar filled in half, 100 -> progressbar full
  • animated - if enabled 1 then progressbar will be animated form 0% to progress value described above once entered a viewport of browser, otherwise 0 progressbar will be set to progrees value at the pageload
  • overlay - if enabled 1 then animated image overlay will be applied to progressbar, otherwise 0 no overlay will be used and progressbar will be plain
  • text - text to display above progressbar e.g 'project progress'
  • color - color of progressbar fill
  • background_color - color of progressabr background

 

19. TABS

[bk_tabs]

  [bk_tab title="tab 1"]

     PLACE CONTENT HERE

  [/bk_tab]

  [bk_tab title="tab 2"]

     PLACE CONTENT HERE

  [/bk_tab]

  [bk_tab title="tab 3"]

     PLACE CONTENT HERE

  [/bk_tab]

[/bk_tabs]

List of parameters:

  • bk_tabs shortcode have no parameteres
  • each one of nested tab ( bk_tab shortcode ) has title parameter

NOTE! Please always make sure that bk_tab shortcodes are inisde bk_tabs shortcode which organizes all tabs into one module.

 

20. ACCORDION

[bk_accordion 'closeable'=0]

  [bk_accordion_section title='section 1']

    PLACE YOUR CONTENT HERE

  [/bk_accordion_section]

  [bk_accordion_section title='section 2']

   PLACE YOUR CONTENT HERE

  [/bk_accordion_section]

  [bk_accordion_section title='section 3']

    PLACE YOUR CONTENT HERE

  [/bk_accordion_section]

[/bk_accordion]

List of parameters of bk_accordion:

  • closeable - if enabled 1 accordion can be collapsed by user, otherwise 0 at least one section will remain opened at a time

List of parameters of bk_accordion_section:

  • title - title of accordion section

NOTE! Please always make sure that bk_accordion_section shortcodes are inisde bk_accordion shortcode which organizes all section into one module.

 

21. TOGGLE

[bk_toggle title='Toggle' closed=0]

  PLACE YOUR CONTENT HERE

[/ bk_toggle]

List of parameters:

  • title - title of toggle
  • closed - if enabled 1 then toggle will be closed on page load, otherwise 0 it will remain open

 

22. VIDEO

[bk_video video_link='http://youtube.com/watch?v=xxxxxxxxxxxxx' width=16 height=9]

List of parameters:

  • video_link - link to Youtube or Vimeo video
  • width & height - describes aspect ratio of embedded video - it may be its resolution in pixels if known e.g 400 x 300 ( without pixels px suffix ) or aspect ratio like in case of movies 4:3, 16:9 etc...

 

23. BLOG

[bk_blog base_size="small" post_per_page=12 blog_navigation="load_more_button" ajax_load_more_count=4 gutter=0 show_cats=-1]

List of parameters:

  • base_size - three base sizes available specifies to how many columns space will be divided and how bit thumbs will be:
    • small
    • medium
    • large
    • bk-classic-blog - classic fullwidth blog
  • post_per_page - number of posts to be displayed per page ( in case of pagination ) or on pageload for other navigation ( infinite scroll, load more button, none ), use -1 to show all posts
  • blog_navigation - choose type of navigation for blog page:
    • load_more_button - button that allows to load more posts when clicked
    • infinite_scroll - no navigation, when user reaches end of page set of new blog posts are loaded automaticaly
    • pagination - default regular pagination
    • none - no navigation
  • ajax_load_more_count - how many posts to load when user clicks load more button or scroll to the bottom of page when infinite scroll is used
  • gutter - gutter ( spacing ) described in pixels between posts thumbs in layout
  • show_cats - choose which categories to show on blog page, if -1 then all categroies are shown, otherwise it require category slug e.g 'seo' for one category or string 'seo, social-media' for few categories

 

24. PORTFOLIO

[bk_portfolio show_filter=1 layout='grid' base_size='small' description='none' image_effect='bk_zoom' image_overlay='icon' gutter=10 remove_side_gutter=0 show_cats=-1 portfolio_order_by='date' portfolio_order='ASC' port_navigation='load_more_button' port_per_page=12 ajax_load_more_count=3]

List of parameters:

  • show_filter - if enabled 1 filter based on portfolio categories will be displayed above portfolio, otherwise no filter will be displayed
  • filter_mode - choose how filtered elements will behave
    • shuffle - only matched elements are visible, inactive hidden
    • fade - matched elements visible and interactive, not matched faded - all items stay in the same place
    • fade_and_shuffle -  matched elements visible, interactive and moved to top of portfolio, not matched faded out ( semi transparent ) and pushed at the bottom
  • layout => 'grid',    
    • grid => equal grid - all thumbs have same size and aspect ratio,
    • metro => windows 8 like layout with 4 thumb sizes 1x1, 1x2, 2x1, 2x2
    • masonry => masonry layout where each image have different height so natural aspect ratio is preserved and whole image is displayed - no cutoff
    • mixed_masonry => masonry layout where each image have its own height and two widths are allowed small and large ( two times bigger than small )
  • base_size - three base sizes avalaible, choose how big thumbs will be and to how many columns space will be divided:
    • small,
    • medium,
    • large
  • description - optional description displayed below thumb
    • none,
    • title,
    • excerpt,
    • title_and_excerpt
  • image_effect - optional hover image effect
    • bk_none - no effect,
    • bk_zoom - zoom in effect,
    • bk_grayscale - color to grayscale, 
    • bk_reverse_grayscale - grayscale to color,
  • image_overlay - optional hover overlay for image
    • none - no overlay,
    • title - title overlay,
    • title_and_tags - title with portfolio tags below,
    • title_and_cats -  title with portfolio categories below,
    • tags - only portfolio tags,
    • cats - only portfolio categories,
    • icon - cross icon,
  • gutter - gutter ( space between thumbs ) for portfolio items described in pixels
  • remove_side_gutter - if enabled 1 then side space/gutter if any will be removed, otherwise it will remain - usefull when big gutter above e.g 30px is set and portfolio is isnide fixed width page,
  • show_cats - if -1 then all categroies are shown, otherwise it require filter slug e.g 'seo' for one category or string 'seo, social-media' for few categories - this options decides which categories to show
  • portfolio_order_by - choos how to order portfolio thumbs
    • author - Order by author.
    • ID - Order by post id. Note the captialization.
    • title - Order by title.
    • name - Order by post name (post slug).
    • date - Order by date.
    • modified - Order by last modified date.
    • comment_count - Order by number of comments (available with Version 2.9).
    • menu_order - Order by Page Order attribute
  • portfolio_order - how to order portfolio thumbs,
    • ASC - ascending,
    • DESC - descending
  • port_navigation - choose navigation for portfolios that will be displayed below thumbs
    • load_more_button - big button that allows to load new subset of thumbs when clicked,
    • infinite_scroll - when end of page is reached by user, new subset of thumbs will be loaded automaticaly,
    • pagination - regular pagination with links to other pages,
    • none - no naviagtion
  • port_per_page - number of portfolios to be displayed per page ( in case of pagination ) or on pageload for other navigation ( infinite scroll, load more button, none ), use -1 to show all portfolios
  • ajax_load_more_count - how many posts to load when user clicks load more button or scroll to the bottom of page when infinite scroll is used

 

25. GALLERY

[bk_gallery layout='grid' base_size='small' image_effect='bk_zoom' image_overlay='icon' gutter=10 remove_side_gutter=0 show_cats=-1 gallery_order_by='date' gallery_order='ASC' port_navigation='load_more_button' port_per_page=12 ajax_load_more_count=3]

List of parameters:

  • layout - choose gallery layout,    
    • grid => equal grid - all thumbs have same size and aspect ratio,
    • metro => windows 8 like layout with 4 thumb sizes 1x1, 1x2, 2x1, 2x2
    • masonry => masonry layout where each image have different height so natural aspect ratio is preserved and whole image is displayed - no cutoff
    • mixed_masonry => masonry layout where each image have its own height and two widths are allowed small and large ( two times bigger than small )
  • base_size - three base sizes avalaible, choose how big thumbs will be and to how many columns space will be divided:
    • small,
    • medium,
    • large
  • image_effect - optional hover image effect
    • bk_none - no effect,
    • bk_zoom - zoom in effect,
    • bk_grayscale - color to grayscale, 
    • bk_reverse_grayscale - grayscale to color,
  • image_overlay - optional hover overlay for image
    • none - no overlay,
    • title - title overlay,
    • icon - cross icon,
  • gutter - gutter ( space between thumbs ) for portfolio items described in pixels
  • remove_side_gutter - if enabled 1 then side space/gutter if any will be removed, otherwise it will remain - usefull when big gutter above e.g 30px is set and portfolio is isnide fixed width page,
  • show_cats - if -1 then all categroies are shown, otherwise it require filter slug e.g 'seo' for one category or string 'seo, social-media' for few categories - this options decides which categories to show
  • gallery_order_by - choos how to order portfolio thumbs
    • author - Order by author.
    • ID - Order by post id. Note the captialization.
    • title - Order by title.
    • name - Order by post name (post slug).
    • date - Order by date.
    • modified - Order by last modified date.
    • menu_order - Order by Page Order attribute
  • gallery_order - how to order gallery thumbs,
    • ASC - ascending,
    • DESC - descending
  • port_navigation - choose navigation for gallery that will be displayed below thumbs
    • load_more_button - big button that allows to load new subset of thumbs when clicked,
    • infinite_scroll - when end of page is reached by user, new subset of thumbs will be loaded automaticaly,
    • pagination - regular pagination with links to other pages,
    • none - no naviagtion
  • port_per_page - number of gallery thumbs to be displayed per page ( in case of pagination ) or on pageload for other navigation ( infinite scroll, load more button, none ), use -1 to show all gallery thumbs
  • ajax_load_more_count - how many gallery thumbs to load when user clicks load more button or scroll to the bottom of page when infinite scroll is used

 

26. QUICK GALLERY

[bk_quick_gallery layout='grid' base_size='small' image_effect='bk_zoom' image_overlay='icon' gutter=10 remove_side_gutter=0 quick_gallery_id=1234]
  • layout - choose gallery layout,    
    • grid => equal grid - all thumbs have same size and aspect ratio,
    • metro => windows 8 like layout with 4 thumb sizes 1x1, 1x2, 2x1, 2x2
    • masonry => masonry layout where each image have different height so natural aspect ratio is preserved and whole image is displayed - no cutoff
    • mixed_masonry => masonry layout where each image have its own height and two widths are allowed small and large ( two times bigger than small )
  • base_size - three base sizes avalaible, choose how big thumbs will be and to how many columns space will be divided:
    • small,
    • medium,
    • large
  • image_effect - optional hover image effect
    • bk_none - no effect,
    • bk_zoom - zoom in effect,
    • bk_grayscale - color to grayscale, 
    • bk_reverse_grayscale - grayscale to color,
  • image_overlay - optional hover overlay for image
    • none - no overlay,
    • icon - cross icon,
  • gutter - gutter ( space between thumbs ) for portfolio items described in pixels
  • remove_side_gutter - if enabled 1 then side space/gutter if any will be removed, otherwise it will remain - usefull when big gutter above e.g 30px is set and portfolio is isnide fixed width page,
  • quick_gallery_id - id of qucik gallery to display

 

In order to get quick gallery id navigate to WP Admin -> Qucik Gallery -> All Quick Galleries and click edit on desired quick gallery. On the qucik gallery edit page search for qucik gallery id ( post variable in string ) in Your browser url/adress field e.g http://www.yoursite.com/wordpress/wp-admin/post.php?post=4559&action=edit. Copy quick gallery id, in this case 4559.

 

Updating...