This thorny topic has bugged me for some time, ‘How to make a sticky footer with Ultimatum Theme?’ I thought that I had an answer, but, after a few days of lengthy Skype conversations with Emmanuel ARNOUD (a fellow user of Ultimatum Theme framework), I realized a completely new approach was needed. Most CSS/HTML solutions rely on certain HTML elements on the page and for the footer to be a fixed height. But we know that the footer often has quite a bit of content, meaning that its height will vary. The only solution is to use javascript, and, in particular, jQuery. So, before going any further, make sure you have jQuery loading in WordPress. I am sorry to say that you are going to have to roll your sleeves up and do a bit of coding. For beginners this will be hard. If you know WordPress at all, you will not be using a theme directly, but instead you will be using a child theme. This is especially so if you are using a theme framework, such as the one I use; Ultimatum Theme. Assuming that you already have a custom stylesheet for your child theme (mine is called custom-style.css and sits in a css folder insider the child theme folder, and is already enqueued, see this post for more details on a custom css file and the functions.php file), this is the new css to add to it:

1
.footwrapper {width: 100%;}

Note so hard, so far. By the way, if you have either html or body set to 100% height in css, you will need to remove this ‘height:100%’ css rule. Next, if you do not have one already, you need a javascript folder inside your child theme folder on your server. It is normal to name this folder ‘js’. Inside that folder, make a text file called ‘wp-sticky-footer.js’. You can copy and paste the code from below into that file, and save it:

(more…)

This post explores the subject of searching in WordPress and the theming of Ajax Search Pro with Bootstrap, using Ultimatum Theme. It will also cover how to use Ajax Search Pro to provide a search dedicated to a single Custom Post Type (CPT), in this instance to search articles created using BWL Knowledge Base Manager. A few days ago I started to write a series of posts (Part 1 and Part 2) about BWL Knowledge Base Manager, and also a post about Synchronizing Ultimatum Theme Bootstrap & UberMenu 3.

To summarize the previous posts, I had come to the conclusion that BWL Knowledge Base Manager was an excellent plugin and does ‘what it says on the tin’. But, and there is often a but, it was let down by the somewhat poor search engine provided in the WordPress core. Not a surprise to anyone who has used WordPress. The WordPress core developers like to keep WordPress slim and extensible. Those extensions are called plugins, and you often have to pay to get decent ones. Free core software supplemented by paid for optional extras. Much the same model as free apps/games on your smartphone that have paid for add ons and/or ‘pro’ versions. The first search I will make using Ajax Search Pro is for use in a page sidebar on BWL Knowledge Base Manager pages.

Remember, in this run through, I am both theming the search to look like the Bootswatch 3 Darkly theme I am using for my site and also making a search for use the Article CPT that BWL Knowledge Base Manager has installed. Before we go much further, it is assumed that you have already added the categories you want in the knowledgebase, and you will need to add one test article in each category, otherwise the categories will not appear in these options we are about to set. Furthermore, if you later add one or more categories to the knowledgebase, you will need to return to the search setup and add them. I do not think that they will be automatically added.

Theming of Ajax Search Pro with Bootstrap - New Search - General Options SourcesTheming of Ajax Search Pro with Bootstrap - New Search - General Options Sources - 2Theming of Ajax Search Pro with Bootstrap - New Search - General Options - Behaviour

(more…)

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.

Bootswatch Darkly and Flatly Themes compared

Bootswatch Darkly and Flatly Themes compared

For those of you following the journey of our website development, and maybe wondering why am I doing this? Why go down a route that needed me to do all this work? Well, actually, it is a few hours here and a few hours there. But I am a tinkerer. I like to know how things work, take them apart. Even if you are not like that, you probably know someone who is. Every person that I have spoken to about websites who had let an external design agency loose had found that it didn’t end up as good as they wanted, and cost way more than they had thought it would.

I want to be able to make those small afterthought changes, improvements, and understand how. By scribbling down the process, it may just help some other poor soul. Anyway, today’s post was only going to be something small. I have used a bootstrap 2.3.2 structure to the site, and had used the flatly (blue) look from Bootswatch. But testing suggested that the white background was not so popular. The Bootswatch themes for Bootstrap 2.3.2 had no really suitable dark background theme, but the Darkly theme for Bootstrap 3 was perfect.

Over a few hours today, I have converted that for use with Ultimatum Theme, UberMenu and Yoast Breadcrumbs. The ‘Inspect Element’ tool in Firefox is really useful to see where changes need to be made. Tomorrow I will do the same for WooCommerce, or, at least, the product page. As I continue to work building the shop, so I shall work on those pages to make them work with this new Bootswatch Darkly theme. I will probably remove the default woocommerce.css file and use a custom one.

… and other things.

Having paid for and installed UberMenu, I discovered it wouldn’t play nicely with the Bootswatch Flatly custom color theme that I had set in Ultimatum Theme. Back to the help pages to discover an UberMenu plugin called Flat Skin Pack (curiously, that page says it is $7, but when you go to pay it is only $6). I also installed the Conditionals extension. Given what I said in the last post about Envato, I figured that with a balance still on the account available to spend, I searched for other paid for WordPress plugins and came across a great one called Hide My WP, that now accompanies the other plugins I am using to help secure WordPress. These are Wordfence Premium (paid for), Updraft Plus Premium (paid for) and Rename wp-login.php (free).

Of course, I still have to style the sub menus of UberMenu, but first I now need to see about adding a login widget, hopefully to the menu, and maybe changing the ‘Home’ link on the menu to a small image (which means I have to make a small logo). To help with searching, I have added a plugin called Better Search. A busy weekend, but onwards and upwards.