Creating a Website/Blog with WordPress

Creating a website/blog with WordPress using the Block Editor.

Signing up to WordPress and Getting Started

Creating a WordPress Website

To get started visit WordPress and create a new account. When you do, you will be asked to select your site type. In my case I will select education:

The next thing will be to create an address for your website. You can search for some keywords:

In my case I am making a test website so have just searched for my name. I will select the free version which will be of the form yoursite.wordpress.com it is also possible to buy a domain name (you can also do this later).

I want to use the free version as it’s only test website. You can use the free version to get a feel for WordPress and if you are comfortable with it and require advanced features, then you can go for one of the other subscription models:

You will then be taken to the Dashboard. To the left hand side you have a menu where you can add new Site Pages and new Blog Posts.

A Page and a Post are similar when it comes to Editing but a Page is supposed to be a more of a permanent feature with a defined location. The default Pages Home and Contact, can be found on the left hand side in the menu. On the other hand Posts can be thought of as your Facebook Timeline or Twitter Feed. Every time you add something to Facebook it appears on the top of the timeline and the second last thing you added is below it and so on and so forth. When you go to your websites home page you will be taken to your timeline of Posts. Users can access Pages by going to the menu which will always be shown when they are on your website.

Without email verification we will be unable to publish anything so check your emil for a verification link:

Once found click on it:

You should get the following:

Creating a Page

To the Dashboard select Add, you can also select Site Pages if you want to Edit an existing one:

You will be informed about the new blocks…

With the new Block Editor WordPress have decided to make text, pictures, videos, custom HTML, maps, lists, tables, all self-contained blocks. The rational behind this is likely so they are independent and do not crash into one another. This makes it easier to change themes etc on the WordPress website and reorder blocks, without everything going skewif which happened from time to time when using the Classic Editor especially when putting pictures alongside text.

The block Editor is still relatively new and although it is a lot better than when initially released, it is still slightly buggy. It is quite an innovative change.

Adding the Title

Adding blocks and Block Navigation

If you move to your mouse to the line you are currently on and move it to the left hand side a (+) will show. You can also get this by going to the top left.

Typing instead will give a text block pressing [Enter] will take you out the text block (and create a new one if you continue typing) however pressing [Shift] and [Enter] will give you a new line keeping you within the same text block.

Typing text gives a text block:

When you have multiple blocks you can highlight the top middle and bottom middle of a block and select the additional (+) that shows and this will create a new block above or below the item of interest.

Highlighting a created block on the left hand also gives a menu with the ability to move the block up [↑] or down by one [↓]. You can also press and hold the centre button with the mouse to drag the block up or down to its desired location.

To the top left you have the option to change the Block Type in the case of a text for example to a Heading or Quote. You have Common Text Options and you have a More Button where you can Duplicate the Block or Save the Block as a Usable Block or modify as HTML (advanced). To the right hand side you may have additional block options



Creating a Heading

If we select the (+) we can then use the search box to search for the block type. In this case we are after a Heading so we will type in Heading

The search for Heading yields the Heading block. We can insert a new one

Type the Heading as Desired. By Default the Title is Heading 1 which you only have one of per page and you can select multiple Heading 2 (H2), Heading 3 (H3) or Heading 4 (H4) block as desired.

The different Headings look like this:

Inserting Images

You can insert an inline image using Image.

When you do this, you will get the following block with an upload button.

You will be able to upload a single image.

You can click below the image to insert a caption:

Inserting Multiple Images

Using Image to insert multiple images is inefficient. We can instead create a Gallery Block:

Type in Gallery and select Gallery:

You will get a similar window with an upload button:

You can now select multiple images to make a gallery:

Gallery images are typically smaller, these are set to be in 3 columns by default (additional options show to the right hand side which can be used to vary this):

Here it is shown:

Perhaps you are thinking but I want multiple images but I don’t want them to be small.

We can select the following button and convert it to an image which will take each image you have in the gallery and make a separate image block from them.

It is also possible to make a SlideShow or tiled gallery. I will make a SlideShow first:

Now we see only one picture but it has [←] and [→] which we can use to slide to the next image. The grey and black dots indicate the number of images in the slide show, with the black dot highlighting the currently selected image:

