Shortcodes

This page contains all the shortcodes this theme features. You can usem everywhere in the theme.. 🙂 Feel free to use them and if something goes wrong or you do not understand it shoot us an email at support@ketchupthemes.com . Below you can find all the shortcodes, their code and examples. A Word of warning: When using shortcodes you should not leave a space between the ‘[‘ and the shortcode code.


Content & Layouts

1. Row shortcode — It creates a new row.Should use it always first.

[ new_row class="special_class" id="special_id" ] ...Content goes here ,you should use columns ... [ /new_row ]
This is a text in a new row. As you can see it is not align well because you need to nest in in a column or in columns..

2.Full width columnIt should be used inside a row. It creates a full width element insiden this row.

[ one_full_column class="special_class" id="special_id" ] ...Content goes here [ /one_full_column]
This text is inside a new full width column. All columns are nested columns in a row. As you can see this text is perfectly aligned within this column.

3. Half columns — You can add columns till you reach 1/1. For example you can have up to 2 half columns within a row.

[ half_column class="special_class" id="special_id" ] ...Content goes here ... [ /half_column]
This text is inside a new half width column. All columns are nested columns in a row. As you can see this text is perfectly aligned within this column.
This text is inside a new half width column. All columns are nested columns in a row. As you can see this text is perfectly aligned within this column.

4. 1/3 Columns

[ a_third_column class="special_class" id="special_id" ] ...Content goes here ... [ /a_third_column]
This text is inside a third column. You can have up to three “third columns in a single new row.
This text is inside a third column. You can have up to three “third columns in a single new row.
This text is inside a third column. You can have up to three “third columns in a single new row.

5. 1/4 Columns

[ a_fourth_column class="special_class" id="special_id" ] ...Content goes here ... [ /a_fourth_column]
This text is inside a fourth column. You can have up to four “fourths” columns in a single new row.
This text is inside a third column. You can have up to four “fourths” columns in a single new row.
This text is inside a third column. You can have up to three “fourths” columns in a single new row.
This text is inside a third column. You can have up to three “fourths” columns in a single new row.

6. 1/6 Columns

[ a_sixth_column class="special_class" id="special_id" ] ...Content goes here ... [ /a_sixth_column]
This text is inside a sixth column. You can have up to six “sixth” columns in a single new row.
This text is inside a sixth column. You can have up to six”sixth” columns in a single new row.
This text is inside a sixth column. You can have up to six “sixth” columns in a single new row.
This text is inside a sixth column. You can have up to six “sixth” columns in a single new row.
This text is inside a sixth column. You can have up to six “sixth” columns in a single new row.
This text is inside a sixth column. You can have up to six “sixth” columns in a single new row.

7. 2/3 Column – This is a special column of 66.7% percent width. You can use it with the “a_third_column” in the same row.

[ a_two_third_column class="special_class" id="special_id" ] ...Content goes here ... [ /a_two_third_column]
Aenean non tincidunt nisi, et ullamcorper ante! Pellentesque quis rhoncus sem. In in nisi lacinia, sagittis justo vitae, mattis ligula.

8. 3/4 Column – This is a special column of 75% percent width. You can use it with the “a_fourth_column” in the same row.

[ a_three_fourth_column class="special_class" id="special_id" ] ...Content goes here ... [ /a_three_fourth_column]
Aenean non tincidunt nisi, et ullamcorper ante! Pellentesque quis rhoncus sem. In in nisi lacinia, sagittis justo vitae, mattis ligula.nisi, et ullamcorper ante! Pellentesque quis rhoncus sem. In in nisi lacinia, sagittis justo vitae, mattis ligula.

9. 5/6 Column – This is a special column of 80% percent width. You can use it with the “a_sixth_column” in the same row.

[ a_five_sixth_column class="special_class" id="special_id" ] ...Content goes here ... [ /a_five_sixth_column]
Aenean non tincidunt nisi, et ullamcorper ante! Pellentesque quis rhoncus sem. In in nisi lacinia, sagittis justo vitae, mattis ligula.nisi, et ullamcorper ante! Pellentesque quis rhoncus sem. In in nisi lacinia, sagittis justo vitae, mattis ligula.

Buttons

This theme utilizes the Bootstrap 3 buttons with the help of the fontawesome icons. Buttons are actually links styled as buttons. You can set the target url if any.

10. Simple Buttons – Links

[ button class="special_class" id="special_id" type="btn-primary" size="btn-md" button_text="Link Text" url="http://example.com" url_target="_blank" fontawesome_class="fa-flag fa-2x"]

11. Spacer – A spacer adds space (margin top and margin bottom). By default it sets 10px top and 10px bottom margins..You can also add some padding top and padding bottom.

[ spacer class="special_class" id="special_id" margin_top="10px" margin_bottom="10px" padding_bottom="0px" padding_top= "0px"]

12. Title. Use this shortcode to create section titles . You can use it everywhere.There also an option of adding a subtitle as well.

[ title css_class="special_class" id="special_id" title="Title goes here" subtitle="Subtitle goes here" type="blank or inverted"]

Title goes here

This is the subtitle and it goes down here.Feeling free..

Only title without subtitle

I am an inverted title

13. Banner. Use this shortcode to create a section banner. You add an image url +the banner’s URL if there is any. Every image you upload it is made responsive.

[ banner class="special_class" id="special_id" banner_img_url="url here" banner_url=""]
banner
banner

14. Background color. You can wrap your contents, columns, rows into a background colored section..

[ background_color css_class="special_class" id="special_id" background_color="#colorhex" ]...content...[ /background_color]
This text is inside a third column. You can have up to three “third columns in a single new row.
This text is inside a third column. You can have up to three “third columns in a single new row.
This text is inside a third column. You can have up to three “third columns in a single new row.

15. Background Image. You can wrap your contents, columns, rows into an image background.

[ background_image css_class="special_class" id="special_id" background_img_url="background_img_url" image_height="write image height" ]...content...[ /background_image]

Ps: You can now also use the [ background_pattern ] shortcode.

Title goes here


Content Blocks, Sliders & Carousels

Maybe the most interesting part of the shortcodes are presented here.

16. Custom content block .

[ custom_content_block css_class="special_class" id="special_id" title="Block Title" subtitle="Block Subtitle" image_url="block_featured_image_url" content="text text and...text" read_more_link="http://example.com" read_more_text="Button Text"]
Nice title here..

Nice title here..

Block Subtitle

Mauris molestie pellentesque neque, vel sagittis felis placerat porta! Pellentesque..Mauris molestie pellentesque neque, vel sagittis felis placerat porta!

Block Title

Block Title

Block Subtitle

Mauris molestie pellentesque neque, vel sagittis felis placerat porta! Pellentesque.. Mauris molestie pellentesque neque, vel sagittis felis placerat porta!

Block Title

Block Title

Block Subtitle

Mauris molestie pellentesque neque, vel sagittis felis placerat porta! Pellentesque..Mauris molestie pellentesque neque, vel sagittis felis placerat porta!

Block Title

Block Title

Block Subtitle

Mauris molestie pellentesque neque, vel sagittis felis placerat porta! Pellentesque..Mauris molestie pellentesque neque, vel sagittis felis placerat porta vel sagittis felis placerat porta!

Block Title

Block Title

Block Subtitle

Mauris molestie pellentesque neque, vel sagittis felis placerat porta! Pellentesque.. Mauris molestie pellentesque neque, vel sagittis felis placerat porta! vel sagittis felis placerat porta


17. Category block. You can use this shortcode to create post block from certain categories.

[ category_block class="special_class" id="special_id" category_slug="The post category slug" posts_number="4"]

No posts found for this category..

No posts found for this category..

No posts found for this category..

No posts found for this category..

No posts found for this category..

No posts found for this category..

17. Tag block. You can use this shortcode to create post block from certain tags.

[ tag_block class="special_class" id="special_id" tag_slug="The tag slug" posts_number="3"]

Tag Blocks as well...

No posts found for this category..

No posts found for this category..

18. Posts Slider. You can add a very slick posts carousel (latests posts) whenever you need it. Just add the shortcode below.

[ posts_slider css_class="special_class" id="special_id" post_number="5" orderby="title" category_slug="leave blank for all" post_excerpt_length="20" ] 
5 Social Justice Articles to Read This Week
5 Social Justice Articles to Read This Week

Here at NJ Spark, more than a dozen Rutgers students will be reporting on social injustices in and around the...

Opinion: How worried should college students be about finding work?
Opinion: How worried should college students be about finding work?

By Vivian Sanchez - @vivalaviviannn #HelpMeImPoor, #Brokecollegestudent, and #HireMePls are popular hashtags seen across Twitter, Instagram, and Facebook. They are often...

Opinion: There is no excuse for allowing lead in children’s drinking water
Opinion: There is no excuse for allowing lead in children’s drinking water

By Rose McNulty  — @rose_mcnulty In the wake of the water crisis in Flint, Michigan, cities around the country are...

5 Social Justice Articles to Read This Week
5 Social Justice Articles to Read This Week

Here at NJ Spark, more than a dozen Rutgers students will be reporting on social injustices in and around the...

5 Social Justice Articles to Read This Week
5 Social Justice Articles to Read This Week

Here at NJ Spark, more than a dozen Rutgers students will be reporting on social injustices in and around the...


19.Posts Carousel. You can add a nice and slick carousel.

[ posts_carousel css_class="special_class" id="special_id" post_number="5" orderby="date" category_slug="leave blank for all" post_excerpt_lenght="10" carousel_posts_number="the number of the carousel items"] 
css.php