Some while ago I wrote about this subject, and now I can revisit this in a second post; Synchronizing Ultimatum Theme Bootstrap and UberMenu – Part 2.

Since I last covered this topic, a new version of UberMenu has appeared; UberMenu 3, and boy is it different. So, over to CodeCanyon and download the latest version (at the time of writing this is 3.1.0.1), along with the new Flat Skins Pack and Conditionals plugins. Soooo many new options. This is like being used to a small village shop and for the first time walking into a big city Hyper Market. Where to start? Well, since the last time I did this, when I spent ages making a custom css file, I have discovered Less.js, and so this time I have written a .less file that when compiled makes a css file that overrides UberMenu’s default styling to make it work and look like a Bootstrap 3 Bootswatch Darkly themed navigation bar. Whilst I freely admit that these are not the most tidy of files (there may well be coding that isn’t required and I will come back and edit these files from time to time as I modify them for my own use), here are the files for you to download in an archive file:

Download ubermenu-darkly3.zip
in a ZIP archive

Simply set Ubermenu Basic Configuration Skin to none (disable) and enqueue this new css file from your functions.php, like this:

1
2
3
4
5
function add_ubermenu_darkly3_style() {
  wp_register_style( 'ubermenu_darkly3', get_stylesheet_directory_uri() . '/css/ubermenu-darkly3.css', false, '1.0.0' );
  wp_enqueue_style( 'ubermenu_darkly3' );
}
add_action( 'wp_enqueue_scripts', 'add_ubermenu_darkly3_style', 99 );

I also wanted the navigation bar to be ‘sticky’, so I also purchased the UberMenu – Sticky Menu Extension – it was only $5. I did try a lot of free sticky plugins, but couldn’t get any of them to work with UberMenu. Anyway, I digress. The reason for doing this was so that the Bootswatch Darkly themed navbar on this site could become a ‘megamenu’, allow shortcodes and widgets in the menu and allow conditional menu items. Hopefully, this will then allow me to include a menu from Ajax Search Pro for WordPress in the navbar. Assuming that I can achieve this, I will then need to style the search tool to match the Darkly theme. Whilst I was playing with this idea, I think I found a ‘bug’ in Ajax Search Pro for WordPress, in the file ‘hooks.php’, the last line reads:

1
add_action('wp_print_styles', 'search_stylesheets');

should read:

1
add_action('wp_enqueue_scripts', 'search_stylesheets');

Why? According to http://codex.wordpress.org/Plugin_API/Action_Reference/wp_print_styles: Since WordPress 3.3 wp_print_styles should not be used to enqueue styles or scripts.

Why is this a problem? If, like me, someone wants to edit the stylesheet by removing it and enqueuing our own, we can’t. Maybe you could make this little change for the next release? Otherwise I have to be careful about when I update that the updates don’t remove what I have done. I have reported this to the plugin’s authors. And so, on to see if I can add that search bar to the main navbar. I will be back to finish this post later on, probably tomorrow.

Following on from the previous blog post on breadcrumbs, this is Ultimatum Theme for your Self-Hosted WordPress Site – Part 6 – Bootstrap Breadcrumbs. In the previous post we set up Yoast SEO Breadcrumbs and got them to look like the Bootswatch 3. One advantage of the Yoast Breadcrumbs not covered in the previous post was that it attaches rdf microdata tags you the breadcrumbs, meaning Google is happy. The exemplar pages offered by Bootswatch include no such microdata tags, and may indeed not be ideal for that purpose. Now I will take the final step and make Yoast Breadcrumbs output in Bootswatch html. We are going to need to edit two files on our web server; custom-style.css and functions.php. We will also need to modify some settings in your admin pages. Let’s edit functions.php first.

Ultimatum Theme for your Self-Hosted WordPress Site - Part 6 - Yoast Bootstrap Breadcrumbs functions.phpUltimatum Theme for your Self-Hosted WordPress Site - Part 6 - Yoast Bootstrap Breadcrumbs CSS

As before, as I showed in this post, you will find functions.php in the child theme folder on your web server. Edit the copy of functions.php that you should have on your local PC by opening it in whichever editor you prefer to use. So, add a few lines of code at the end, namely this: (more…)

Following on from the previous four blog posts, this is Ultimatum Theme for your Self-Hosted WordPress Site – Part 5 – Breadcrumbs. Ultimatum Theme comes with a built-in breadcrumbs widget, but it is very basic. There are no settings to change. If you use a pre-built Bootswatch theme, it will give you breadcrumbs that look like the Bootswatch ones, but in fact the css is different. So, your options are to make some custom code, use the Yoast Breadcrumbs that is shipped with the Yoast SEO plugin, or use the Ultimatum breadcrumbs widget. One issue with the last choice is that the Ultimatum breadcrumbs widget is written so that, if you have one of certain other breadcrumbs plugins installed and active, you can use the Ultimatum breadcrumbs widget, and it will call up the plugin you have activated.

