Ultimatum Theme and Intense Shortcodes

Facebooktwittergoogle_plusredditpinterestlinkedintumblrFacebooktwittergoogle_plusredditpinterestlinkedintumblr

A few days ago, the dev team at Ultimatum Theme announced that the Pro bundle would now also include Intense Shortcodes and DHVC Form, together these cost US$40! It is worth noting that, as with the other bundled ‘premium plugins that Ultimatum includes, you must have a current Ultimatum Pro license for the site and an Ultimatum Theme needs to be enabled in order that you can use them. Whilst Intense Shortcodes says it is ‘Visual Composer ready’ (another premium plugin that the Ultimatum Theme Pro license includes), I discovered that this plugin works on its own. Here’s a summary of its features:

  • 94 Incredible Shortcodes
  • 17 Useful Custom Post Types
  • Powerful Template Engine
  • Snippets

Up until now I have used a plugin called Post Snippets to add bits of HTML and PHP that I regularly use. Separately, I had used another plugin, Font Awesome Shortcodes for WordPress to add icons. No more! Intense Shortcodes does both. For those of you who use the same chunks of code (HTML and/or PHP), the Intense Shortcodes Template system will be right up your street. I am going to show how this works by making Intense Shortcodes templates for a footer copyright notice (and you can easily add a disclaimer if you wanted for your site) and another to insert Yoast Breadcrumbs. This assumes that you have Ultimatum Theme Pro license already installed with an Ultimatum theme enabled, and can thus see the Ultimatum Toolset in your admin screen.

Ultimatum Theme and Intense Shortcodes - Install PluginUltimatum Theme and Intense Shortcodes - Template FilesUltimatum Theme and Intense Shortcodes Switch Thumbnails Off

In the Ultimatum Toolset, click Visual Composer at the top and then click Install for Intense Shortcodes, and then activate it. You may get a notice about re-generating image thumbnails. If you intend to use the image gallery functions in Intense Shortcodes, you may need to do this. Be warned though, your images folder will grow up to four times as large with all these new thumbnails. It is possible to switch off the new thumbnail sizes in the Intense Shortcodes settings page, on the Extras tab, as shown above, which will disable the making of the seventeen additional thumbnails it sets up in WordPress.

Anyway, so far so easy. You will recall I am going to make 2 templates to use; footer copyright and Yoast breadcrumbs. Use ftp and file editor software to create the folders and files as shown above. Here are the contents of each file (note that these php files (named footer_copyright.php and yoast_breadcrumbs.php) must not have the php end tag):

1
2
3
4
5
6
7
<?php
/*
Intense Template Name: footer_copyright
Intense Template Description: Add a site copyright notice to the footer of the page
*/
 
echo "<p class='footer-copyright'>&copy; ".get_bloginfo()." ".date('Y')."</p>";
1
2
3
4
5
6
7
8
9
10
<?php
/*
Intense Template Name: yoast_breadcrumbs
Intense Template Description: Outputs site breadcrumbs, with the exception of on the home page
*/
 
if (!is_front_page()) {
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb();
}}

Ultimatum Theme and Intense Shortcodes - Header Yoast Breadcrumbs UsageUltimatum Theme and Intense Shortcodes - Footer Copyright Template Usage

The next step in Ultimatum is easy. The screenshots (one of the header layout and one of the footer layout) show a row already inserted ready for the Intense template shortcodes, and a text box to put them into. The shortcodes shown are [intense_template template="yoast_breadcrumbs"] and [intense_template template="footer_copyright"].

OK. Back after a break to fix a bug in Visual Composer and to check that the Intense Shortcodes Icon will work as expected, and it does. Up until now I have used a free plugin to provide easy access to Font Awesome icons in the WordPress post editor. A couple of my recent posts have featured a Bootstrap-like file download button, so I will show you how it is done. First, some custom.css. Open up your child theme custom css file. If you have followed my earlier posts, you will know that I called my file custom-style.css. Into that file you need to insert this snippet of css:

1
2
3
4
5
6
7
8
9
10
11
.download-button .zip-text {font-size: 80%;}
.download-button .download-file {
  margin-left: 10px;
  float: left;
}
.download-button {
  display: inline-block;
  font-size: 15px;
  line-height: 1em;
  text-align:left;
}

The above style uses the theme style for buttons (using the btn class, and for Bootstrap the green button class is btn-success). However, this button needs to look a little different to a normal button, hence the style rules. You may have to change this style and the basic button classes (btn and btn-success) for whatever your theme uses if it does not use bootstrap classes.

Ultimatum Theme and Intense Shortcodes - Font Awesome Icon Add MediaUltimatum Theme and Intense Shortcodes - Font Awesome Icon Insert Media

So, to the actual use of the Intense Shortcodes tool in the post editor. So, assuming that the file you want to offer for download is called index.php, then type one word into the post editor:

index

Select this word and click Add Media button. Either upload the zip file you want to attach, or select it from the media list. Now click the ‘Text’ tab at the top left of the editor window and make two lines of text, making sure that the new line is made using shift+enter:

1
2
<a class="btn btn-success download-button" href="http://www.yoursitename.com/filepathhere/index.zip"><span class="download-file">Download index.php
<span class="zip-text">in a ZIP archive</span></span></a>

Ultimatum Theme and Intense Shortcodes - Font Awesome Icon Edit HTMLUltimatum Theme and Intense Shortcodes - Font Awesome Icon ShortcodeUltimatum Theme and Intense Shortcodes - Font Awesome Icon Settings

Finally, place your cursor immediately after the close tag of the link class, as shown by the green arrow above in the screenshot and click the Shortcodes button. The Intense Shortcodes type selector modal box pops up. Select the Icon type. Then the Intense Shortcodes Icon Settings modal box opens. We are not going to use all the possible options, but you can read about them here. For now just select the icon that you want from the drop down list (it may take a few seconds to populate the list and make the dropdown active). Use this cheatsheet to more easily find the one you want, and simply copy and paste the name into the text field at the top of the dropdown list. I have also selected size 3 and icon color of white (#ffffff). If you do not select a color, it will first appear as black, and then change to whatever your default font color is, which doesn’t look so good, unless your default color is black anyway! Now return the post editor back to the Visual mode by clicking the ‘Visual’ tab at the top right of the editor window. Your button should look a little like this:

Download index.php
in a ZIP archive

I hope you managed to follow this, so why not explore Intense Shortcodes and see what you can discover?

Categories: Ultimatum.