Installing Ultimatum Theme Framework

Introduction to Creating an Ultimatum Template

Other Template Details

I have already installed some test data, including posts, but a quick look at my home page shows a blank white page. Let’s fix this before we add a header and footer to our layout. Go to the Child Theme => Templates => Layouts page for the default layout, in my case it is called ‘united-default’ – yours may have a different name. Hovering the mouse over the layout name reveals the sub menu. On this you can click ‘Set Default’. The screenshot below shows before and after. Again, notice how now that it is the default, the layout row has a blue background and dark blue left hand border? Open your Home Page again, and you should have content! Success, I hope.

 Installing Ultimatum Theme Framework - Set Default Layout Installing Ultimatum Theme Framework - Home Page Test

Before we actually do the Header and Footer, we need to dome some other housekeeping. One is to upload a site logo and fetch its real URL, and the other thing to do is to make a small piece of custom code to show the Copyright notice in the footer. Before I do this though, it would be useful to understand what happens when you upload an image file to WordPress. So, best to quickly read and follow our guide on image uploading in WordPress. Hopefully, you will have uploaded your site logo now. We need to find its real URL. For this purpose, we can use the Media Item URL plugin we have already installed. Go to Media => Library in the admin side of your website, and select the List View. Hover over the logo image thumbnail and click on ‘View Image URL’ in the sub-menu that appears. You can now copy the logo image URL. Paste this somewhere safe temporarily (like notepad or another text editor).

 Installing Ultimatum Theme Framework - Find Logo URLInstalling Ultimatum Theme Framework - Set Site Logo

First, we go to our child theme => Settings => General Settings and paste the logo URL we have just obtained into the Image Logo field, change the ‘Title as logo’ setting to off and Save Changes.

Installing Ultimatum Theme Framework - Add Post Snippets

And so we get back to setting up Ultimatum Theme. Next, we need to create the code that puts our copyright notice in the footer. We will use another of the plugins that we loaded; this time it is Post Snippets. In the main left hand admin menu, go to Settings => Post Snippets. Click the Add New button on the main page twice. This will give you 2 new post snippets, both entitled ‘Untitled’. Give them (slug) titles (yoast-breadcrumbs and footer-copyright), descriptions, for both of the check the Shortcode and PHP checkboxes, and here are the two code blocks that go in the code textareas (you can copy and paste from these):

1
2
3
4
if (!is_front_page()) {
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<div class="breadcrumb"><p>','</p></div>');
}}
1
echo '<p class="footer-copyright">&copy; '.get_bloginfo().' '.date('Y').'</p>';

Save these by clicking the blue ‘Update Snippets’ button.

Installing Ultimatum Theme Framework - Create HeaderInstalling Ultimatum Theme Framework - Header Layout Rows

The last stage, now that we have done the preparation work, is to add the header and footer to our layout. So, go to the child theme => Templates and click the Layouts button at the end of the default layout row. Both the header and the footer are what Ultimatum Theme calls Partial layouts. Let’s do the header first. Click the ‘Add New’ button at the top. You will remember doing this for the main body layout. When the modal ‘Create a new layout’ box opens, give it a sensible name and change the Layout Type to Part. Click save. The Edit Layout page will appear. Click Insert Row. I have chosen the 33% 66% option on the third row of the options in the modal row style options pop-up. Insert that by scrolling down the page to the Insert button. Insert another row, this time a 100% row. Drag and drop the Ultimatum logo widget into the left column box (33% size) of the first row. Click the little blue settings cog on the top right of the box that the logo widget is in, select ‘Height / Margin / Padding’ and set the top and bottom margins to 20px each and save those settings. This is to to keep some space around the logo. Save the logo widget and use the small drop arrow at top right of the widget header to close the options.

Create a second row of 100% width and drag and drop the Ultimatum Menu widget to this row, and set the Menu Script to New Ultimatum Menu. Select the menu for you site and save these settings otherwise set to their default. Create a third row of 100% width and drag and drop the Text widget into this row, and put the post snippet shortcode you made for the breadcrumbs:

