This content was originally intended for an ebook on How to create your first WordPress website, but as I am trying to build my blog into a hub for long-form content, I thought it would work perfectly as an article.
This is a complete step-by-step process of how to create your first WordPress website and includes the following
- How to create your own branding
- How to set up your website hosting and purchase a domain
- How to create email addresses with your domain
- How to install WordPress on your server
- The basics of WordPress
- How to install plugins for extra functionality
- How to change the appearance of your website
- How to install and customise a WordPress theme
- How to add widgets
- How to optimise your website for Search Engine Optimisation (SEO)
- How to add new blog posts and pages to your website
- How to add a contact form
- How to install Google Analytics
- How to build a mailing list with MailChimp
- How to create an agency website for your business
Once you’ve finished this blog, you will be able to set up a website either for a blog, a portfolio or for a local business. This avoids the need for hiring an external web designer, which can often cost hundreds if not thousands of pounds. And in the process, you will learn valuable skills you can use further down the line either for freelance work or to help you create your own web design agency.
Many people believe that starting an online business is an expensive and long-winded process and that you either need to have hardcore coding skills or enough money to pay someone who does. The truth is, it’s never been easier to build your own website and with no coding required, anybody can do it!
Because of its large directory of plugins, simple content management system, theme marketplace and SEO support, we will be using WordPress to build and manage our websites. WordPress was used by more than 26.4% of the top 10 million websites as of April 2019 and is the most popular content management system (CMS) in use on the Web with more than 75 million websites. WordPress allows users to create almost any type of website with ease and is revolutionizing the way businesses and individuals are succeeding online.
WordPress also gives you a lot of flexibility when it comes to design and functionality. If you’re after an even simpler way of creating a website, then I’d suggest using Wix.
1. How to create your own branding
For those that already have an established brand identity, you can skip over this section. If this is your first online business, you should consider choosing a unique name that will reflect your industry, help you rank for the keywords you’re looking for and that will not clash with popular search results. For example
- Using words in your name that will help you rank higher for your keywords: if your keyword is ‘web design London’ then it will be beneficial to include one of these words in your name.
- Do research to avoid clashing with other popular search results: using words that belong to popular businesses in your name.
When you have a rough idea for a name, research it to see if any similar businesses or websites exist. If you think of a niche or unique word that you would like to use as part of your name, you can visit this blog for 200 prefixes and suffixes for domain names. That blog has a selection of prefixes and suffixes that you can use before or after your intended name to make it more unique and in many cases reduce the cost of your domain name.
If you’re struggling to think of a new name for your business, then the following links should be useful:
- Mashable – 16 tips for picking the perfect startup name
- Startup Company Name Generator
- Fortune – 10 rules for picking a company name
- The Next Web – Before naming your startup read this
Creating your own logo
Many people believe you need to hire an expensive graphic designer to create an effective and attractive logo. This is often unnecessary, and there are free tools available which will enable you to create a professional looking logo in no time. If you fancy the challenge yourself, the following blogs will help:
- Creative Bloq – 65 expert logo design tips
- Design Shack – 10 tips for designing logos that don’t suck
- Mashable – 7 killer tips for logo design
- Awwwards – 99 creative logo designs for inspiration
GIMP is a useful piece of free software which boasts much of the functionality of its expensive equivalent; Adobe Photoshop. You can download GIMP here. Here are some useful resources if you’re going to be using GIMP:
- How to create a logo with GIMP
- Download free fonts via 1001 Free Fonts or Dafont
- Free icons for logos via Flat Icon or Free Pik
To install a font, double click on the .ttf or .otf font file and proceed to install it to your system.
If you’d prefer to skip this step and purchase a professionally designed logo, there are a number of different websites that offer affordable logo design. I’d recommend BrandCrowd for a high-quality stock logo customised to your liking or Fiverr to hire a professional to create a logo for an affordable price.
Once you have your logo, make sure it is in PNG format for maximum quality.
2. How to set up your website hosting and purchase a domain
Your domain name is probably the most important part of your business. It is what customers/users will be typing into their address bar as they search for your website. In the past, we were limited to .com and .co.uk domain names, but now, a whole new selection has been made available.
Securing a domain is very straightforward and inexpensive nowadays and can be completed in minutes. I prefer to use TSO Host for my domain and hosting due to the speed, price and ease of use. Their support is excellent and I’m never waiting longer than a couple of minutes when I need some assistance.
Once you’ve decided on a domain name navigate to TSO Host and choose your hosting package. Navigate to WordPress hosting and choose either Startup or Business, depending on whether you plan on developing more than 3 websites on this package.
Press ‘Buy Now’ below the hosting package you choose and then enter your preferred domain. The advantage with TSO Host is that you receive a free domain with every hosting package. This will auto-renew after 12 months at a cost of £11.99.
Press ‘Go’ and enter the promo code ‘EMWORDPRESS10’, this usually gives you 10% off your hosting. Enter your payment details and continue to the next screen.
Click on ‘Products’ and then ‘Login to Control Panel’. You should have received email instructions on how to access your control panel. Navigate to http://www.control.gridhost.com and log in using the details in your email.
After successfully logging in, you should arrive at the Cloud Dashboard. At the top click on ‘Add New Website’
3. How to create email addresses with your domain
After setting up your hosting and domain, you can now create email addresses using your domain. Having an email that matches your domain gives your business an instant professional look. To create a personal email address on the control panel head to Email Accounts.
This is where you will see any existing mailboxes that have already been created. To create a new mailbox click on Create Mailbox.
Enter the desired email prefix, the password and click Create New Mailbox.
Your new mailbox has now been created, you should allow up to 60 seconds before trying to access the mailbox. To access the mailbox head to the Client Configuration section. You can access your mailbox in a browser by clicking on the Webmail link or setup email through a mail client using the following information.
To set up email in a client such as Mail on MacOS or Windows 10, Microsoft Outlook, or through a client on your mobile phone, start off by going to the Add New Account section. In most cases you will see a list of options such as iCloud, Exchange, Google, Yahoo etc. Select the ‘Other’ option and proceed to add the account with the details above.
Your username will be your full email address and the incoming and outgoing mail options will be those stated above. Make sure there is no prefix to the URL such as http:// and it is the stated address in full. Once you have entered all that information, test the email account is working by sending and receiving test emails to that address. Once you have your email set up, it is time to install WordPress on your website.
4. How to install WordPress on your server
Now that you’ve purchased your hosting and domain, created a professional email address and made sure these are set up correctly, it’s time to start installing WordPress onto your website. Following on from the previous section, navigate to the Control Panel inside of your TSO Host account.
This control panel will vary in appearance depending on the hosting provider you are with, but they all have the same main features. Before you install WordPress, there is one change that is needed to be made to the server which will allow us to import demo content further down the line with no issues.
In some cPanels you can do this manually, normally by navigating to the PHP Version section and switching to the options panel, but through TSO Host, this will need to be done by getting in contact with a member of their support team. Start a live chat with a member of the support team and ask them to modify the following values
PHP Memory Limit – increase to 256mb
PHP Time limit – increase to 180 seconds
This translates to mean that we can import content up to 256mb in size and that the server will only timeout after 180 seconds, leaving plenty of time for the process to complete. Without making this change, you may encounter issues when importing demo content through themes. Once this is modified, it is time to install WordPress on your website.
At the bottom of the cPanel page, under Application Options click on the Install Applications icon. Select WordPress and then Install into the default path ‘/’. This means that WordPress will be installed at the root of your directory. On occasions, you may want to install WordPress in a subdirectory such as www.yourdomain.com/website2. You can do this by simply editing the default path to /website2. This will install a completely separate version of WordPress with different logins and a different theme for you to develop.
Once this is installed, you should log in to WordPress using the temporary login highlighted in the green box. Login using the green login button or navigate to www.mywebsite/wp-admin . That’s it! You’ve installed WordPress, now you’re one step closer to having a fully functioning website. It may look daunting at first if you’ve never used WordPress before but it’s very simple and straightforward to use. It’s best to explore the system and get a feel for the functionality.
As you logged in using a temporary login, the first thing to do is navigate to the Users section on the left hand side. It is recommended to change the password of the default account as well as adding a new admin account. Click Edit on the account and scroll down to the Account Management section and generate a new password.
To create a new account navigate to Add New User and enter your desired username and additional details. Select the role of the account, note that Administrators have the highest level of authority and can modify and delete all aspects of the website.
5. The WordPress Basics
Now that you have WordPress installed, it’s time to play around with a few of the settings so that your website will be ready for visitors. The first step is to make sure you have the latest version of WordPress installed. From the dashboard, you will see at the top the option for a WordPress update. Click the Please Update Now option and follow the steps to finish the update.
The best way to familiarise yourself with WordPress is simply to explore. The menus and overall navigation make it easy to find what you’re looking for and although it can seem daunting at first, you’ll soon get used to it and understand every element of the system.
The menu to the left-hand side shows all the basic navigation options for WordPress. More options will be added to this sidebar as you install additional plugins and themes, but for now, we’ll explain the basics.
Posts – create new posts that are posted to your website
Media – any files you upload to your website during posts or pages will be stored here
Links – add links to your website in categories
Pages – manage and add different webpages to your website
Comments – when people post comments on your posts (if you allow it) you can view and moderate them here
Appearance – manage the appearance of your website, install themes, widgets
Plugins – install and update plugins, these give your website further functionality
Users – add and manage other users to the website, set privileges for editors or administrators.
Tools – when you install certain plugins, they can be managed from here, also lets you import and export content from other systems
Settings – add information about your website, change preferences for subscribers and change default WordPress settings
Before you start changing the appearance or installing plugins on your website, you should consider changing a few of the settings of your website.
General – change the Site Title and Tagline, your date and time preferences, default membership status for visitors and website language.
Writing – change the default post category, post format and link category.
Reading – choose what is posted on your front page, how many posts to show at once as well as showing the full text or just a summary of your blog posts.
Discussion – manage settings for comments and new users.
Media – set the default size for image uploads and default upload path (you shouldn’t have to change this)
Permalinks – change the default settings for new posts. A permalink is the permanent link address for that post such as
www.mywebsite.com/article/permalink. You can leave this how it is for now.
6. How to install plugins for extra functionality
There are thousands of plugins on the WordPress plugin directory. These are the essential plugins which will give your website all the functionality you need from the start.
Installing a plugin
On the WordPress dashboard, navigate to Plugins
Select Add New. You can install plugins two ways:
- Install straight from the Plugin directory by finding the plugin and pressing install now
- Select Upload plugin and upload the .zip file you get after downloading a plugin
There are a number of plugins that are recommended to give your website some much-needed functionality. While on the plugin section, search for and install the following plugins.
Contact Form 7 – Lets you create simple and flexible contact forms to handle user queries
Duplicate Post – Allows you to duplicate any type of item, such as Pages or Posts
Google Analytics Dashboard for WP – Displays Google Analytics reports and real-time statistics. See detailed information on your visitors and their behaviour when on your website
MailChimp for WordPress – Start creating a mailing list by offering users the opportunity to sign up for newsletters and mail blasts
Simple Custom Post Order – Reorder posts on your homepage (for blogs) so they do not display in date order
Smush Image Compression – Compresses image file sizes, improves website performance and boosts your SEO ranking
WP Fastest Cache – Very fast caching plugin for WordPress, improves the speed and performance of your website.
Yoast SEO – The all in one plugin for search engine optimization. Provides on page analysis of your content and suggests improvements for maximizing search engine optimization.
7. How to change the appearance of your website
Themes – add new themes and customize the ones you already have installed. Themes are pre-made templates for controlling how your website looks.
Customize – customize your current theme generating live previews of your website as you add or change features.
Widgets –manage which widgets show on your website and their position on the page. Many plugins come with pre-installed widgets and the majority of what you see on a WordPress website other than their content is widgets.
Menus – add and manage the menus on your website. You can link pages together or add external links to other websites.
Header – this will take you to the theme customizer where you can add a header image or text depending on the theme you have installed.
Background – this will take you to the theme customizer where you can add a background image to your website.
Editor – add custom code to your website. If this is your first website you will not need to worry about this but we will explain how to add simple CSS code to alter elements of your website later on.
8. How to install and customise a WordPress theme
The overall appearance of a WordPress website is determined by its theme. Themes are pre-packaged files that can alter the appearance of all aspects of your website. There are thousands of free and premium WordPress themes to choose from. For the purpose of this book, we will customise our websites using both a free and a premium theme.
It goes without saying that the difference between using a free and a premium theme is huge. Using a free theme is ideal if you are creating a simple blog, or a very basic website for your business. You will have limited customisation options and will not be able to achieve as professional a looking finish such as when using a premium theme.
For this demonstration, the premium theme we will be using is the Avada Multi-Purpose theme. This is the most popular theme ever created, it is regularly updated to meet current WordPress standards and offers many customisation options and demos available to install in one click.
If you’re looking to take website development seriously, then we’d recommend investing in the Avada theme now, as you can use it on a number of websites and the developers are constantly adding new features and demos. It is available for a very reasonable $59 from Theme Forest here.
We’re going to start off by installing both a free and premium theme for creating a simple blog
To install a free theme navigate to Themes then Add New
When you find a theme you like, select preview to see what the theme looks like. If you’re satisfied with the theme, press install. Once the theme is installed you can select Live Preview to see how the theme looks on your website with your current content. If you’re happy with the theme select Save & Activate then press the X to go back to the WordPress dashboard.
For our blog, we will be using the Baskerville blog theme. This is one of the professional looking blogging themes and offers a lot of functionality for a free theme. Head to the theme browser and install Baskerville.
Once installed, select to customize the theme from the theme dashboard. This will bring you to the live customizer. This allows you to edit elements of your website’s appearance and see the changes instantly. This customizer is the default for many free themes and will allow you to change elements such as your logo, font, colour scheme, background images etc.
This may be enough for you if you’re aiming to create a simple blog, but as we progress you will understand the benefits of installing a premium theme.
The clever part about the customizer is that you can see how your website will look on a range of devices, from standard PC screen to tablet and then to mobile. Simple click on the icons at the bottom left of the page to switch between the views.
The majority of WordPress themes are now mobile optimized, which means you don’t have to carry out any extra work in order for visitors to view your website with full functionality on their mobile devices. We will now look at the customization options available with this theme.
This is where you will enter your website name, as well as a tagline that could be your slogan or the purpose of your website; this is usually 4-6 words. Your site icon will be your favicon as mentioned earlier. You will want a square image of your logo or something to help identify your website, in either PNG or JPG format. Visit Favicon Generator to create a favicon.
Upload your image, select Generate icons for Web, Android… and press Create Favicon. On the next page select ‘Download the generated favicon’. Extract the file by double-clicking on the .zip file. Navigate to the extracted folder. Go back to your website and upload the favicon-96×96.png file in the Site Icon section.
This preview should appear, select skip cropping and your website should refresh to now show your icon in your browser.
On this theme, this allows you to only change the background colour. Different themes offer different levels of customization. We will be keeping this at the default as it gives the website a professional look. Colours are entered using what’s called hexadecimal values which are a hashtag (#) followed by 6 digits.
You can upload your logo here instead of the default Baskerville text, on this theme however on this theme you will not be able to display your tagline at the same time. You will want to make sure your logo has a transparent background, this can be done on GIMP and Photoshop by deleting the lowest default background layer, but should come as standard if you purchased your logo. You will want to upload the PNG version of your logo.
You can change the image behind your logo text, we will leave this as default for now but if you want to change it, you can download a variety of free WordPress headers from http://www.freewordpressheaders.com/ or http://www.freewebheaders.com/
If you would prefer a background overlay instead of a base colour, you can upload a high-quality image here.
We will now demonstrate the process of installing a premium theme to WordPress. For this example, we will be installing the Avada theme and installing a demo blog website. Once you have purchased your theme you will need to download the installable WordPress file. If you’ve purchased your theme through Theme Forest you can start this by hovering over your name in the top right-hand corner and navigating to Downloads. Press the green download button and select Installable WordPress File Only.
You should now have a .zip file ready for you to upload to WordPress. Back on your website, on the Theme section, click Add New theme and upload the .zip file you have just downloaded. Once the theme is upload, go ahead to activate it.
Avada is now installed and you will be redirected to the welcome page as shown below
There are a few things we need to update and install before we’re ready to import any demos. Start off by navigating to the Registration section. This is where we will register this version of Avada to ensure we regularly receive theme updates. Follow the instructions to get your registration key and enter it in the box to proceed.
Next, navigate to the Plugins section. Hover over the required plugins and click install then activate. Proceed to install Fusion Core, Fusion Builder and Contact Form 7 for now.
Now we just need to check the System Status tab to ensure our settings meet the requirements for importing demo content. As mentioned earlier, we need to meet the following requirements to import the demo content, otherwise, the server will timeout and the import will fail.
PHP Memory Limit – increase to 256mb
PHP Time limit – increase to 180 seconds
On some cPanels, you can change this manually by navigating to the PHP Version section and finding an options panel. As we’re using TSO Host, I started a chat while logged into my account and asked the representative to do this for me. Once it is complete, refresh the System Status section and the two values should now appear green.
The final thing we need to do before importing demo content is to use the Fusion Patcher. This is found in the navigation pane on the left-hand side. This will fix any bugs and make sure that everything is set for us to proceed.
Click Apply Patch, wait for each one to complete and then apply the next. Now we can navigate to the Demo section and begin our import. For this example, we will be importing the Classic theme. Hover over it and click Import. Continue to install any additional plugins that are required for this demo, then under Import Content select All. Now click Import and the process should begin.
If you now navigate to your homepage, you will see the Avada website appear. All these elements and pages are now fully available for you to customise to your liking. With the Avada classic theme, there are over 100 pages available for you. For the purpose of this demonstration, we will be making the blog Grid page our homepage. Navigate to Settings on the left-hand side and select the Reading section. Select Grid as the homepage and click save.
At the moment, the remaining 100+ pages are still public. You have the option to delete these pages or just keep them as a draft for potential use in the future. Head to the Pages section, at the top right, press the Screen Options button. Increase the number of items to show to 200 and click Apply. Select all of the pages by ticking the top checkbox then untick the box of Grid and any other pages you plan to keep. Under Bulk Actions select Edit then Apply and on the Status option select Draft and then Update. We will now proceed to the customization options for the Avada theme. Remember with the free theme we simply navigated to Appearance Customize. With the Avada theme hover over the Avada section on the left-hand side and select Theme Options.
As you can see, there are many more customization options than the free theme. We won’t go into detail with each of these sections as they are fairly self-explanatory. To get a feel for the level of customization you can achieve, explore each section, play around and tweak elements and notice the result. As we progress through this book, you will constantly want to revisit the Theme Options section to achieve your desired look.
We will now learn how to create and edit the menus on your website. Menus are the series of links that normally appear at the top of the page in the navigation bar. Navigate to Appearance on the left-hand side and then to Menus
You can build the menus for your website here. WordPress makes it very easy to control your menus, submenus and links. The menu location section is where you can choose where to place menus in each theme. Some themes have multiple locations such as header menus at the top of the page, footer menus at the bottom, and social menus with links to different social media platforms.
Either edit the current menu or add a new menu, choose a name and press create menu.
You can add menu links to a number or locations, either to posts or pages you have created or to categories of posts, custom links or tags. For now we will just add a link to our default ‘About’ page. As we create more content, we will return to this section to add additional items to our menu.
To add a dropdown menu, drag a menu item under another and slightly to the right
The result will look something like this
With the Avada theme, there are many customizations you can make to the menu that you should explore.
9. How to add widgets
Widgets are the foundation to much of the extra functionality on a typical WordPress website. By default, there are a number of widgets already added to some websites, such as a fully functioning search bar, category lists and recent posts. Many plugins come with their own widgets and different themes have different locations for widgets. The most common locations for widgets are in the footer and in the sidebar if your theme supports one. In our case, we only have the footer to place widgets.
To add a widget, press ‘Add a widget’ and select your preferred widget from the list. Then press the dropdown arrow to edit any settings for this widget. Other widgets may have extra settings that can be accessed from the WordPress dashboard.
10. How to optimise your website for Search Engine Optimisation (SEO)
Before we proceed to create pages and posts on our websites, it’s best to first understand the concept of Search Engine Optimisation so that we can apply it from the beginning.
Search engine optimization is the process of optimizing text, images and videos to improve their organic search engine visibility. There are many introductory videos on YouTube that may explain this process in greater detail which could be useful.
We optimize our websites so that search engines can index them to identify where they should rank in relation to user searches.
Important Ranking Factors
Uses of Keywords: keywords are the search queries that users type into search engines when they are looking for specific content. When you’re aiming your content at a specific keyword, you should try to include this in the title, content, permalink (URL), images etc.
Use of Header Tags: you should a number of different header tags on any pages or posts you create. Try and include your main keyword in any H1 elements and any other keywords in H2 and H3 elements.
Content Length and Quality: Search engines place a lot of emphasis on the use of original and valuable content. It is advised to write at least 300 words of original content for a blog post. Search engines can identify duplicate content and it can affect your ranking heavily.
Optimizing everything: it isn’t just your text content that needs to be optimized, images and videos also need to have relevant keyword tags to achieve a high ranking.
Internal and Outbound links: you will want to include links to other content on your website as well as outbound links to sources or relevant content on other websites. You should try to limit the number of outbound links otherwise Google will identify you as a bridging website which will affect your ranking.
Off-Page Ranking: Getting links to your content and website from other trusted websites is a big plus for SEO. Trusted websites that link back to yours will tell Google your content is valuable and will improve your ranking. Social media also plays a big role. When active and popular social media accounts link to your website, this also favors your ranking.
Other Factors: When you submit your sitemap, it tells Google how many pages are on your website and how they link together, making it easier for Google to index your website. Having a mobile-optimized website is an important factor. We will be using mobile responsive themes when making our websites that means they should work well on mobiles. Your page speed plays a big role; try to avoid large images and videos as well as hundreds of unnecessary pages. We use compression plugins to reduce our image sizes and caching plugins to improve overall performance.
Using the Yoast SEO Plugin
You should have already installed the Yoast SEO plugin, if this is not the case, navigate to the plugin section and proceed to do so. There are other SEO plugins such as Jetpack and All in One SEO Pack that can achieve the same result but out of personal preference, we will be using Yoast SEO for this example.
Head to the dashboard for your Yoast SEO plugin. To enable the added functionality in the Yoast SEO plugin and the additional menus, head to Dashboard -> Features -> Advanced settings pages and enable the setting.
Under the Your Info tab, enter your Website name, an alternate name if you have one, and choose whether you are a company or person. If you select Company, you can then upload your logo.
The Webmaster Tool section is where you will verify the ownership of your website to Google. Head to
And login using a Gmail account. Click Add a Property
Enter your website name and click Add. Continue to press verify using the HTML tag option
Copy the tag and head back to WordPress. Go to Appearance –> Editor and then find the Theme Header (header.php) file on the right-hand side.
In that file paste the verification code below the first <head> tag
Click update and then return to Google and click verify
Once this is finished, you should be notified that your domain has been successfully verified, click continue.
You should be then redirected to the Google Search Console dashboard. You can navigate away from this now but we will be revisiting it when we submit our XML sitemap and set up analytics on our website.
Back to Yoast SEO
Navigate to the Titles and Meta section under Yoast SEO.
This is where you can select the Title separator that will appear between your site name and site description.
This is where you enter how your homepage will show on Google, you can leave the default values for the title template and it will be generated automatically. Alternatively, you can add your own values as well as a meta description.
The result is
You can change the default settings for your posts, pages, media etc. pages here. You can input information into these parameters when you create a new post. If you want the date of the post to be shown in search engine results (recommended) then enable the Date in Snippet Preview. You can use a number of variables for title templates as shown below.
|%%DATE%%||REPLACED WITH THE DATE OF THE POST/PAGE|
|%%TITLE%%||REPLACED WITH THE TITLE OF THE POST/PAGE|
|%%PARENT_TITLE%%||REPLACED WITH THE TITLE OF THE PARENT PAGE OF THE CURRENT PAGE|
|%%SITENAME%%||THE SITE’S NAME|
|%%SITEDESC%%||THE SITE’S TAGLINE / DESCRIPTION|
|%%EXCERPT%%||REPLACED WITH THE POST/PAGE EXCERPT (OR AUTO-GENERATED IF IT DOES NOT EXIST)|
|%%EXCERPT_ONLY%%||REPLACED WITH THE POST/PAGE EXCERPT (WITHOUT AUTO-GENERATION)|
|%%TAG%%||REPLACED WITH THE CURRENT TAG/TAGS|
|%%CATEGORY%%||REPLACED WITH THE POST CATEGORIES (COMMA SEPARATED)|
|%%CATEGORY_DESCRIPTION%%||REPLACED WITH THE CATEGORY DESCRIPTION|
|%%TAG_DESCRIPTION%%||REPLACED WITH THE TAG DESCRIPTION|
|%%TERM_DESCRIPTION%%||REPLACED WITH THE TERM DESCRIPTION|
|%%TERM_TITLE%%||REPLACED WITH THE TERM NAME|
|%%SEARCHPHRASE%%||REPLACED WITH THE CURRENT SEARCH PHRASE|
|%%SEP%%||THE SEPARATOR DEFINED IN YOUR THEME’SWP_TITLE() TAG.|
You shouldn’t need to change any further settings. Many people haven’t heard the word taxonomy before. An explanation of WordPress taxonomies can be found here: https://codex.wordpress.org/Taxonomies
The same goes for Archives, but the principle is the same as the other post types.
Other Yoast Settings
At this point, we will not be adjusting the settings for Social, XML Sitemaps, Advanced & Tools. When we reach the stage of creating social media accounts to link to our website we will revisit this section. When we have some content on our website we will then submit the XML sitemap to Google.
To allow your website to fetch the Google Search Console information, press the ‘Get Google Authorization Code’ button. A pop-up window should appear, press allow to continue. Copy and paste the code given into the box, then press Authenticate. This should now show your website profile, press Save Profile to finish.
Now that our website is ready for SEO, we can start to create pages and posts with this in mind to ensure our website is optimised from the beginning.
11. How to add new blog posts and pages to your website
Creating a new Post
In WordPress posts and pages follow a very similar format. Posts in WordPress are what make your blog a blog. They are servings of content which users can engage with. To add a new post you can navigate to posts on the left and press Add New or click the ‘+ New’ menu at the top and then on Post.
It may look confusing at first, but is very simple once you understand what’s going on. Using our free theme, the page will look like the following image. However, when we use a premium theme there is more than likely a drag and drop builder plugin included.
With Avada, it is the Fusion Builder plugin which allows us to drag and drop elements and arrange pages with more flexibility.
To create a page or post using the drag and drop Fusion Builder, click the button at the top of the page labeled Use Fusion Builder
You should now see the Fusion Builder window. It is a simple to use drag and drop system centered around containers, columns and elements. Below is how the Fusion Builder will look when you have little or no content on the page. If you’re editing a page or post that has been imported as part of the demo content, there will be many columns, containers and elements already visible.
There are many pre-built elements for you to use. Click + Element to explore these and once you’ve chosen one, you can continue to play around with the additional options.
In most cases when you’re using the Avada theme, you will only be editing the text, icons and images in the demo. If you’re building your own pages from scratch, there are a few things to note. If you’re not familiar with CSS elements such as margin and padding, then fear not. Elements all work on the box model shown below. You will have the following:
- The content of the box, such as text and images
- The padding which clears an area around the content and is transparent
- The border which goes around the content and padding, such as the edge of a box
- The margin, which clears an area outside the border and is transparent
With everything WordPress related, it’s best to explore, play around and tweak the settings of various elements to understand what is really happening. At the bottom of the page, there are additional Fusion options. This is where you can choose to use a slider and tweak other elements that are set by default. Later on we will explore how to use sliders when we import a different demo. For now we can move onto the SEO for our page or post.
Optimising your post/page for SEO
When you scroll down past the content of your page/post, you will see the Yoast SEO section. This is where we will edit how your page/post will appear in search results and to ensure it is optimised to do so.
Consider the following when optimising your page/post:
Keywords – Include your keyword in your Title, Headings, Image ALT attribute, Permalink, Meta Description, Excerpt and a number of times throughout your actual content. However, do not try to stuff your keyword into your content unnaturally.
Yoast will give you feedback on how to optimize your post; you will want to achieve a good rating before you publish.
Headings – try to include a variety of headings to split up your content into sections. Nobody wants to feel like they’re reading an essay. Try to use your keyword in a H1 or H2 heading at some point.
Include Links – Include links both to other websites and to other pages/posts on your own website. This will encourage users to view more of your content.
Images – include a main featured image and a number of additional images in your blog post. When you upload an image, ensure that the Title and Alt Text contain your keyword, this is very important in improving your ranking.
Yoast will continue to give you feedback on your readability and SEO scores, you will want to aim for Readability as Good or OK and SEO as Good before you post your content.
Comments – Encourage visitors to post comments by asking questions at the end of your post.
12. How to add a contact form
A contact form is a general requirement for near enough every website. Many websites will include a contact form on a separate page. With the Avada theme, many of the demos require you to have Contact Form 7 installed and will import a pre-built contact page for you. If you are adding the contact form as part of a free theme. You will first want to create a new page called Contact. Make sure you have validated the Contact Form 7 plugin.
Follow the link to validate the contact form. To create a contact form head to Contact -> Add New
You can add additional input fields by clicking the buttons at the top. Once again, it’s best to play around with these to achieve the contact form you’re looking for. If you would like the text indicators for the input fields to appear as a default value inside the box instead of a label then you can use the placeholder “TEXT” shortcode to achieve this. Make sure to leave a space between the lines to keep your input fields separated on your website.
Select the Mail Tab and enter the email that you would like to receive the messages. You can leave this as the default if you want your messages to go straight to WordPress.
You will see the contact form shortcode appear. Copy this shortcode and paste it into a text box somewhere on your website to make it appear.
13. How to install Google Analytics
At this point, your website should be almost ready. You should have to knowledge to be able to edit a WordPress theme to achieve your desired look and know how to add new pages and posts to make sure your content is viewable. Using analytics effectively can help you understand visitor behaviour and optimise your website for future visits. In order to track the analytics of your website, you will first need to get your tracking code. Follow the instructions in the article below to get this:
Get your tracking code:
Once you have your tracking code you will need to add it to every page. We can do this by adding it to the theme.php file on your website. Head to Appearance -> Editor and select the Theme Header (header.php) file from the list on the right
Insert your code after the <body <?php body_class); ? >> line
This may just be <body> on certain themes.
Go ahead and press Update File. Google analytics is now set up on your website. It will take Google around 12-24 hours to start providing you with data on your website.
Submitting your XML Sitemap
Your Sitemap is what tells Google the structure and content on your website. You should regularly submit new sitemaps if you add new pages or make any significant changed to the file structure. To submit your sitemap and let Google know about your website head to
Under Crawl on the left side, select the Sitemaps option
Press ADD/TEST Sitemap then head back to WordPress and from the Yoast SEO option select XML Sitemaps.
Press on the XML Sitemap button
This will open up a new webpage, copy and paste the part of the URL after www.mywebsite.com/COPYTHIS.
Paste this into the box on the Google Search Console page and press submit.
This will now take 12-24 hours to be submitted to Google, at which point your website should start to appear in the Google search results.
14. Building a mailing list with MailChimp
Building a mailing list is an important tool for any business or individual as it will give you access to a database of relevant website visitors, helping you market new content easily. Make sure you’ve installed the MailChimp for WP plugin then navigate to the MailChimp section your WordPress dashboard.
Click on the link ‘Get your API key here’
This will take you to the MailChimp website, create an account.
When prompted, select Yes on the Does your business sell anything online? Page. This will be useful if you decide to sell products through your website in the future. You will need to activate your account through the email provided.
Once you have entered your details and clicked continue, you will be taken to the MailChimp dashboard. Select Create a Key.
This will generate a key that you will then enter in the MailChimp WordPress section.
Copy and paste the key into the text box next to API Key and click Save Changes.
Select your notification preferences and click Save.
After you have created your list, it’s time to create an opt-in form on your website to add new subscribers to your mailing list.
MailChimp Subscriber Form on your Website
Navigate to MailChimp for WP –> Forms. Create a new form and select the relevant MailChimp list in which users will be subscribed to.
The default settings for the form will give you a simple email only subscription box. If you’d like to add a field, click on the buttons in the Form Fields section. You can alter the behaviour of your form in the following sections.
Messages – update the message responses upon success or failure of a sign-up.
Settings – choose the list the form subscribes people to, select double opt in (where a new subscriber has to confirm the subscription through their email before they are added to a list), select redirect page and form behavior after a new sign-up.
Appearance – change how the form is styled. It’s best to inherit this from your theme to achieve consistency.
Sometimes, the MailChimp form is styled in a way that is not consistent with the rest of your website. You can alter the appearance of input field and button by using code similar to the following
This is the code block used
<div style=”align: centre;”>
<input type=”email” name=”EMAIL” placeholder=”YOUR EMAIL ADDRESS” required style=”display: inline; width: 300px;”/>
<input type=”submit” value=”SUBSCRIBE” style=”
font-family: Unica One;
padding: 10px 20px 10px 20px;
height: 50px; margin-top: 5px;” />
Note the following
- The first <div> tag decides the alignment, change this to left or right if preferred.
- If you want the input and button to appear on the same line, keep the diplay: inline; option, if not, delete this line
- You can easily change the font, text colour and background colour
- Adjust the padding to decide how close the text appears to the edges of the button
Alternatively, you can visit http://css3buttongenerator.com/ and design a button for yourself and then paste the code inside the quotations after style.
Once you’re happy with your form, you can add it to your website using the short code or through the widget section using the MailChimp Sign-Up Form widget.
Once added, you can test whether it works by navigating to your website and submitting your information. If you’ve left the default setting requiring a double opt-in. You will have to wait until the subscriber confirms through email before they are added to your MailChimp list.
MailChimp makes it surprisingly easier to create and send professional looking newsletters to your subscribers. On the MailChimp website, navigate to Campaigns à Create Campaign à Regular Campaign
When you have subscribers you will select Send to entire list to send your newsletter out. For now, we will test using the Newsletter builder so select ‘Paste emails to build a segment’ and enter an email you own which you can send your first Newsletter to. Press Next in the bottom right-hand corner.
This next page is where you will enter your campaign info; the email subject which your subscribers will see first and the name of the sender.
Next, you will choose a template for how you want your newsletter to appear, when you find a layout you like, click select.
You can change all aspects of your Newsletter, add buttons, videos and all sorts of interesting features to make it more interactive.
Once you have designed your newsletter and added your content, click Save and Close and then Next.
On the final page, you will get a summary to make sure you have included everything necessary in your newsletter. When you’re ready, click Send and that’s it, you’ve just sent your first newsletter!
15. How to create an agency website for your business
In this section, we will demonstrate how to create a business website with both a free and premium theme.
If you run a business and are looking to create a website to showcase what your business does, there are a number of excellent free themes to get started with. For this demo, we will be using the free Sydney WordPress theme. Navigate to Appearance –> Themes –> Add New –> Search for Sydney and install the theme.
After you have installed and activated the theme, install the recommended plugins
Next, you will want to navigate to Appearance –> Sydney Info and under the recommended actions tab, we will install the recommended plugins. In this case, it’s Page Builder by SiteOrigin, Sydney Toolbox and Demo Content.
Now you will want to navigate to Appearance –> Import Demo Data and click the Import Demo Data button
Once this demo data has been imported, you will see a number of new pages appear in the Pages section. This may take a few minutes so be sure not to close the window while this is happening. You should now have a number of Demo pages which have been imported. The page titled My Front Page is the imported Home page you can now adapt to your business branding and the My Blog page is where any blog posts you have written will appear automatically. You can click View to get a preview of the pages and click edit on a page when you are ready to edit the information.
Before we edit any of the pages, we’re going to add our branding to the website and adjust the appearance of our website. This is similar to what we achieved in the Creating the appearance of a blogging website however because we’ve installed the Sydney theme, there are many more customisation options. These options vary from theme to theme and it’s best to play around with the settings to familiarise yourself with the functionality of each option.
Navigate to Appearance –> Customise and you will see the following options.
General – change the padding for elements at the top and bottom of your website.
Site title/tagline/logo – where you can change the name of your website and tagline as well as uploading your own logo.
Header area – includes header type to change the format of the header between slides/images/videos; the header slider options to add slides, change slide images/text and the call to action button; menu styles where you can alter the menu position and whether it is static or sticky.
Blog option – change options in how your blog posts are presented.
Fonts – alter the fonts throughout your website.
Footer – choose how many footer widgets you want to appear.
The rest of the options are straightforward.
Once you are happy with the appearance of your website, we can now start to edit the information on the demo pages. Before we edit the layout of your front page, it’s best to update the Services, Employees, Testimonials, Clients & Projects sections on the left-hand side. There is plenty of demo content already available in those sections and should be easy to understand how to edit them to contain your information.
Once this is complete, navigate to Pages –> My front page. You will notice the elements in blocks and how they relate to what’s being shown on your front page. This is similar to Fusion builder used in the premium Avada theme, but doesn’t have as much functionality.
You can click on the spanner icon to change certain attributes of each row or hover over an element and select edit to change the content of the element. Once again it’s best to play around with these settings to understand what effect they have.
Different themes come with different page builders but they all achieve the same result. Many premium themes come with a plugin called Visual Composer which has more functionality and many more pre-built elements.
Once you’ve finished editing the information to your liking, you can then use the same process to edit the other demo content pages if you require additional pages on your website.
To create a business website with Avada, you should first look to find a suitable demo to import. Head to https://avada.theme-fusion.com/ to browse through the demos. They have many industry-specific demos which you can import and edit to your liking. If you’ve previously imported a demo using Avada, you will first want to uninstall and remove any of this content before importing the new demo. To do this, navigate to the Demos tab on the Avada menu, on the demo you previously imported hover over and click Modify. Under Remove Content check Uninstall and then Remove.
You can then select a demo to import it, and tweak the pages and settings in the same way you did for the blog website.
I hope this article has been straightforward and easy to follow. If you’re stuck at any point leave a comment below and I’ll be sure to help out