Clicky

Step 21 - Add Oxygen Templates

  1. I won't be going into detail about how to do this step, but in brief, create a catchall Oxygen template (called Template Catchall) and set it to apply to all pages on the site as it currently stands - i.e set it to catchall.
  2. Give the template a priority of zero (0).
  3. Once you have created the template you will have to edit each existing WordPress page or post (in the WordPress editor) and if the Render Page Using Template box is set to None, then set it explicitly to Default Template Catchall.

This is only a placeholder menu but it is important to create it so that you have something for a menu, instead of nothing at this stage.

Go to Dashboard → Appearance → Menus and create two placeholder menus.

The first should be called Primary Menu and should have the following pages:

  • Home
  • About
  • Lander 1

The second should be called Footer Menu and should have the following pages:

  • Privacy
  • Contact
  • Terms
  • Cookies
  • Disclaimer

More Information

You will need a menu of sorts to use as you build out a site design in Oxygen. It’s always a good idea to set up a couple of placeholder ones so you have something at the beginning before your content is in. 

  1. You have already created the home page. Now create the remaining pages as you see here written in BLACK. Using the WordPress editor (not Oxygen), add a paragraph of placeholder content to each page.  You can get placeholder content from here.
  2. Set the red ones up as parent pages in the structure indicated.  The red pages have no content.
Page Structure
Create this page structure
  1. Now Activate the SEO Framework Plugin and use it to set SEO settings for all parent pages (in red above) , under Visibility to be :
  • Noindex
  • Nofollow
  • Noarchive
  • Exclude from search, and 
  • 301 Redirect to homepage (by placing a / in the URL box)

Finally - write down the page ids of each of the parent pages for legal, landers and confirmations. Keep the information where you'll be able to find it. Maybe set up a Google Docs for notes on this development. For example mine are as follows:

Parent PageParent Page Id
Legal25
Landers21
Confirmations27

More Information

In order to minimise chaos once the site grows, I found it effective to separate out thank you pages, landing pages, testing pages and standard legal pages from real website content. I did this using sub-pages.   It makes all the content easier to find and to target when building Oxygen templates.  

Even if you already have content planned, I suggest you use simple placeholder text for now. Once your structure is in place you can go back and replace the placeholder text with proper content.

As you may want to back this bootstrap site up somewhere so that you can quickly get a new site started in the future, you will not want content specific to another site on any of the pages.  

The SEO settings for the parent pages as detailed above, is to ensure that no-one can visit the parent pages, nor stumble across them, nor find them in the search engines.

When you redirect to the home page do not put in the the full URL of the home page - just use a “/”

  • If you have not already done so, upload all the different versions of your logo to the media library.
  • Make sure you give each logo an alt tag of your business name logo. Do not provide a caption.
  • Activate the SEO Framework plugin and follow the instructions here to set it up.

More Information

When the SEO plugin requires a logo, use the square colour or the square black version that you have prepared. If you are building a bootstrap site, then add some generic bootstrap logos instead as a placeholder. You can easily create these for yourself ...

... or you can use mine if you prefer. See below.


Square Bootstrap Logo
Bootstrap Logo Square
Bootstrap Landscape Logo
Bootstrap Logo Landscape
Bootstrap Favicon
Bootstrap Favicon
Bootstrap Social
Bootstrap Social Image

You should have created a logo and a favicon in a previous step.

First upload all your logo versions and your favicon to the media library.

Since version 6.1.1 of WordPress, the customizer has been removed from the WordPress menu. In the past, we used to set up the favicon by going to Dashboard → Appearance → Customize → Site Identity  and clicking on the select site icon button. 

As this no longer exists in the menu, you can still reach the customizer by changing the URL at the top of the page to the following : https://yourdomain.com/wp-admin/customize.php

Obviously change yourdomain.com to be the domain you are working with.

Once you get there you can select your favicon file from the media library As your favicon should already be square, you can skip cropping.  

More Information

Remember a favicon must be simple and easy to recognise at a very, very small size. So keep it to one colour and flat with no shading or shadows.