[[yoast-breadcrumbs]]

Then save the Layout, then Back to Layouts Screen.

Installing Ultimatum Theme Framework - Footer Layout Rows

For the footer, do much the same, except you need only one row of 100% width column. Drag and drop the Text widget into this row, and put the post snippet shortcode you made for the footer copyright:

[[footer-copyright]]

Again, go to the little blue settings cog and set top and bottom margin to 20px each. Then save this, save the layout and again go back to the Layouts Screen.

Installing Ultimatum Theme Framework - Edit Full LayoutInstalling Ultimatum Theme Framework - Save Finished Layout

The last thing we need to do is add the partial layouts for the head and footer to the main layout. Hover over the name of the default full layout to see the sub-menu, and click edit. The header and footer simply drag and drop into place (see the screenshot). Save that and go back to the Layouts Screen. That should be it. Check out your website front page.

Installing Ultimatum Theme Framework - United Finished Header

Back To Top

Ultimatum Global Settings

Before I dive into Ultimatum Theme, a word or two about WordPress child themes.

Not so long ago, the only option you had was to find a theme that perfectly suited your needs, or hack the code to get it to do what you needed. But, as soon as you hacked the theme code, any update would undo all that you had done. So the WordPress team came up with child themes. Based on a parent theme, it draws all that it is from that parent theme, with the exception of anything you change. You can upgrade the parent theme without fear that the child theme files would be over-written. Soon after this feature was introduced, theme frameworks appeared, that assumed you would have a child theme, and purposefully gave the user programming hooks and filters to be able to more easily customize the theme. This is what Ultimatum Theme does. So, unless you want a simple blog site that a simple theme will provide, you most likely will want a theme framework with a child theme. You do have to learn a bit more about your theme framework and customizing it, but this gives you so much more flexibility.

So, to use Ultimatum Theme, I will show you how first to make a child theme in it. It is really easy. Because we will be using a child theme, we will make no changes until we have made that child theme. To make things easy for now, I am going to select one of the Bootswatch 3 themes. You can pick the one you most like as well – you can see them on the page I have linked to, just scroll down the page a bit. I am going to use the United theme, which is quite orange, as you can see!! When picking a Bootswath 3 theme, ignore the menu, as the Bootstrap menus are quite poor anyway. Focus your choice on factors such as the font used, the background color, and the color and style of elements like buttons, panels, wells, etc.

Installing Ultimatum Theme - Bootswatch 3 United ThemeInstalling Ultimatum Theme - Create Child Theme

In your admin window, select Ultimatum in the left hand menu, and then Templates. You will see a warning about default templates and default layouts. We are about to fix that. You might want to have a simple name ready thought up for your child theme. I am going to call mine ‘United’, after the theme name. Try to make your name one word without spaces or special characters. Click the ‘Create Child Theme’ button at the top of the screen. Note how I have used a capital U for United in the Theme Name, but for the ‘slug’ (which you cannot see), the name WordPress will really use, will only have lower case letters and no special characters. This is important. Click the blue Save button and you will get the message ‘Your Child theme is created’. There will be a link to take you to the Themes panel, so click this. You will now see the WordPress Admin => Appearance => Themes panel. Hover over the United Child Theme and click the activate button.

Installing Ultimatum Theme - Child Theme NameInstalling Ultimatum Theme - Activate Theme

Now on your Admin side menu you can see your new child theme name as a menu item. Click this and it will take you to the Theme Settings page. You are going to need a site logo and a site favicon at some point, but you don’t need these for now. I do, however, switch off the Display Site Description (tagline). Across the top of this page you will see General Settings, Sidebar Settings, Advanced Settings and a blue Save Settings button. When you are done with each page, you need to save the changes for each page using this button. Also, if you have any of the Ultimatum ‘Connect’ plugins, a Connect tab will appear. Open the Advanced Settings => Extra Settings tab. All but one of the options should be changed to ‘On’. The exception is Legacy Shortcodes, as I assume you did not have Ultimatum v2.3.