The user can click through your SlideShow at their own pace however sometimes it is useful to have the Slides automatically cycle through. To the right hand side you can set the Autoplay setting where you can set the time delay between each Image.

The one below will transition in a loop every 3 seconds:

Switching to a Tiled Gallery:

We get the following:

Here is the Tiled Gallery:

We can also make them as circles:

Here are the circles:

I will opt for the normal gallery but I want also the SlideShow:

I will therefore select the more on the menu at the top left hand of the tile:

This gives the option to Duplicate the Block or set it as a Resuable Block that you’ll be able to select when you create a new block using (+) on any post or page. I only want to duplicate it:

As expected I now have two of the same object. I can turn the duplicate copy into a SlideShow:

It is possible to insert a GIF which a stack of images set to display at equally spaced time increments. In practice WordPress struggles a bit with GIFs and they also appear to severely loose image quality. You are best to create a SlideShow using the individual frames of the GIF.

Inserting an Image Alongside Text

Inserting Columns

It is also possible to insert Columns

Inserting Video

Here is an example:

Anywhere we type text we should get the Bold, Italic and Hyperlink button:

Now a Link to Parted Magic is supplied under this video. If typed in a text widget opposed to a caption under a video, it will also be highlighted:

We can also insert links in the form of a Button:

For this we paste the link in the Box Below and select the Add Text and then begin typing to change the name of the Button:

For example:

We can also store and share our own file, for example a PDF.

Select Upload and then select your file.
The file types you upload may be limited, for example a text file I attempted to upload that contains Code was rejected. A simple pdf file however was accepted:

Inserting a List

It is also possible to insert a list:

Here typing [Enter] takes you to the next point in your list:

Typing [Enter] once will take you to the next item on your list. Typing [Enter] twice in a row will take you out of the Block.

  • Windows 10 Version 1507
  • Windows 10 Version 1511
  • Windows 10 Version 1607
  • Windows 10 Version 1703
  • Windows 10 Version 1709
  • Windows 10 Version 1803
  • Windows 10 Version 1809
  • Windows 10 Version 1903

Inserting a Table

You can also insert a Table unlike before where you required either an addin or had to use a third party site (or uploaded your table as an image)

Select the Numbers of Columns and number of Rows (these can be changed later if desired):

You now have a table of cells which you can input text to:

I have an additional row which I want rid of:

So I can select the Edit Table Button and Delete it:

We can also change the type of table to one with Stripes:

Here is one without stripes

VersionBuildEnd of Life
150710240May 2017
151110586Oct 2017
160714393April 2019
170315063Oct 2019
170916299April 2020
180317134Nov 2020
180917763May 2021
1903

Here is one with stripes:

VersionBuildEnd of Life
150710240May 2017
151110586Oct 2017
160714393April 2019
170315063Oct 2019
170916299April 2020
180317134Nov 2020
180917763May 2021
1903

Social Media

There are Blocks for embedding various types of Social Media Posts such as Reddit, Facebook and Twitter, unfortunately none of these worked in my test:

Inserting Custom HTML

It is possible to also insert a Custom HTML block. For instance I have this HTML Code for an advert:

I have it in Notepad++, I can copy and paste it:

I can then select Preview to view the Custom HTML as a user:

My Advert Shows:

Here is my example as code:

<p><a href="//microsoft.msafflnk.net/c/1334526/476048/7794"><img src="//a.impactradius-go.com/display-ad/7794-476048" alt="" width="468" height="60" border="0" /></a></p>

Here it is as seen by a user:

Code

There are two ways of inputting code, the SyntaxHighlighter Code or Code. The
SyntaxHighlighter Code is superior as it numbers the lines and colours keywords in the code.

At present the SyntaxHighlighter Code is however only present for Free Users and not those on a Business Plan. This is because Jetpack roll out some features to free WordPress users before releasing them to paid users. Paid users can however install a plugin called Advanced Gutenberg Blocks.

I have some MATLAB Code opened in Notepad++

I can simply paste it in the box provided:

It will look like this:

The code language is by default plain text and it provides the line number. This can be changed to some other types to the right hand side. Since this is MATLAB code, I can select MATLAB:

It looks like this:

