How to Customize Jupiter Shortcodes

Updated on July 4, 2018

One of the essential parts of Artbees themes is shortcodes. Users can enter shortcodes via the Visual Composer by adding different Elements (Shortcodes). Here is how you can customize Jupiter shortcodes.

Customize Jupiter Shortcodes

Customize Jupiter Shortcodes Visual Composer

All shortcode implementations can be located under the components > shortcodes folder of the Jupiter theme.

Customize Jupiter Shortcodes File Structure

Each shortcode has it’s own folder which consists of the main PHP file, the Config file and assets related to the shortcode, including CSS, Javascript and helper PHP files depending on the functionality of the shortcode.

Customize Jupiter Shortcodes File Structure 2

These shortcodes can be customized by copying appropriate files into the exact same file structure inside Child Theme. Here is a step-by-step guide to customize the standard shortcodes:

1Create a Child Theme.  

Create a Child Theme out of the main theme. Click here for more detailed information on how to do that.

2Copy Files into Child Theme.  

Create a folder structure od components > shortcodes > (Folder Name of the Shortcode), then copy over the specific shortcode PHP file that you want to customize into your child theme shortcodes folder. (Dropcap shortcode in our case)

Customize Jupiter Shortcodes Child Theme

3Copy Files.  

Modify the newly copied file to customize it as you wish. (We change the span tag of Dropcap shortcode to em tag in this example)

Customize Jupiter Shortcodes Changing the Code

Customize Jupiter Shortcodes Changing the Code 2

4Test Your Customized Code on the Front End of Your Website. 

Shortcodes and Their File Names:

  • Shortcode (Element) Name: File Name
  • Advanced Google Maps: mk_advanced_gmaps.php
  • Audio Player: mk_audio.php
  • Blockquote: mk_blockquote.php
  • Blog Carousel: mk_blog_carousel.php
  • Blog Showcase: mk_blog_showcase.php
  • Blog: mk_blog.php
  • Button: mk_button.php
  • Chart: mk_chart.php
  • Circle Image Frame: mk_circle_image.php
  • Clients: mk_clients.php
  • Contact Form: mk_contact_form.php
  • Contact Info: mk_contact_info.php
  • Content Box: mk_content_box.php
  • Custom Box: mk_custom_box.php
  • Custom List: mk_custom_list.php
  • Custom Sidebar: mk_custom_sidebar.php
  • Divider: mk_divider.php
  • Dropcaps: mk_dropcaps.php
  • Edge Slider: mk_edge_slider.php
  • Employees: mk_employees.php
  • Fancy Title: mk_fancy_title.php
  • FAQ: mk_faq.php
  • Flexslider: mk_flexslider.php
  • Font Icons: mk_font_icons.php
  • Image Gallery: mk_gallery.php
  • Highlight Text: mk_highlight.php
  • Icon Box: mk_icon_box.php
  • Image: mk_image.php
  • Layerslider: mk_layerslider.php
  • Milestones: mk_milestone.php
  • Mini Callout Box: mk_mini_callout.php
  • Moving Image: mk_moving_image.php
  • News: mk_news.php
  • Padding Divider: mk_padding_divider.php
  • Page Section: mk_page_section.php
  • Portfolio Carousel: mk_portfolio_carousel.php
  • Portfolio: mk_portfolio.php
  • Pricing Table: mk_pricing_table.php
  • Revolution Slider: mk_revslider.php
  • Progress Bar: mk_skill_meter_chart.php
  • Skill Meter: mk_skill_meter.php
  • Skype Number: mk_skype.php
  • Social Networks: mk_social_networks.php
  • Process Builder: mk_steps.php
  • Testimonials: mk_testimonials.php
  • Title Box: mk_title_box.php
  • Toggle: mk_toggle.php
  • Tooltip: mk_tooltip.php
  • Accordion: vc_accordion_tab.php
Did this answer your question?