Make changes to WordPress Permalink Settings
You can choose to set your permalinks to just Post name if you wish, in which case you would select the Post name option.   However,  I don’t do that.  I prefer to use a custom structure of /%post_id%/%postname%/

My settings look like this :

Permalinks with postid
Permalinks with postid

More Information

I use a custom structure of /%post_id%/%postname%/ because it removes ambiguity and in my opinion, makes running a site day-to-day, easier.   

I don't know if it interferes with Google’s view of a URL for SEO purposes.  I don’t believe so, but you must come to your own conclusion.

Take the example of the Yoast website where I found a selection of blog posts with the following URLs:

  1. https://yoast.com/what-is-a-keyword/
  2. https://yoast.com/what-is-a-keyword-strategy/
  3. https://yoast.com/what-is-a-redirect/
  4. https://yoast.com/what-is-a-permalink/
  5. https://yoast.com/what-is-a-headless-cms/
  6. https://yoast.com/what-is-a-progressive-web-app-pwa/

The above URLs all use the post name to form a slug, which is then used in the URL.  To visit the second page listed - the page about keyword strategy - you would have to type most of the following URL, https://yoast.com/what-is-a-keyword-strategy/, in order to ensure you ended up at the right page.  

This is because the URL is very similar to other URLs on the site as shown in the list above.  Unless you type practically the full URL in each case, WordPress would have no idea which page you wanted to visit due to the majority of each of the URLs being the same.  

However if the postid is included you can visit a page using only its id. So if the URL were

https://yoast.com/123/what-is-a-keyword-strategy/ - all you would have to type is https://yoast.com/123 (assuming you set your site up to do this OR use our plugin which has a checkbox to enable this functionality)

This helps when typing URLs, say, into mobile phones, or when communicating a URL to someone using voice. It’s much easier to type https://yoursite.com/123 than https://yoursite.com/what-is-a-progressive-web-app-pwa/

An added benefit is that you can change the slug used in your post URL at will, for SEO purposes (should you ever need to) without having to set up a redirect after each change.
To be clear - the /%postname%/ permalink may or may not be better for SEO.  I suspect it makes no practical difference, but I have not tested it so I do not know. However, for the reasons outlined above, I prefer the flexibility of the /%post_id%/%postname%/

Make changes to WordPress Media Settings and make sure the following setting under Uploading Files is unchecked

  • Organize my uploads into month and year-based folders

More Information

WordPress always organises media files into month and year based folders by default. You don't want this. So make sure that box is unchecked.

Date based folders are generally undesirable as your photos could end up in scores of separate folders. Some of these will be empty if you do not post regularly. This means, you create longer, pointless file specifications for each of your images. 

Go To Dashboard → Settings → Discussion.

Make sure the following options are unchecked.

  • Attempt to notify any blogs linked to from the post
  • Allow link notifications from other blogs (pingbacks and trackbacks) on new posts

If you are allowing comments, make sure one of the following options is checked. 

  • Comment must be manually approved  (I prefer this setting on new sites)
  • Comment author must have a previously approved comment

The other options on this page are up to you. 

More Information

You may or may not want to have comments on your site. Set up the settings on this page as you wish, but if you have comments then be sure the above options are unchecked.  Failing to do this will encourage your site to be spammed.  

If a site is allowing comments then I prefer to set all comments to manual approval. Otherwise you leave yourself open to spam, derogatory or embarrassing comments on your site.

Make changes to WordPress Reading Settings.

Go to  Dashboard → Settings → Reading.

  1. Your homepage displays
    Select A static page and select the temporary home page you created earlier in the drop-down.
  2. For each post in a feed, include
    Set to Excerpt
  3. Search engine visibility
    Check the box Discourage search engines from indexing this site.  
  4. Save Changes

More Information

Select the home page you created earlier to be the homepage.  You will eventually fully design your home page in Oxygen, so please do not worry that it still looks like pants.

By setting excerpts in feeds you make it slightly less convenient for people to steal your content (although they still can do so by other methods). 