I should make a small note here to say that it is no longer necessary to install Ultimatum Library, as that functionality is now rolled into the CSS selectors in the settings panels of Ultimatum. However, the Ultimatum System Report still shows two warnings about fonts, so ignore these for now.

Installing Ultimatum Theme - Settings GeneralInstalling Ultimatum Theme - Extra Settings

Another page with no changes needed is the Advanced Settings => Scripts and API Settings page. I show it here in a screenshot though. First, with the new version 2.8.x Ultimatum no longer has the ‘combine css’ button. About time that disappeared as it broke most sites anyway. Even better, the Ultimatum Team have no added two power user options. Once you have pretty much designed your site, you will want to tune it for speed, and in WordPress that means load as many assets as you can from a CDN (Content Delivery Network) and you would wish to ‘dequeue’ (not load) any assets multiple times if they are loaded by many different themes and plugins. Don’t bother with the ‘Do not use Combined and minified JS’ and ‘CDN settings’ buttons for now, but don’t forget that they are there for later. Secondly, you can set the appearance of the Pretty Photo lightbox, but I would leave it at Facebook style for now (in fact, I dequeue it as I don’t use it – go Power User!!). Finally, before we start to make the template, we need to make some final tweaks to the tags that Ultimatum uses on content pages. By default, these are not set correctly. Again on the Advanced Settings dropdown, choose Tag Settings. Make sure that the Tag for Logo is set to ‘<div>’ and that the Tag For Articles (Single Post/Page) is set to ‘<h1>’. Well, that should do it for now. The next chapter will be about making the Ultimatum Theme template.

Installing Ultimatum Theme - Script and API SettingsInstalling Ultimatum Theme - Tag Settings

Back To Top

Creating the Body Layout

Let’s jump right in and in the Admin menu, select your child theme => Templates. That warning message we saw a while ago is still there, meaning that our site is still a blank white page. Click the Add New button. The Template Details page will open.

Installing Ultimatum Theme - Add New TemplateInstalling Ultimatum Theme - Template Details

We need to give this template a name, so I will use ‘united-default’, but you should choose one that is appropriate to your needs. In the grid framework, we are going to use Twitter Bootstrap (recommended). At the time of writing, this is Twitter Bootstrap v3.3.4 (this is the latest version of Bootstrap, with V4 due later in 2015), and provides great support ‘out of the box’ for mobile devices. There are two other options for older frameworks; do not use these for new themes. The page options now change, allowing us to select a Bootswatch; I had already said I would choose ‘United’. You can choose which one you want. The template type needs to be responsive; meaning it will re-arrange parts of the page as the width of the screen on the viewing device changes, and will also re-size things for you. The other options I am not going to change. Note the ‘Use CDN’ option. Power users may want to use this, but for now leave it set to ‘no’. Save this using the big blue ‘Save Template’ button at the bottom of the page. The Templates page will re-appear.

Installing Ultimatum Theme - TemplatesInstalling Ultimatum Theme - Layouts Main

The warning is still there, but it now only refers to the default layout being missing. Hover over the name of the template on this page, and a sub-menu will appear. Click on ‘Set Default’. Notice that as you have done this, the background for that template row is now blue, and the left edge has a thick dark blue border. This is to provide a visual reminder that this template is the default. Any time that you need to re-visit the detailed settings for the template, hover over the name of the template on this page, and the sub-menu will appear, and clicking ‘edit’ (shown in a green highlight rectangle in the screenshot) will take you back to the Template Details page, where you selected the grid framework. To resolve that last warning message, now click the ‘layouts’ link on the right of the screen. Click the ‘Add New button and a modal options box appears. You are now going to make the main body layout that your site will, by default, use. Later, you can optionally make more alternative layouts that you can allocate to specific parts of your web site. Enter a suitable name for this layout, one that will be obvious to you what it is! Leave the Layout type as ‘Full’ and click Save.