In the case of MATLAB having it as Code Language “Plain Text” is better as the lines are numbered. Some of the other languages have better support, labelling the lines and highlighting keywords.

Symbols and Maths

You may notice in the text Block a serious lack of options such as the ability to input symbols. This is likely because Microsoft are adding symbol input to their emoji panel in Windows 10 Version 1903 as well as their touchscreen keyboard and it will be far more useful to use this.

The emoji panel can be accessed using [Windows] + [ . ]

Older builds of Windows 10 for instance Version 1809 only has emojis

As you see it is easy to input Symbols and Greek Letters using the Emoji Panel:

That is symbols however if we want an equation we need to use TeX input and although WordPress supports TeX input it doesn’t have a GUI. To compensate for this we can use MathType. We can use the 30 Day Trial for this. Select Cut and Copy Preferences…

Change to Equation for Application of Website and select WordPress:

Create your Equation and Copy it.
Note setting things like colour, bold, italic etc do not work with WordPress and are ignored. The only two styles that work are maths and text.

Paste into the block:

In my case the Matrix never displayed correctly but the equation did. To rectify this instead of using a Text Block I used a Classic Block

Text Block

\displaystyle M=\left[ {\begin{array}{*{20}{c}} 1 & 2 & 3 & 4 \ 5 & 6 & 7 & 8 \ 9 & {10} & {11} & {12} \ {13} & {14} & {15} & {16} \end{array}} \right]\frac{{-b\pm \sqrt{{{{b}^{2}}-4ac}}}}{{2a}}

Classic Block

\displaystyle M=\left[ {\begin{array}{*{20}{c}} 1 & 2 & 3 & 4 \\ 5 & 6 & 7 & 8 \\ 9 & {10} & {11} & {12} \\ {13} & {14} & {15} & {16} \end{array}} \right]\frac{{-b\pm \sqrt{{{{b}^{2}}-4ac}}}}{{2a}}

Opening Hours

There is also a block which adds Opening Hours to your website which may be useful for a shop or business:

Change the Hours as desired:

The Hours will Display like the Following:

Maps

Another neat feature is setting a Map which is useful again if you are a business or want to set a meeting point. Select Map:

When you first use it you will need a code:

Sign up to the website:

Copy and paste your code:

You won’t be asked for this again. Search for your location e.g. Glasgow:

You can now insert your map. Note you can scroll in and out of the map as desired. It will remember your settings when displaying your map on the page.

It is also possible to change the map type:

And add multiple markers if desired

To the left, select My Site and then customise:

We are interested in the menu. As you see it has two items on it Home and Contact, but not the page we just created:

Select Menu:

Select Primary:

Select Add Items:

Add your Page, in this case I am going to Add my Windows 10 Page:

I don’t want the Home and Contact Page created by default shown so will remove these:

If you want every new page you create to show in the Menu, you can check the Automatically Add New Top-Level Pages to the Menu:

You will see the page is slightly greyed out, this reflects changes haven’t been saved. Select Publish:

To view your website, remove the the wp-admin and everything past it in the address bar:

You can then see how your website looks:

Theme

The default theme puts the menu to the left hand side. This makes text and images display slightly smaller. We can move this to the top but to do this we need to change theme:

Select My Site:

Then Themes:

You will have an assortment of themes to choose from (both free and paid):

I will use the Independent Publisher 2 theme as the table of Contents are at the top:

You can open a Live Demo to preview your website with that theme or Activate it:

Select Customise Site:

Now you see the Menu is at the top:

The columns are also slightly wider:

Widgets

You can also Add Widgets:

These are most commonly seen on the Sidebar

Select Add Widget:

You have an Array of Widgets to Add (similar to the blocks available when creating a page):

I am going to select Custom HTML so I can place an affiliate advert in the Sidebar:

I get a Title and a Box to paste the HTML code in:

As you see my Advert shows. I can then select Done:

I can Add Another Widget:

This time I want to add my Blog Stats:

This shows to the left hand side. I can select Done and then Add Another Widget:

I can also Add a Video:

Then select Insert from URL:

The video now shows in the Sidebar. Select Publish to save the changes to your Sidebar:

Create Multiple Pages and Posts

You now know the basics for content creation and can get started creating multiple pages and posts:

Advertisements