You should set the search engine visibility to off to try to prevent your site from being indexed, before you are ready for it to be indexed.

Make changes to the WordPress General settings.

From the WordPress dashboard click on Dashboard → Settings → General. Once there, change the following setting as follows.

  • Site Title
    Put the name of your site. For example, in my case I put WordStamped. If your site name is really long, try to put a short version of it that your brand is also known as.
  • Tagline
    Make this as short as you can and try to sum up what your site is about. In my case I put Build Your Own WordPress Site
  • Admin email address
    Your main email address.
  • Language
    Select your language
  • Timezone
    Select your timezone
  • Date format
    custom : d-M-Y
  • Time format
    H:i
  • Week starts on
    Monday

More Information

The site title should be as short as possible as it could end up being added to title tags automatically by your SEO plugin. This may or may not be best SEO practice at the time (things change) but in case it is, think of something that is brandable for you, but short. 

The tagline can show up in unexpected places so best not leave it reading, “Just another WordPress site”. You can put a tagline that helps to explain what your site does or the purpose of your site.

The other settings are up to you.  I use European dates and time formats as shown above. 

  1. From the WordPress dashboard, go to PostsCategories and edit the Uncategorized category, and change the name to Blog.  
  2. Clear the slug field so that it is empty.
  3. Update

More Information

WordPress has two basic post types that it ships with.  These are pages and posts. All WordPress posts have to belong to at least one category.  Categories are supposed to be named based on your site’s niche.  So a cooking site might have categories of dessert, starter, main and drinks.  

But when a new site is set up WordPress has no idea what you will want to name your categories so it starts out with one default category called uncategorized.   Many people never change this. 

It’s a good idea to change this category to Blog in the first instance, as nearly every site has a blog.  You can always add more categories later, or rename the Blog category to something else. Just don't leave it as "uncategorized".

You might think it is premature to decide on what your logo will look like when maybe you haven't even installed WordPress. But if you already have a business idea in mind, your logo is one of the first things to consider.

If your logo is to contain any colour (other than black, grey or white), then it will often inform the colours used on your website. In other words the colour scheme used in your logo might determine the colour scheme of your site.

You could easily come up with a simple text logo like the one I've used here on WordStamped, or you may pay for a logo to be designed or even design one yourself.

Logo Layouts

Whatever you decide to do, make sure you end up with the following versions of your logo. You will need all these versions for various venues such as social media platforms, letterheads, business cards and of course various locations on your website.

  • The logo in landscape layout in colour (if you're using colour)
  • The logo in landscape layout in black
  • The logo in landscape layout in white
  • The logo in square layout in colour (if you're using colour)
  • The logo in square layout in black
  • The logo in square layout in white
  • A favicon (a very simple symbol that alludes to your logo)

Logo Sizes

You may need all sorts of different sizes of logo for your various venues. For all I know, you might be planning to put your logo on the side of a car. However for the purposes of your website, you should make your logos approximately the following sizes.

  • Favicon - make this 150px x 150px
  • Square Logo - make this 250px x 250px
  • Landscape Logo - make this in two versions a larger one at about 280px wide and a smaller one at about 120px wide.

The dimensions I mentioned here are not exact - they are just to give you an idea. The png files you produce should be of high quality but the file size should not be great.

What Is A Favicon?

A favicon is the shorthand square symbol that pays homage to your actual logo. It will be used your website and browsers to help identify your individual pages to users.

If you look at at where this page is displayed you should see the "W" favicon I am using for WordStamped before the title of the page in the browser tab.

To create a favicon simple make an image that is around 150px square and upload to your site's media library. Make sure the symbol you use is very simple and easy to recognise when viewed at about 12px square.

What is a favicon
A number of tabs showing each site's favicon
  1. Still inside the editor from the last step, click on the three vertical dots  at the top right of the page, just to the right of the gear symbol. (You may have to close the right hand side panel to see the three dots). See screenshot below.
change preferences
Change preferences within the Gutenberg editor
  1. Next, click on Preferences, and then under Appearance disable the ''Use theme styles'' button.  After it is disabled, it should look like the screenshot below.

Use theme styles
Make sure this setting is off.

More Information

This setting messes up the CSS that we will use later, which is why we disable it now.  Always check new installs as this setting has a habit of resetting without your knowledge ... 

Next, we create a placeholder Home Page. Later you will re-edit this page to make a suitable home page but for now, all we need is some text.

  1. From the WordPress dashboard go to Pages and delete all the pages that are currently there.
  2. While you are at it, delete all posts such as the Hello World post.
  3. Next create a new page called Home Page.
  4. Using the WordPress editor, (not Oxygen), add a couple of paragraphs of placeholder text to the page. You can get generated text from this website.
  5. Publish the page
  6. Stay in the editor

More Information

We need to refer to this page in a subsequent step, so we must create it now.  It is not the final home page so don’t try to design it - just add the placeholder text as instructed.

If you look at this home page at this stage, it will look terrible. Do not be alarmed. It will look terrible until we get to the part where it looks great.

Start with a clean WordPress installation, where Oxygen has never been activated and with all of the plugins from the previous step also not activated.

  1. Activate the Oxygen Plugin and choose a blank install.
  2. Next, from the WordPress dashboard go to Oxygen → Settings  License and enter your Oxygen license key and save it.
  3. Change Oxygen settings within the Oxygen → Settings → Client Control tab under the Role Manager to be No Access for everything.
  4. On the same page, under Post Type manager,  check all options except
    1. post,
    2. page,
    3. wp_template and
    4. wp_template_part.
  5. Go to Oxygen → Settings  Bloat Eliminator and check the following
    1. Disable WP Emojis
    2. Disable jQuery Migrate
    3. Disable Webfont.js

More Information

We are setting Oxygen up with some typical starting settings. These should be all you need to do.

Unless you have a good reason, no level of user other than Admin ( the webmaster for the site) should have access to Oxygen.  This way others can add to the site without ever seeing the Oxygen interface and so would be unable to mess up what you have in Oxygen. 

  1. Login to your WordPress site and go to Dashboard → Users → Profile.
  2. On this page select an Admin Color Scheme you like. I often choose Modern for my sites in general and Sunrise for a Bootstrap site.
  3. Next, check the Toolbar box so that the toolbar shows when viewing the site.
  4. While you are still in the admin profile, make sure that the admin user has a First Name,  Last Name and a Nickname.   For example I would set my first name to Elizabeth, my last name to Jamieson and my nickname to Liz. Please do similarly.
  5. Change the Display name publicly as value to your full name.  For example I set mine to be Elizabeth Jamieson.

More Information

If you are creating a Bootstrap site, setting the admin panel color scheme to Sunrise can help prevent mistakes. You may be setting up to build a new version of an existing site, and may at some point get the development site and the bootstrap site confused.   By making the Bootstrap site bright red this mistake is less likely.

  • Install and activate the free WordPress theme called Intentionally Blank.   
  • Enable automatic updates on the theme
  • Delete all other themes from the installation.

More Information

There are lots of well-written minimal WordPress themes available,  such as Underscores or Roots. These were designed to allow WordPress developers to create their own themes without having to build everything from scratch. As such, these starter themes contain base functionality that is intended to be built upon.  

But as we are never going to use a WordPress theme on an Oxygen site, there is no need for any base functionality. All we need is an empty theme to get us through the WordPress installation process because once we install Oxygen any WordPress theme we’ve activated will be completely ignored. 

Intentionally Blank weighs only 8KB so takes up very little disk space, and because there is little in it, it is rarely updated.  

That said, you should enable auto-updates for the Intentionally Blank theme to allow it to self-update on the rare occasions it changes.

How Do I Delete Other Themes?

  1. From the WordPress dashboard click on Appearance → Themes, then hover over the theme to delete and click on the Theme Details button that appears on hover.
  2. On the next page, click on the delete link in the bottom right hand corner of the page.

  • Install WordPress on your chosen domain
  • Make sure you use the latest version of WordPress
  • Use PHP 8.0 as it should be properly supported now.

More Information

Installing WordPress

I don't provide guidance on how to do this as each host has its own method. The better hosts tend to make it very easy to install WordPress, often at the click of a button.

Consult your hosting provider to find out how it is done. 

What Is The Latest Version Of WordPress?

To make sure you are on the latest version of WordPress, check this page. The download button there will show you what the latest version is. Please note, you do not need to click this button and download WordPress. You are simply visiting the page the see what the latest version number is.

To check which version your site is running, just log into your WordPress site and in the left-hand menu, click on Tools Site Health.

In the table on that page, you can click on WordPress to reveal the version of WordPress you are running.

PHP Version

Use PHP 8.0 as this is the latest version of PHP. All reputable plugins should be compatible with PHP V8.0.

To check your version of PHP, do as you did when checking the version of WordPress. Log into your WordPress site and in the left-hand menu, click on Tools Site Health.

In the table on that page, you can click on Server to reveal the version of PHP you are running. If you are not running PHP V8.0, ask your host to upgrade your server.

To build your own WordPress website you will need to organise three separate items. These are a domain name, some hosting and a way to manage domain name servers (DNS). 

  1. Buy each domain you need from Namecheap - or some other reputable domain name provider.
  2. Buy your hosting from a good quality hosting provider - for example, I use GridPane.
  3. Manage the domain’s DNS at Cloudflare  (free)

More Information

To build a self-hosted WordPress site, you’ll need 

  1. hosting, 
  2. a domain and 
  3. a place to manage the domain’s DNS.   

I suggest you use three different providers for these things.  

Never buy your domain, hosting and DNS management from the same organisation.  In that direction lies potential frustration. One day you will become unhappy with your hosting service - it happens to us all - and you'll want to change it.  

In some cases, if your host has also provided your domain name and its DNS management, you may meet resistance when trying to extricate yourself and to move to another host.  You can eliminate any chance of this happening, by taking the advice in this step.

When you first install a WordPress site, there are quite a few settings to change before you can start to style and enhance it. These settings will typically be the same for every WordPress site you want to create.

This mini-guide describes the settings I change when faced with a fresh WordPress site that I want to build out with Oxygen Builder and Automatic CSS.   

You will need a number of plugins and tools to follow a course with me. I will outline these later. But to begin with, the first tool you need is your browser. It is best to use Google Chrome or Brave.

More Information

You can take this idea one step further if you wish. It is entirely optional and you do not have to do this if you do not want to.

However, if you know you will have a large number of sites to build in the future, you may want to create a "perfect" initial WordPress site that you can always use as a starting point for the next new WordPress site.

The idea is tailor a WordPress site with some initial settings, and then have that site always ready to use as a starting point for any new sites you create.   This is what I do and I call it the Bootstrap site. 

My Method

I bought a domain name similar to brandnew.website. I didn't care that the domain was not a .com - in fact it could have been anything. If you are going to do this, buy a cheap domain name.

I then make use of sub-domains. So the bootstrap site will live permanently at bootstrap.brandnew.website, and the next site I build for say, an affiliate site for dog products, could be temporarily at dog.brandnew.website.   

To get the dog.brandnew.website site started I would copy the bootstrap site to it, using the free All In One Migration plugin with the Google Drive Extension.  That way I do not have to do all the tedious setup every time.  I would continue to develop the dog site in that sub-domain location until it is ready for launch.

Once the dog site is ready, I would migrate it to its proper domain name say bigdogblog.com from dog.brandnew.website, again, using the All In One Migration plugin.

Many hosts provide staging sites, so that you always have somewhere to work on a site without having to work on the public facing main domain. Of course you can do that instead. As long as you have somewhere to keep the bootstrap WordPress site, and as long as you keep that site updated, you can organise your workflow however you choose.

Browsers

Try to use either the Google Chrome browser or the Brave browser. The reason I recommend Google Chrome or Brave is because you will need access to a handful of Google Chrome extensions and these are not always available to other browsers.