Featured templates

WordPress Cherry 3.x. How to replace images icons implemented with shortcodes

Stacy Martin April 22, 2015
Rating: 5.0. From 1 vote.
Please wait...

The tutorial will show how to add more icons implemented with shortcodes in WordPress:

Wordpress.How to add more image icons into shortcode-1

  1. Image icons are added into shortcode with IDs. Basically, icons count in shortcode is limited to 10 items. To add more icons, you can copy and paste shortcode into the page and replace the icon id like “icon10” with next index number “icon11”::

    [service_box title="title" icon="icon11" text="text" btn_text="text" btn_link="link" target="_self"]
  2. The next step is to upload a new icon image on server. Icons are located in the wp-content/themes/themeXXXXX/images folder on server. Connect to server via FTP or open File manager in cPanel and upload new images. Make sure that new icons have the same format, resolution and appropriate index number. For example, there are 10 icons in the template, the new icon should be called icon11 accordingly:

    Wordpress.How to add more image icons into shortcode-2

  3. Now you need to add a new icon into shortcode. Shortcode is inserted into page/post with the Cherry Shortcodes button which can be found at the top of page/post editor in WordPress admin panel. To make new icons appear in the shortcode layout, you should add them into the shortcode script. In most cases the icons are added with services_box shortcode. Open the wp-content/plugins/cherry-plugin/admin/shortcodes/shortcodes folder on server. Find and open the my_service_box.js file. Copy the code from the file.

  4. Paste the code into wp-content/themes/themeXXXXX/js/my_script.js file on server. Insert it at the bottom of the file.

  5. With that done, add icons numbers into the code:

    selectValues:['no', 'icon1', 'icon2', 'icon3', 'icon4', 'icon5', 'icon6', 'icon7', 'icon8', 'icon9', 'icon10', 'icon11', 'icon12'],
  6. Save changes in the file and check shortcode layout in WordPress admin panel:

    Wordpress.How to add more image icons into shortcode-3

  7. Refresh your homepage with Ctrl/Cmd+F5 to see the changes at the front-end:

    Wordpress.How to add more image icons into shortcode-4

Feel free to check the detailed video tutorial below:

HTML 5 Wordpress Themes
This entry was posted in WordPress Tutorials and tagged icon, shortcode, WordPress. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket