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

This post is a is a quick guide on uploading images to your self-hosted WordPress Site. It sits alongside the series we have done on building a self-hosted WordPress site and installing Ultimatum Theme. Firstly, let’s see how we can upload an image to WordPress. Note that in the admin Settings => Media page I have the ‘Organize my uploads into month- and year-based folders’ unchecked (off), so anything I upload will go into the uploads main folder. I have an image ready to upload. In this case, I took a screenshot of me uploading a file. The file is the one we shall use as a site logo for our development site, called United. So, I have actually uploaded the logo and that screenshot.

Uploading Images to Your Self-Hosted WordPress Site - Upload ImageUploading Images to Your Self-Hosted WordPress Site - Upload Image Files MadeUploading Images to Your Self-Hosted WordPress Site - Save Resized Image

You might think that, therefore, there would now be two images in the uploads folder on my server. Instead, there are six! This is because WordPress also makes smaller versions of the files, according to your general Media settings. We covered this in Build a Self-Hosted WordPress Site – Part 4. I am going to point out something weird here. One of the two original files was called upload-image.png, and is sized 1043 x 707 and is 95.5KB in size. WordPress made a small version, at 800 x 542, which is over twice as big at 248KB. This seems to be a problem with WordPress when it re-sizes the larger image size. Much the same happens if I re-size the image in PhotoShop and save it. However, online help is at hand. (more…)

WordPress SEO by YOAST for BeginnersThis is the fifth blog post in this series on how to build a Self-Hosted WordPress site and focuses on WordPress SEO by YOAST, for beginners. This short post is not intended to cover any part of WordPress SEO in detail, just enough so that it is set up so you can use it. There are plenty of YouTube videos that go into far more detail. That said, here goes.

WordPress SEO by YOAST for Beginners - Yoast SEO DashboardWordPress SEO by YOAST for Beginners - Yoast SEO XML SitemapsWordPress SEO by YOAST for Beginners - Breadcrumbs

The first page is the SEO Dashboard. I did watch a bit of the tour, so when you do that option disappears. On the dashboard page, I have set ‘Allow tracking of this WordPress install’s anonymous data’ and ‘Disable the Advanced part of the WordPress SEO meta box’ to be checked (on). Save the changes. The second settings page is Titles & Metas, with five tabs. Only one change here, on the General Tab, the Sitewide Meta Setting for ‘Noindex subpages of archives’. Set this checked (on) and save. I make no changes to the Social settings – these you may wish to change as and when you set that up for your site. (more…)

In the third blog post in this series on how to build a Self-Hosted WordPress site, I explained how to to set up the optional list of plugins that I recommended. Now it’s time to configure WordPress itself. I will take you through this running down the left hand admin menu. The Dashboard is first. There is a ‘Welcome to WordPress!’ banner. At the top right you can dismiss this.

Build a Self-Hosted WordPress Site - Part 4 - Hide WelcomeBuild a Self-Hosted WordPress Site - Part 4 - General SettingsBuild a Self-Hosted WordPress Site - Part 4 - General Settings

Now we go to Settings => General. Your tagline is really important for Search Engines, so make it count. Right now it says ‘Just another WordPress site’. Not ideal. In fact, when the Google bot sees this, it demotes you because it thinks the site is in development. For example, our site says ‘Photography Studio Equipment suppliers of stands, umbrellas, triggers and other associated equipment’. A lot of key search words in a concise sentence. Further down that same page (and the third screenshot above shows this bottom half of the settings page), it is also a good idea to make sure Membership is unchecked, so no-one can register. Your Timezone should be set to suit your location. Note that your server also has timezone settings, which I cover in a separate blog post. Similarly, you may wish to set Date and Time formats that suit where you are located. There is a link to a help page about this on the settings page. Settings for the week starts on and language again need to match your local needs. Nothing on the Writing Settings needs changing for now, and we covered the Reading Settings in Build a Self-Hosted WordPress Site – Part 2. (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…)