Skip to content

Create a Website with WordPress

  • Guides
Home Page Image

By the end of this guide, my goal is that the reader will have the ability to create a website, including SSL, WordPress and basic SEO and speed optimization.

*This guide will be as general as possible, however, the setup, registrar and domain hosting are currently through Hostmonster for cameronsjordan.com. This domain hosting platform is not recommended for new users, however, as there are numerous alternatives with improved delivery speeds.

Domain Shopping

Find a registrar to buy your domain through, for example; GoDaddy.com (which holds the largest portion of the market when considering individual registrars, nearly 14.7% of domain registers) or NameCheap inc. (which holds the next highest amount of domain registers at approximately 3%). I have used the built-in HostMonster registrar to manage my domain, which makes up for a small portion of the remaining nearly 73% of domain registrars with less than 1% of domain registries on the internet1.

.com and .org are recommended as it reduces confusion when users are attempting to find your site. Most .com and .org websites will cost under $15 per year, and many hosting services will offer a free domain for a year as an incentive to gain business.

Choosing a Web Hosting Provider

There are many various options for Web Hosting that vary in cost, possible size of the website and type of hosting, primarily between private and shared. Without experience working outside of Hostmonster, I am not personally qualified to recommend a specific provider over another, however, a few considerations to take into account are their average speed, ease of use, price and, whether or not they support HTTP2. For the uninitiated, HTTP2 allows for the simultaneous loading of multiple files, whereas HTTP1.1 only allows for a single file to load at a time, which can significantly slow down the loading of sites in which many files must be loaded into the browser.

Connecting to WordPress 

The vast majority of web hosting platforms will have an option to install a content management system (CMS) through their panel (Control Panel and/or cPanel in Hostmonster and Bluehost). The most popular CMS on the internet is WordPress, with over 30% of all websites on the world wide web running WordPress. To put this in perspective, this is over 75 million websites as of 20212. This is often very simple and allows for the user to add WordPress functionality to the domain. These installations will often come with the option to install certain “recommended” plug-ins, for example when installing WordPress through Hostmonster there were four plug-ins that could be optionally installed along with the initial WordPress installation; WPForms Lite, MOJO Marketplace, Jetpack and, AIOSEO (All In One Search Engine Optimization) [read more about these plug-ins, and more of my recommendations below].

Connecting and Enabling SSL

SSL stands for Secure Socket Layering and is a standard encryption protocol for the security of websites. Many Web Hosting Providers will offer a free SSL, and although investing in a more comprehensive option is recommended for eCommerce websites, the average blog or personal portfolio will not necessarily need anything over and above the free SSL. 

This free SSL can be implemented through the Web Hosting Platform, by first activating the SSL, often found in the encryption options of the Web Hosting Platform. You need to then change the home domain and site domain within WordPress from HTTP:// to HTTPS://

Previously there has been a necessity to use a plug-in to change the hard-coded HTTP references to HTTPS within the code database of the WordPress website. I have personally used a plugin called “Really Simple SSL.” This plug-in can be added to WordPress through the left-hand menu by navigating to Plug-ins > Add New. Search for “Really Simple SSL,” then click Install Now and Enable. This was very effective and simple to use, however, there was one step that required a little more thought; this was to enable an effective routing from HTTP to HTTPS, which required access to the .htaccess file in the database of the website.

There is a slim chance that this will cause a loop, thereby locking you out of the back end of the website, this can be escaped by downloading an FTP (File Transfer Protocol) solution and connecting it to the website, which is good practice otherwise, as well. My preferred FTP solution is Filezilla, which is a free open-source FTP solution, allowing access to the files that compose the back end of a website. After downloading your preferred FTP client, you should take steps to connect and allow access from this FTP to the website, the process of which I will not walk you through as it differs between both web hosting providers and FTP solutions. Once you have done this, you gain access to the .htaccess file, allowing you to reverse the edits made by the Super Simple SSL plugin, in the event of a back-end lockout.

However, with the latest update to WordPress, 5.7/5.7.1 they have added the ability to convert to HTTPS “with a single click.” The update purports that “WordPress will automatically update database URLs when you make the switch,” however, I have not tried this personally and can therefore not vouch for, or guide the reader through the necessary steps included in this procedure.

