WordPress 404 page in Ultimatum Theme

If you don’t want to serve visitors to your site the standard WordPress 404 page, this is how to customize what they see using settings in Ultimatum Theme. With this framework, there is no ‘themed’ 404 page, instead you are expected to make your own, and you should. So, what is a 404 page? Well, a user requests a page from your website but your database cannot find it and so WordPress shows this error message page.

Error 404 - New LayoutError 404 - Add Row To LayoutError 404 - Drag Text Widget

(more…)

Bootstrap Float to Top Button

For some time this website has been styled using the Bootstrap framework, and I have been meaning to investigate how to make a Bootstrap Float to Top Button. It should be quite easy; a simple snippet of javascript and a small amount of CSS. You  will need to make a javascript file (I called mine bs-back-to-top.js) containing this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function(){
      $('body').append('<div id="toTop" class="btn btn-info"><i class="fa fa-arrow-up"></i>Back to Top</div>');
    	$(window).scroll(function () {
			if ($(this).scrollTop() != 0) {
				$('#toTop').fadeIn();
			} else {
				$('#toTop').fadeOut();
			}
		}); 
    $('#toTop').click(function(){
        $("html, body").animate({ scrollTop: 0 }, 600);
        return false;
    });
});

Note that this uses Font Awesome for the icon on the button, so you will need to have Font Awesome already loading to your site pages. To get WordPress to call this javascript file, 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 child theme, it will have a file called functions.php in the theme folder. Into that you will need a few lines of script like this:
(more…)

Sticky Footer with Ultimatum Theme

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…)