Installing Ultimatum Theme - Insert RowInstalling Ultimatum Theme - Row Options

The ‘Edit Layout’ page will now open, with three content areas available for use; Header, Body and Footer. This ‘Edit Layout’ page is probably the most useful feature of Ultimatum Theme. Here you can add rows and columns to your layout, and place content in them with by dragging and dropping the Ultimatum Widgets that you can see under the layout area. Note, these are special widgets just for Ultimatum, and are not the general WordPress widgets that you might also have available, depending on what plugins you install. Before we add a row, in blue I have highlighted a new option for Ultimatum 2.8; Layout options. This allows you to make a layout full width (so-called fluid layout), have a sticky header, a push down footer and other related options – we will explore these later. For now all I am going to do is to have a single row with one main content column in it.

First, you must insert a row, using the button at the top. Another modal options box opens. I have selected a 100% row and scrolled down to the Insert button. Before you do press the button to insert, look at all the different types of rows, and notice that there is a special row for sliders. For now we will click the Insert button. The modal box will close, and the layout page will re-draw the layouts so that there is a new row in the (blue) body area. Before we add anything to the row, note that there are two option boxes associated with the row itself. You can see these, with the options they control, in the screenshot above. We will leave those unchanged, however, and this is important, those five option rows you can see conceal accordion type slide open styling panels. These are the power to style and control your layouts, so use them well and wisely when you start to experiment.

Installing Ultimatum Theme - Drag and Drop Widget

Before we add a widget to the layout, note that Ultimatum 2.8 now features a WYSIWYG widget. This is a BIG step forward in making and styling static content on a page. In its options you can load the WordPress post editor and save what you make. Also new is the Templatera widget, which allows you to insert any template you have made with the (premium plugin that comes free with Ultimatum) Templatera plugin. We will not use these widgets for now, but they are there and noted for future use. So, drag and drop the WordPress Default Loop widget into the Body row. As you prepare to drop the row, a dotted box appears to show where to drop it. See the screenshot above. As soon as you have dropped the widget, its options open up to the settings for the Single Post Layout settings.

Installing Ultimatum Theme - Single Post SettingsInstalling Ultimatum Theme - Multi Post Settings

The appearance of this settings box is all new for Ultimatum 2.8, with a new drag and drop section for Author, Date and Comments, and a new Widgets Extras box at the bottom (click the ‘Widget Extra’ to reveal). See the settings I have changed – I have used a bit of cut and paste trickery to put these in one image. Note that the Meta Separator is what goes between the bits of data under the title (date, author, etc.) and as I have only the date showing (one piece of data) NO separator is needed, so you must delete that vertical line. Again, we can note these other options for later use. Save these changes and then do the Multi Post layout, and save those too. Click the ‘Save Layouts’ button and then the ‘Back to Layouts Screen’ button.

Installing Ultimatum Theme - Reading Settings

One last change to make. You will notice that I changed the ‘items per page’ on the multi post layout form to 6, so this must also be changed in the WordPress admin Settings => Reading page (see above screenshot). That’s the Main Body layout done.

Back To Top

Introduction to Installing Ultimatum Theme Framework

Upload Ultimatum Theme to WordPress

Installing Ultimatum Theme - Upload ZipInstalling Ultimatum Theme - Activation

You are ready to install Ultimatum Theme. In your site admin page, go to Appearance => Themes => Add Theme => Upload Theme. Click the Browse button and find the Ultimatum Theme file you downloaded. Click Install Now and when this has loaded, click Activate. The image below shows what you should now have. Notice the two new menu items in the admin sidebar, and you need to click the big blue ‘Ultimatum Toolset’ button.

Installing Ultimatum Theme - Activation Welcome - Registration