Themes and Page Builders

Now that you have purchased a domain, installed WordPress on your website, and secured the domain with SSL, it is time to build the foundations for your website.

Most modern WordPress sites use what is called a theme; these can be accessed through the Appearance tab on the left-hand navigation bar within the wp-admin page of your website. WordPress automatically comes preinstalled with various basic themes, Twenty-Nineteen, Twenty-Twenty, and Twenty-TwentyOne. As there are thousands of themes to choose from with a wide variety of specific purposes, I will leave the choice of theme to the user as homework, and move on to a few basic recommendations when choosing a theme.

I would recommend making sure that the theme that you choose is: 

  1. Responsive – meaning that it can display an altered version of each page on a mobile device, which is increasingly important as over 50% of all internet traffic occurred on a mobile device in 20203
  2. Site Builder Compatible – meaning that that specific theme is compatible, and will remain compatible with the newest versions of popular site builders, including Elementor, which I will touch upon in the next unit.
  3. SEO Optimized ( I will touch on this when I speak on basic SEO)- However, in short SEO stands for Search Engine Optimization. A part of that is reliant on site structure, of which the theme is a large portion. Therefore, it is important to make sure that the theme that you have chosen is optimized for SEO.
  4. Low Weight – which is a way of saying that is built on a smaller codebase which in turn will help speed up the website, and help with user retention, lowering bounce rates, and improving SEO. This often goes hand in hand with SEO Optimized as they are not mutually exclusive, and many features included in a low-weight theme will help to optimize the site for SEO.

WordPress is divided primarily into two separate parts; Pages and Posts. Pages are the top level of the website. These are the pages that would show, for example, a homepage, an about me page, or general informational page, and are more often than not mostly static, although no requirement says that they have to be this way.

 Posts, on the other hand, will show up on whichever page you select on your website as your blog page. These are often less customizable, as you cannot customize them with Elementor or any other page builder to the best of my knowledge, and will often contain only text, images, and links. The page where posts are displayed (known as the blog page) can only be configured through the native WordPress block editor and the theme’s customization option, and most often not Elementor.

Now, on to page-building. Elementor is a page-building plug-in that allows for greater capabilities within the WordPress CMS. Elementor says that it is “the only complete design platform to offer pixel perfect design, yet produces 100% clean code.”4 Elementor works in a block system somewhat reminiscent of the native WordPress builder, but is more versatile and allows for greater customizability. 

Plug-ins

There are thousands of various WordPress plug-ins, and I will only be discussing the specific plug-ins that I have experience with. I encourage the reader to research the various options for each level of functionality above and beyond those mentioned. Plug-ins can affect both the security of your website if they are not kept up to date and compatible with the latest version of WordPress, as well as the speed of your website through adding various files or through server CPU expenditures.

Plug-ins are added to your WordPress site by clicking on Plug-in > Add New on the left side menu of your WordPress dashboard.

Now on to the plug-ins which I have specific experience with:

Elementor

I have already mentioned this plug-in and can vouch for its effectiveness, however, it must be noted that it does bloat the website to a small degree, causing some slowing to the speed of the website. However, without a deeper knowledge of coding, it can be very challenging to create a website with the same level of functionality and appearance as one can achieve with a site builder, so it is therefore recommended to the reader to use Elementor or a similar site builder.

AIOSEO (All In One Search Engine Optimization)

This plug-in will create XML sitemaps which help your standing in Google Search results through allowing easier navigation to the bots and spiders which crawl your website, as well as making the SEO process overall less technical, although I will shortly mention some easy tips to increase SEO that are unrelated to the plug-in itself.

Google Analytics for WordPress by MonsterInsights

This plug-in helps the user view Google Analytics information within your WordPress dashboard, as well as simplifying the connection process between Google Analytics and your WordPress site.

Jetpack by WordPress.com

This plug-in brings functionality that was previously limited to WordPress.com such as deeper analytics as well as various assorted Jetpack based features such as lazy-load and some optimization options, however, I do not use Jetpack for these latter features. *A short note regarding wordpress.org and wordpress.com; wordpress.org is what you will be using when you download WordPress onto your domain, and it is the interface used to build and maintain websites, whereas wordpress.com is the same with the added limitation that wordpress.com is hosting your website, which is easier, however, not recommended because it somewhat severely limits the user’s freedom.

