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

Ultimatum Theme for your Self-Hosted WordPress Site – Part 6 – Bootstrap Breadcrumbs

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

Ultimatum Theme for your Self-Hosted WordPress Site – Part 5 – Breadcrumbs

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