Let me try to explain. Let’s say you have Yoast Breadcrumbs plugin installed and activated, and you put the Ultimatum breadcrumbs widget into a page layout header, that widget will not call the Ultimatum breadcrumbs code. It will instead call the Yoast breadcrumbs code. But, there is a problem here. Yoast decided to bundle breadcrumbs in the SEO plugin too, as well as it being available as a separate plugin. If you have Yoast SEO plugin installed and activated, as most likely you will, with breadcrumbs switched on in the Yoast SEO plugin, and you use the Ultimatum breadcrumbs widget, you will see on your page the Yoast breadcrumbs. If, however, you have the Yoast SEO breadcrumbs switched off, the Ultimatum breadcrumbs widget still sees the Yoast SEO breadcrumbs as activated, and still calls the Yoast SEO to provide the breadcrumbs. But, as you have them switched off, no breadcrumbs appear. (more…)

In the second blog post in this series on how to build a Self-Hosted WordPress site, I explained how to fix some basic error messages that arose when you installed the initial list of plugins and also how to configure the most important of the plugins. Now it’s time to configure the rest of those plugins. These plugins need no further changes at this time:

avatar-manager
block-bad-queries
broken-link-checker
category-tag-pages
easy-pie-maintenance-mode
enhanced-media-library
media-item-url
menu-customizer
post-types-order
quick-cache
remove-query-strings-from-static-resources
system-snapshot-report
tinymce-advanced

[In the remainder of this post, all plugin settings will be found under the Settings menu, unless otherwise advised] (more…)

Build a Self-Hosted WordPress Site - Part 2 - Quick Cache SettingsBuild a Self-Hosted WordPress Site Part 2 - Cache SettingsBuild a Self-Hosted WordPress Site - Part 2 - Quick Cache On

In the first blog post in this series on how to build a Self-Hosted WordPress site, I explained how to get the basic plugins installed. Now it’s time to configure those plugins. First we will look at Quick Cache. This will work best with the appropriate supporting software on your server, which I will cover in a separate series of posts focusing on server configuration. At the top in orange you can see Quick Cache is off. A few paragraphs down, it tells how you can test if Quick Cache is working. Using Firefox, all you need do is open a Private Tab or Window and open your site in that, and view the source. If the code isn’t there, go back to plugins and select Drop-ins at the top. You will see you need to check if the WordPress wp-config.php has the line define(‘WP_CACHE’, true); in it. If it does not, you will need to make a manual edit of the file to add that line. See my separate guide on editing the wp-config.php file. Anyway, you simply switch Quick Cache on (the big yellow option) and save the settings at the bottom of the page. After I have checked that it IS working, I go back and select the ‘No, I don’t want the source code to contain any of these notes.’ I have tested Quick Cache against 6 other cache plugins, and this was a long way the fastest, with my home page loading in the Pingdom tests at about 0.35 seconds!! Before I did any fine tuning of my website, that was typically 12-15 seconds! (more…)

Build Your Self-Hosted WordPress SiteIn the next few blog posts I am going explain how to build a Self-Hosted WordPress site. Yes, that’s right. No debate over which Content Management Software (CMS) to use. It’s WordPress. Sorry if that offends you, but I have been doing web design far too long to be bothered with anything else. For 99% of users, WordPress is fine and dandy. For the purposes of these blog posts, I am going to skim over some of the really basic stuff (I might come back and add a bit of detail). I know that you can develop a site on your local PC or Mac, but the first time you get stuck, anybody who tries to help you will want to see what you have, and that means you need a web server. Unless you want to do a simple blog, forget the WordPress.com hosting packages, and become a self-hosted site.

Build Your Self-Hosted WordPress SiteThat means you should get a domain. I use GoDaddy. I can see no reason why you shouldn’t do the same. Priced in US Dollars and no sales tax, they are usually cheap and effective. You need a web server. There are hundreds of cheap ‘WordPress Specialist’ web hosts. Forget them. Forget all the special ‘free’ hosting deals. The bottom line is, less than US$40 per month is cheap – if you pay annually you can often get a discount on this, sometimes as much as 25% off. I have been through all manner of web hosts and deals over the years, so you might be wise to avoid all that heartache. My preference is for what is called a cloud web server. But, beware, my experience over the last year makes me wary of Cloud Servers that use OnApp for management of the server; my sites used to ave this and it often crashed, leaving me offline for a day or more each time. On a budget look for OpenVZ and for performance at a price use KVM, here is a comparison.

With a Cloud Server, this means that your site does not reside on one machine, but shares its resources across a lot of physical machines. This is a much faster and more reliable solution. Different hosts may use a different name for this type of package, but this is what you need. Unless you have a big web site in mind, you will want to start with a Virtual Private Server (VPS) with a Unix operating System (such as Centos), Apache, MySQL and PHP. To make managing it easy, you will want WHM, cPanel and EasyApache installed. Most importantly, you will want a Managed Service. That means, when it goes wrong, you get help. If you can persuade the host to do it for you, installing nginx as a reverse proxy server for Apache will speed things up, but make things a bit more difficult to manage.

(more…)