Really Simple SSL

I refer the reader to the above section concerning SSL for information on this plugin.

UpdraftPlus – Backup/Restore

As the name indicates, this plug-in allows for the backup and restore of your website from a previous backup. It is free to use and allows the scheduling of backups as well as manually backup your website to a variety of locations including Dropbox, Google Drive, and Local Disks.

WP-Optimize – Clean, Compress, Cache

This plug-in has a multitude of uses. It offers database cleaning options, image, and file compression, in the form of minifying HTML, CSS, and Javascript files that are GZip compatible, which is the preferred method for file compression in the modern-day and age, as well as offering options to cache web pages. Caching is essentially when the server creates a high-speed storage layer for each web page that enables the server to serve the website faster to the user, eliminating the need for the interface to build the website from all of the various code bases. *A quick note on caching plug-ins; make absolutely sure to never enable two caching plug-ins, or other plug-ins with caching options enabled, simultaneously as this has a high probability of breaking your website, and yes, I am speaking from experience.

Connecting Google Analytics to your Website

The first step in this process is to sign up for a Google Analytics account, either through an existing Google account or through a newly created account. Next, follow the instructions on the screen and create your account, as well as inputting and verifying ownership of the URL (make sure to choose HTTPS:// when given the option to do so, to ensure that you are receiving analytics properly – this is also the reason that we enabled SSL on your website prior to this step, to ensure that you as the owner of the property would not need to change any data elsewhere upon enabling SSL). 

You will subsequently be presented with a page detailing the property you have just created upon creating your account, therein will be an option called Tracking Info > Tracking Code. This code should be in the form UA-XXXXXX-X and signifies a tracking ID. If your tracking ID is not in this form, you have selected the incorrect option in setting up your property and need to therefore review your information. 

After this, use the plug-in that you have previously installed (Google Analytics for WordPress by MonsterInsights) to link your Google Analytics tracking ID to your WordPress website. Upon activating the plug-in, a new button will be added to the left-hand navigation bar in your WordPress labeled Insights. Upon clicking on this, you will be brought to the Google Analytics for WordPress by MonsterInsights setup wizard. Follow the instructions on the screen and be ready to enter the Tracking ID that was provided in the previous steps. Upon completion, your WordPress website will be attached to Google Analytics, however, please note that it can take up to a few days for the two to fully connect, and therefore there is a chance that you will not immediately see information within the MonsterInsights dashboard.

Basic SEO 

SEO stands for Search Engine Optimization and is a set of practices that increase your standing in search results in major search engines, primarily Google. While much of SEO is based on the actual content of your website, there are plug-ins such as AIOSEO, which is my preferred SEO plugin, or Yoast SEO which gives an SEO score to every page of your website and can therefore help to write content that will score higher. 

The set of tips that I would like to share are unrelated to the actual content, and are instead some easy things you can do that will greatly increase your SEO across the board. The first recommendation is to change the permalink structure, which can be found under Settings > Permalinks in the left-hand navigation bar in the wp-admin. Ideally, the permalinks will be in a form that is readable to both humans and search engines, therefore I recommend using the page and post names respectively. 

Just the simple choice of using a mobile-friendly theme, as well as optimizing your site for speed, and using an SEO plug-in to generate XML sitemaps will go a long way towards favorable SEO ratings.

Google PageSpeed Insights and Optimizing Your Website for Speed

Pagespeed. Firstly, I would like to say that the actual number presented on Google Pagespeed Insights is in most regards a vanity metric. However, it does demonstrate a widely used metric in the web development world, as well as an approximate placement of your website within the greater web. Now that we have that out of the way, Google Pagespeed Insights is a website maintained by Google that allows the user to check the mobile and desktop speed of a website by simply entering the URL into the search field on the homepage. High mobile speed scores are harder to achieve than high desktop speeds. 

Another website to check the speed and performance of your website is gtmetrix.com which has several handy features, including the option to display a waterfall graph of the load time to various crucial moments. These include Time to First Byte (TTFB), First Contentful Paint, Largest Contentful Paint, and Time to Interactive which are all key metrics of server performance and website optimization, and can help the user track down whether further optimization is needed or whether the lower than desired speeds are related to the speed of the Web Hosting Provider.

While Pagespeed Insights and gtmetrix alike offer various “opportunities” to speed up your website, many of these can be very technical and hard to achieve for the average user. Therefore, choosing a fast Web Hosting Service along with an optimized theme, caching plug-ins, and optimizing files for code and images is by and large going to make the largest difference for the tech-savvy and non-tech-savvy alike. 

Elementor II – Creating a Linktr.ee 

Now for a little fun after all the technical stuff; for those of you who are familiar with social media, specifically Instagram, you might be familiar with the website Linktr.ee. There the user can create a website (free with limited functionality, or paid with extra capabilities) that displays a profile image, social media icons, and a choice of links to various other projects or web pages that the user would like to link to. These are often used in social media biographies, such as Instagram which only allows the user to add a single link to their bio.

What if I told you that you could create your own, at no cost above and beyond that which you have spent on your domain and hosting provider? Read the steps below.

Steps

  1. To begin, create a new top-level page on your WordPress site, by way of Pages > Add New on the left-hand menu. 
  2. Opt to name your page something along the lines of “Links” to make sure that other people will recognize the purpose of this link in a social media bio. After WordPress creates your new page, click the Edit with Elementor button. After you have done this you may notice that this page still has your top-level menu and footer, which do not show on a Linktr.ee website. 
  3. This can be remedied by clicking on the gear icon in the bottom left-hand corner of the Elementor editor panel and then choosing Elementor Canvas under Page Type. This will create a page that is made up entirely of Elementor elements with a navbar, menu, or footer. 
  4. Once this is done, create a new section on the main page by clicking on the + button.
  5. Now, within the Style menu element of the editor, select your preferred background color, and then add a new internal section element from inside the editor. 
  6. On the left-hand column place an image of your choice, and to make this circular as profile images appear on Linktree, select border-radius, and set this to 999. 
  7. I have elected to display my name, my social links, and then a vertical row of buttons that link to various pages on my website in the right-hand column of the page. This can be accomplished by first dragging a new title element from the elements tab and writing your name in this box.
  8. Next, find the social icons element and drag this under the title, and choose the appropriate social media, icons, and links.
  9. Choose a divider element in the Elements tab in the Elementor editor, and drag this under the social icons element, and style this to your liking.
  10. Find the button option in the elements tab in the editor, drag this under the divider, and style this to your liking. I elected to set the border-radius to 999 on this also, as well as choosing the alignment to be justified to make sure that it would take up the entire width of the section that it was in. Next, right-click on your newly created button, and click duplicate which will allow you to create as many new identical buttons as you desire. 
  11. Adjust the text and links within your newly created buttons to match your desired locations.
  12. The final step is to switch to mobile view and simply adjust the width of the image and text to make sure that the site is optimized for mobile use, as this will be the primary device that this page is viewed on. 

You have now created your own version of a Linktr.ee hosted side-by-side with your website. Congrats!

Sources:

  1. Domainnamestat.com. 2021. Domain Name Registrars List – Domain Name Stat. [online] Available at: <https://domainnamestat.com/statistics/registrar/others> [Accessed 15 April 2021].
  2. Ch., R., 2021. What Percentage Of Websites Are Using WordPress In 2021?. [online] TechJury. Available at: <https://techjury.net/blog/percentage-of-wordpress-websites/#:~:text=According%20to%20the%20WordCamp%20site,million%20sites%20that%20use%20WordPress.> [Accessed 15 April 2021].
  3. Clement, J., 2020. Mobile percentage of website traffic 2020 | Statista. [online] Statista. Available at: <https://www.statista.com/statistics/277125/share-of-website-traffic-coming-from-mobile-devices/#:~:text=Mobile%20accounts%20for%20approximately%20half,since%20the%20beginning%20of%202017.> [Accessed 15 April 2021].
  4. Elementor. 2021. Elementor: #1 Free WordPress Website Builder | Elementor.com. [online] Available at: <https://elementor.com/> [Accessed 15 April 2021].