So, the registration screen appears. Note the messages highlighted at the bottom. These should be as you see them here. If they are not, you will need to make changes to your server to enable these functions. Mine, as you can see, is all OK. Enter your Ultimatum Theme username and password. NOTE: as I warned about earlier, the username cannot have spaces in, and the password cannot have certain special characters (those used in URLs). Click the big blue ‘Log in’ button. Hopefully, all will be well and you will see the Welcome screen as shown above. That is the Ultimatum Theme and Toolset installed. The front end of your site will show only a white screen right now, as we have to create a Child Theme and assign it a layout. That you will see in the next chapter.

Installing Ultimatum Theme - Registration Welcome

Back To Top

Download the Theme Archive File

Installing Ultimatum Theme - Your Membership PaneInstalling Ultimatum Theme - Download Ultimatum

As soon as you have logged in to UT, you will see Your Membership Pane. Click the Download button to take you to the downloads section. Then click the Download button and at the prompt, you will need to save this to somewhere on your local computer, like this. Handy hint, before you save the file, why not rename it to include the version number?

Installing Ultimatum Theme - Save Ultimatum

You are now ready to install this new theme framework.

Back To Top

A Brief Look at Ultimatum

Installing Ultimatum Theme - Special OfferWith a substantially revised and stable version of Ultimatum Theme (2.8.5) having been released, I produce this revised guide on installing Ultimatum Theme Framework. I will assume that you already have your own Self-Hosted WordPress Site (I have done a series of blog posts on this, starting here). Before I go any further, let’s take a brief look at the financials of Ultimatum Theme. There are two versions; Starter (at $65) and Professional (at $125). But, you can get a special offer coupon for the Pro version for just $57. AND, when I last checked, you can get a further 10% off that using coupon WPEXPLORER at the MightyDeals checkout, bring it down to $51.30. That is a total discount of nearly 60% off! That is surely worth it for the freebies alone, as there are many ‘Premium’ plugins bundled in at that price (normally available for a lot more money at CodeCanyon), and then there are a lot of pre-built templates, some of which are (again) ‘Premium’ priced elsewhere. To read more about this deal, read this Ultimatum Special Offer! Save more than 55% off Pro Version post. Or, CLICK THIS LINK to get the offer at Mighty Deals.

So, why the hard sell for Ultimatum Theme Framework? Because, it is only when you waste a lot of time trying free theme template after free theme template, that you realize that you are going to have to open your wallet and pay for a theme. After you have bought a few of these ‘premium’ themes, and discovered they are still a blog design, that often do not support major social plugins like BBPress and BuddyPress, nor the most popular e-commerce plugin (WooCommerce), do you realize you have wasted your money. Enter Ultimatum Theme. It allows you to choose from the Bootswatch 2 and 3 themes (but it recommends you to use the newer Bootswatch 3 as it will soon drop support for Bootswatch 2), and has quite a few pre-made themes (with more coming). You can create as many page layouts as you need, for both desktop and mobile browsers. The Pro version has support for BBPress, BuddyPress and WooCommerce. It even has a Social plugin. If you follow the link I gave above, you get unlimited use on as many of your websites as you like, on a ‘lifetime’ deal. And that deal is ‘grandfathered’, meaning that as Ultimatum Theme adds more features, you get those at no charge either. No annual fees. It really is a ‘no-brainer’. Get it now and I will step you through making your first site with it.

When you buy the coupon from the above link, it may take a short time for the Ultimatum shop server to have the coupon added, so it may not work for a few minutes. You buy the coupon for $51.30 (after applying the 10% off coupon WPEXPLORER, do not forget this), you receive an email with the coupon code, you go over to Ultimatum Theme and buy the Pro version, and then add the coupon code to the cart and it reduces the price so there is nothing to pay. NOTE: do NOT use any spaces in your chosen username, and do not use any URL special characters in the password (such as @&%#). If you make these mistakes, the Ultimatum Theme login from WordPress will not connect to the Ultimatum Theme server API. I am going to call it UT from now on, to save my poor typing fingers!! So, you have bought UT. I will step you through the process. Here goes.

Back To Top