Build A Wordpress Site From Scratch

Back in 2017, there was an opportunity at the company I was working in to learn web design.

I began learning HTML, CSS, and Javascript. I pretty much enjoyed it. Until I ran into my first bugs. Later on, I was assigned a side project: an actual website. I was thrilled, my colleagues were there for me when I asked for help.

A few months later I was working on a pro-bono WordPress assignment for an NGO.

Let me state that we were in the travel market and I was doing marketing. But there was this culture of empowering people in learning new skills.

I am the DIY type and realized that the learning curve for learning code is far longer than expected. With WordPress, things worked differently.

Fast forward, in 2020, I ended up working for the Colibri makers, Colibri being a popular WordPress drag and drop page builder.

Things are so easy today with such tools. WordPress can really empower people to build a website from scratch in no time. And inspiration for websites is just…all over the internet.

Now, here are steps:

1. Choose your domain name
2. Acquire website hosting
3. Get familiar with the WordPress interface
4. Install a WordPress theme
5. Build your WordPress website
6. Install vital WordPress plugins

Because having some steps ain't enough for having a supercalifragilisticexpialidocious website, I have one bonus for you at the end of the guide: UX design tips and tricks.

But before jumping into the topic, I want to shine a light on another subject. Won't take long, I promise.

How much does a WordPress website cost?

If we are to make a cost breakdown for a WordPress website, here's what we should include:

• Buying a domain: prices can begin at $15/year
• Hosting acquisition: prices start as low as $8/year
• WordPress theme. Now, depending on the levels of customization and how many features you want to include, you can start with $0. If you don't want to settle with a basic website, yearly WordPress theme plans revolve around $70.
• WordPress plugins. Many of them are free of charge, but if you want advanced options, you'll need to upgrade to a paying plan.

This means that the most basic website will start from $23/year. The moment you want advanced theme features, the cost will rise to about $100/year.

When you upgrade plugins, you might end up paying around $200-500 a year.

If you want something custom made, and you need to call in a WordPress developer, the costs can go over $1000 in the first year.

For online stores, the costs can increase significantly, because you need lots of functionalities, and performance and security are top of mind.

Now that we clear this out, it's time to get to the bottom of our topic today: how to create a WordPress website in 2021.

1. Choose your domain name

Source: https://unsplash.com/photos/N1XUwR8iOf0

If you didn't know this yet, the domain name is your business name or product name. Names can be really powerful, so don't be hasty when choosing your domain name. If you feel you're getting cold feet, don't worry, there are tools out there that can help you out.

Tips and tricks for website domain name choosing

I was doing some brainstorming for a website domain for a business a while ago and realized that "Wazz" sounded quite interesting. It's short, easy to remember. But the moment I googled it, well….let me say, I burst into laughter. In British slang, it meant "urination". Really folks, do your research.

Later on, I wanted to name my photography website. I was analyzing "moonshine". It felt so nice, romantic, fairytale-ish…except it wasn't. It seems that it meant " illicitly distilled or smuggled alcohol".

So, make sure your naming is unique, memorable, and doesn't have any weird meaning in English or another popular language (eg: Spanish) if you want to go international. If you're a local business, you might skip this.

Now, let's look a bit at a tiny checklist for choosing a domain name for your WordPress website:

• Make a list of relevant keywords for your business/product. Think of how the users should feel after using the product. Let's say you have a skin product line based on natural ingredients. Your list might contain words such as "skin", "care", "safe", "natural", "beautiful", "fresh" etc. Use a tool such as Namelix or Novanym to generate domain name ideas.
• Check the meaning of your newly found domain name. I always google it like this "{insert name here} meaning". I will end up with dictionary explanations. Next, I go to Google images and see how it gets matched. Maybe there's a singer with that name, a manga cartoon name, etc. If so, you'll need to redo the process.
• Look for the domain name on Facebook or LinkedIn to see if there is a business page with that name.
• Check if there's a website domain available for sale. For many sites, ".com" is the best top-level domain (TLD), followed by ".org", ".net" or ".io".
• Buy your domain name. You can do so via a domain registrar such as GoDaddy or via your hosting provider.

And this leads us to our next chapter.

2. Acquire website hosting

Every website you've ever visited is hosted on a server. This means you'll need to acquire web hosting from a hosting provider.

Considering we're building a WordPress website you can choose a hosting plan from WordPress.com or some other third-party hosting provider.

Let me clear something out before we proceed. There are wordpress.com and wordpress.org. The difference is that on WordPress.com you can host and build a website. From WordPress.org you usually acquire themes and plugins for your website, which is hosted elsewhere. You can compare the WordPres.com plans here.

This guide's hypothesis is that you really want to build a brand and have full control over your website. This means you'll go to a third-party hosting provider.

There are three main hosting services: shared hosting, VPS, and managed hosting. In the first situation server resources are split among more sites. In the long run, if these sites grow, and yours as well, you might encounter performance issues. You might realize that you need a VPS service or a managed hosting plan.

So, you need to have this in mind when choosing a hosting provider: which are your business goals?

If you go with VPS hosting, resources will still be shared, but you'll gain some control over them. You'll see improvements in terms of security and performance as well.

Managed hosting is kinda an "à la carte" service. You'll get your own physical server all to yourself, and you'll see a boost in performance and security.

Definitely, things can get more complicated than this, but I just wanted to paint the big picture of hosting.

Next, when you analyze the plans, take a closer look at:

• Pricing
• Storage
• Support
• Performance

Some hosting providers have some extra features packed such as domain offering (eg: Namecheap), website builder (eg: GoDaddy), e-commerce options, etc.

Now, you've probably noticed by now some websites using "HTTP" or "HTTPS". What's up with those?

HTTP is the basis of the modern web. It connects the browsers and servers, and functions on a request-response basis. Now, the extra "s" means the connection to the website is encrypted and the data shared with the website is secure.

Let's say a user makes a payment on your website or logs into an account. The info the user will type in will be private. Safe from hacking. This is happening through the SSL technology, which stands for "Secure Sockets Layer." For consumers, seeing "HTTPS" signals trust, because you can protect their data and privacy. This means that you'll need to acquire an SSL certificate.

Make sure your chosen plan includes this as well.

The moment you acquire your hosting plan, and you've set up your login details, the only missing piece is going to be WordPress itself. Most of the hosting providers out there allow you to install WordPress from their dashboard/wizard. It's all pretty intuitive.

How will you log in to your site? Easy peasy. Just type in the browser your website address and add to it "/wp-admin", as seen below.

3. Get familiar with the WordPress interface

The WordPress dashboard has 9 sections. Let's take a look at them.

WordPress settings

Inside this section, there are 7 more menu items. I'll describe briefly the most important things that need to be done here.

• Under "General" you can set up the site title, tagline, URL, time zone, time & date format, and language.
• Under "Reading" you'll "tell" WordPress which page serves as the homepage, and which one is your "blog". This is an important step. You'll also choose how many blog posts can show up on a page or if you want your website indexed by Google.
• Under "Discussion" you're going to do the blog comments setup.
• Inside "Media" you can establish the maximum dimensions in pixels to use when adding an image to the Media Library.
• Inside 'Permalinks" you'll set up the format of your URLs.
• You can define your privacy policy pages inside "Privacy".

The best way to approach the "Settings" panel is to enter all these items and fill in the missing info, just to make sure you don't skip anything important. Things are pretty straightforward, so don't get cold feet. All the setup can be done in less than 30 minutes.

WordPress pages and posts

What you need to know is that your content will go inside "pages" or "posts". Here you'll spend 95% of your time.

The "pages" are static. You can have a "homepage", "services" page, "contact us" page, you get the point. Under posts you can have your latest blog articles, maybe your portfolio. These are dynamic pages because they automatically place your newest website content at the top.

When you select "Posts" from the dashboard, you will be able to create a post, visualize all posts, and manage tags and categories.

You can create a new post if you select "Add New" as seen above, or go to "All Posts" and then select "Add New".

The same works for pages.
What you'll see in your "All Pages" or "All Posts" are some default pages and posts deployed by your theme.

Now, how can you edit a post or a page?

When you hover over your default pages and posts you will see some options: edit, quick edit, trash, view. In the screenshot above there's also "Edit in Colibri". This is because we installed a plugin that allows you to customize pages using the Colibri WordPress builder (but we'll talk a bit later about this).

WordPress media

All your media goes in here: images and videos. You can drag and drop them or upload them.

You can also add media from your post/page level. I'll show you more on the topic later.

WordPress comments

The 4th dashboard section is called "Comments". Here you can manage your posts' comments. You'll receive tons of spam comments that can be moved to spam or trash. You can approve the relevant ones.

The "Appearance" menu

At this level you can:

• Search for, install, and activate a theme (more details in the following chapter).
• Customize widgets to add blocks of content to your site's sidebars, footers, and other areas.
• Define your WordPress website's menus.
• Add a background image to your site.
• Edit the code of your theme inside "Theme Editor" (recommended only if you are a developer).

Now, the moment you activate certain plugins, you might see a few new menu items underneath "Appearance". In this case, because we've activated the Skyline theme, we see an option to set it up under "SkylineWP Settings". Each theme can come with its own setup.

"Install Plugins" is the other extra menu item added by the Skyline theme. In here you'll see some plugin recommendations that work well with Skyline.

This leads us to our next menu item.

Plugins

There are lots of features that can't be managed by theme only, such as SEO optimization, SEO audit, website security and back-up, tables, forms, e-commerce features, and more. Plugins are here to compensate for the lack of such options.

Here's a tiny tutorial on how to install, activate, and deactivate plugins. It's all intuitive and user-friendly.

Users

At this level, you will decide who has access to your website. You can give access to contributors, guest authors, editors and more, depending on your needs.

Tools

Under "Tools" you'll have the option to import and export tools data to and from other content management systems (eg. Blogger).

There's also a "Site health" section, which shows you critical information about your WordPress configuration and items that require your attention, with some advice.

Because we need to respect privacy policies, here you can export or erase personal data for your users.

And, with this, we've wrapped the WordPress dashboard chapter.

Let's get to more interesting business.

4. How to install a WordPress theme

For this, you need to go to your WordPress admin dashboard, click "Appearance" from the left menu, then "Themes".

Next, click on the "Add new" button.
You'll see a bunch of templates showing up, and you can filter them by latest, featured, popularity…or by features.

We're proud to say that our very own Mesmerize and Colibri themes are listed in the top 20 most popular WordPress themes.

The moment you choose a theme, click "Install", then "Activate".

You can also activate your WordPress theme if you head over back to Appearance->Themes.

The whole installation process is explained in our tutorial as well.

Now you're ready to rock and roll!

via GIPHY

5. Build your WordPress website

In WordPress, your website design depends on your chosen theme. If you need something extra, well…you might need to find something to fill in the missing features.

Usually, every WordPress theme has 2 designs: one for the blog and one for the pages. Colors are limited, there are no special customizations. This means that at a certain time, plugins will come in handy.

Now, WordPress themes have a theme customizer with basic functionality. They are a good fit for those that don't need any custom features and want to build their site really quickly. When in need, you can add your own CSS styles. Just make sure to pick a theme that has a layout that matches your own vision.

How can you customize a theme? Just head over to Appearance-> Customize.

From the left-hand side, you can choose what to modify: content, menu, and more. On the right-hand side, there's your website preview. You can change the text in real-time, by clicking on the pencil icon.

On the other side of the story, we've got WordPress builders. They are plugins that help you build truly unique websites. You can alter your theme's layout completely.

In our case, Skyline pre-installs such a builder called Colibri, we're going to use it as an example.

Depending on the version of the theme, the free or paid one, you've got various elements to play with: from headers, specific page sections, to tinier components such as calls to action, tabs, counters, accordions, and more.

You can edit your theme as before, from Appearance-> Customize, or take the shortcut, as shown below.

What changes? You'll get access to more features inside the Customizer.

Besides using the customizer, there's another option for website customization in WordPress – the default editor. You can access it from the "Edit" option below every post and page. Also, the moment you add a new post or page, you'll get straight inside the default editor (unless you have a builder activated).

So, in our next chapter we'll go in-depth with how to:

1. Create a WordPress website using a WordPress page builder
2. Create a WordPress site using the default WordPress editor

A. How to build a WordPress website using free website builders

WordPress website builders help you take the WordPress Customizer to a whole new level. You will be able to customize everything: headers, page content, footers, navigation menus, global, individual styling, you name it! No design or coding skills needed!

It's usually a drag and drop process. And you do not need to worry about the mobile design, the builders have the responsiveness aspect covered.

How to adjust website settings in the Customizer

Look at your left-hand side panel. Now scroll down to "General settings".

Here's where you can set up:

• Your website's name.
• The overall color scheme and typography of your website.
• Templates for blog, header, and footer: what backgrounds to use, spacings, borders, shadows, etc.
• Spacing: inside buttons, columns, etc.
• Custom CSS Styling

How to create content in WordPress using builders

As mentioned before, if you want to create a new website page, head over to "Pages" and select "Add New". You'll be directed to the default WordPress editor where you'll name your page. Next, select "Edit with Colibri".

When you want to edit an existing WordPress page, just click "Edit in Colibri".

How to add sections to your WordPress pages

Every "+" sign in the left-hand side panel opens up a window with blocks and components. You can scroll down until you find a design you fancy, or just type in a category. Here are the categories available in the Colibri builder: Hero Accent, About, Features, Content, Call To Action, Blog, Counters, Portfolio, Photo Gallery, Testimonials, Clients, Team, Contact, F.A.Q., and Pricing.

These are pre-defined templates, that will match the color scheme of your choice.
By selecting one of the blocks, by clicking on the "+" sign showing up on the block, the block will be positioned at the bottom of the page.

You can move them wherever you want, by dragging and dropping the section from the left-hand side panel.

There is also an option for "blank" blocks.

This means you can customize them however you see fit. In the end, you can even save your design for later use.

From the setting icon in the top right corner of every section you can adjust the number of items per row, you can reorder items, add new blocks, and even delete the whole section.

How to customize sections of your WordPress page

If you want to change the text in your sections, you can do it in-line, meaning inside the section itself, live.

In-line editing is not available for texts on buttons. They will be managed in the panel on the left.

If you want to change an image from your site, it's all intuitive. Start by selecting your image.

You'll be able to see it inside the panel on the left as well. Click on the image. You'll see a new window popping up asking you to upload an image or select one from the library. If you choose to upload, you can do so by drag and drop.

Now, going back to the panel I've just mentioned, it has 3 main options: Layout, Style, and Advanced. Whenever you select a section from the website preview on the right, you'll see the corresponding panel of the section.

Let's take them one by one:

• Layout

Here you can adjust the width and height of the container, at the structure level. . Simply put, the container is the actual space a block occupies. Inside the container, you place the content (text, images).

You can also adjust the spacing of your content, and how close to the top or bottom it gets placed.

You can also add new rows inside your block.

• Style

At this level, you can customize the background of your block or add dividers. Dividers are visual cues that signalize when a website section ends or begins.

• Advanced

Here comes the fun, folks!

From typography and spacing to responsiveness, this is where you can get into the smallest website details.

You can create variations depending on the state of the element: normal or hover.

If you select a certain element inside a blog, let's say a heading, the same panel will show up on the left.

This means you can go more granular with your editing.

Speaking of headings and more granular elements, these are named "components". Let's see how you can play with them.

How to use components in your WordPress site

The components refer to headings, sliders, dividers, buttons, carousels, pricing, and more. They can be accessed in the same way as blocks. They sit side by side and they have drag and drop functionality. Colibri offers 40 components.

As mentioned earlier, you can adjust them from the panel on the left, if you go to "layout", "style", or "advanced".

Mobile responsiveness

In a multi-device world, it's vital to have a fully responsive website. By default, Skyline is a mobile responsive theme. This means that its sections will adjust according to various devices. If you want to preview how your WordPress site looks like on tablets or mobile, you can do so, when playing with the controls in the bottom left.

You can also select to hide certain features on mobile, for example, inside the "advanced" options.

How to build a menu in the WordPress Customizer

Now, let's say that you've designed your pages and you need to add them to a menu. In the panel on the right, you have all your sections, ordered from top to bottom, like on your site. The Footer is your last section. Below it, you'll see some extra features.

Here you can create your menu.

After selecting "Create New Menu" you'll get to name your menu and choose a placement for it (header, footer, pages, etc.).

When selecting "Next" you'll be able to add your pages to the menu, from the "Add items" option. It can't get easier than this.

How to work with WordPress widgets

I've already mentioned that widgets are blocks of content that you can add to your site's sidebars, footers, and other areas.

When using a WordPress builder plugin, you'll be using widgets only for your WordPress sidebars, because you have predesigned footer layouts.

Usually, sidebars are used by blog pages. Each theme has different widgets options, from search bars, recent posts, and comments, social widgets, to images and videos. Let's say you want to show your Instagram profile in a sidebar, there's an Instagram WordPress widget for that.

One of my favorite widgets is the one that allows for custom HTML editing. I find it really powerful.

This being said, you're kinda done. Congrats, your WordPress site is up and running!

Now, let's check the other method for building sites in WordPress.

B. How to build a WordPress website using the default WordPress editor (Gutenberg)

I'm going to make this really quick. This editor is still new in WordPress (it's the default WordPress editor since December 2018), but it's evolving continuously thanks to community contribution.

The classic WordPress editor looked like this:

Now we have:

Now, what you need to know is that not every theme is compatible with this new editor. You'll have to find one Gutenberg-ready.

Layout design with the default WordPress editor is limited. It's also based on blocks. Now, as you've probably found out in the previous chapter, blocks can be pretty much everything: headings, images, buttons, videos, etc.

Now, why I'm not insisting on the topic: if you check for Gutenberg reviews, the most recent are 1-star reviews. It's not a good experience. Even if it's already been 2 years from the launch, and many updates in the middle, this is still in its infancy. WordPress relies now on the community to create new blocks so that the editing experience can evolve.

Right now the tool behaves like a text editor, with low power on the styling side.

There are tools out there such as Kadence, that can help you out, but we're not there yet.

6. Install vital WordPress plugins

The WordPress ecosystem is made of themes and plugins

There are thousands of WordPress plugins available out there that can extend the functionality or add new features to your website.

This is a very short tutorial on how to install a plugin.

Our plugin recommendations

Plugin type	What it does	Recommendation
WordPress builder	Gives your theme drag and drop functionalities	Colibri
SEO WordPress plugins	Minimal website changes that can help it rank organically	Yoast SEO
Forms WordPress plugins	Use forms to capture valuable user data (with their consent, of course).	Forminator
Email marketing	Develop marketing campaigns to stay in touch with your subscribers and clients.	Mailchimp for WordPress
Security plugins	Cleanup malware and protection from unauthorized logins.	Jetpack
E-commerce WordPress plugins	To help you set up an online store.	WooCommerce
Media Library manager	To help you organize your media.	FileBird
Anti-spam	Prevent your site from publishing malicious content.	https://akismet.com/
Analytics	Helps you understand your traffic and user behavior.	Google Analytics

Now, let's get a bit into another topic: page speed.

Both your visitors and Google care a lot about your site speed.

Why Google?

Speed is an important factor that's taking into consideration when ranking organically, meaning here:

Why is site speed bad for the users, and ultimately you?
Well, if you offer them a bad experience, they might not engage with your offer, or might not even come back anytime soon.

According to 2018 research by Google, 53% of mobile users leave a site that takes longer than 3 seconds to load (Holy Moly!).

And take a look at that!

How does page load influence mobile visitors (note: bounce meaning leaving the site)?
.
So, how can you fix this, and also improve your overall website performance so that you won't receive a thumbs down from both your users and Google?

I've picked 2 laid back solutions (there are many more out there, but pretty technical).

● Optimize images
Your website images shouldn't be uploaded in their original size. Also, try going with PNGs instead of JPEGs (they have fewer colors).
Smush is our preferred WordPress plugin for image compression. You won't be seeing any visible drop in quality and your page speed will be optimized.

● Caching
Simply put, cache is providing temporary storage for content to be accessed later. Your website loads differently if accessed for the first time or the 5th time by the same visitor.

Why is that?
When you're dealing with browser caching, your browser saves a copy of files from a website on the user's device
(hard-drive, mobile phone). When a website is cached, the browser only needs to load new or updated pieces of a page, and won't need to initiate a new server request. The same thing happens if you click the "back" button, your browser will display the page from cache. This is
also super helpful when dealing with a slow Internet connection, the pages will load quickly.

Wanna understand more about how caching works? Read on here.

The tools we recommend here are:
➔ W3 Total Cache (W3TC) improves the SEO and user experience of your site by increasing website performance and reducing load times.
➔ Hummingbird. This has some extra features as well that we love, like the compression of Javascript, HTML & CSS files.

Now, how can you check how fast your website is loading?
Google has just the tool to help you with that, and also provides some fixing ideas.

Bonus: UX design tips and tricks

Remember me saying the "sky's the limit" with the WordPress page builders?

Well…there's always a "but". When you design a website you should always have in mind your
audience, or the buyer personas (as the marketers like to say). You need to provide them a great experience on your website, that's what UX stands for (user-experience).

Now, for that, there are certain rules you should follow in order to provide a frictionless user experience.

Meet the users' needs
Users on a website don't want to think too much. They need useful information that can be skimmed and understood with ease. They don't need an experience consisting of many clicks or much back and forth.

People look for instant gratification: finding what they need fast and with ease. If this is not happening on your website, they'll look for another one.

Visual hierarchy

Not all website parts are treated equally, some are more important than others (forms, buttons, headline, value proposition, etc.).

Where would you like your user to land on? Where do you want him to click?

Make use of visual cues to help him achieve what you want. All the elements on the pages should behave as a tour guide.

Researchers have found out that users that read from left to right scan websites in a Z-shaped pattern.

This means that's where you should direct your most important information.

Easy navigation

You should keep the navigation bar simple, don't go into too many options. You might end up with a paradox choice situation when users get overwhelmed with the possibilities.

Pages should be internally linked to other relevant pages so that the navigation is smooth, and the user shouldn't click "back" many times to get to previous pages.

Make use of white space. White space allows information to be organized in digestible content areas. This will make users feel more comfortable and not overwhelmed by loads of data.

Same color scheme (consistency)

Avoid super dark or super intense colors on your website. They might send users away. You can use stronger colors to highlight important aspects of your website.

Use colors that are equally balanced. Here's some inspiration.

And one more thing before moving on to the next UX design principle. Colors have meanings around the world, they are connected to various emotions. This infographic will shine a light on the topic.

Use effective writing

Don't use exaggerated and clickbait copy. Write with common sense, in a natural language, don't use jargon (not everyone is familiar with certain technical words).

Use max. 3 typefaces in a maximum of 3 point sizes — a maximum of 18 words or 50-80 characters per line of text as Smashing Magazine recommends.

Use social proof

Why should I trust you, your business, or your products?
We, humans, are social creatures. We live in communities, we have friends and family. They can be our influencers. We care a lot about their opinion.
.
Let me list out some examples for you:
● Ratings and reviews

● Testimonials

● No. of clients ("you're in good company").

● Clients' logos

● Case studies backed up by results

● Press featuring and awards

Also, if you want to find out about the latest design trends, the Coastal Creative folks did a marvelous infographic on the topic.

Conclusions

We can call it a wrap don't you think?

We wanted to go the short way, not to overwhelm you with information. But, in the end, the devil's in the details. We just gave you the helicopter view.

The thing is that you can have your website up and running in less than 2 hours. But, the more features, pages, content you want to add, the longer it will take. And don't you ever neglect the latest web design trends.

One last thing though, if you are the DIY type, you definitely need to take our Colibri builder for a spin!

Here's a video on how to build a WordPress website page using tons of features.

Now, if you liked this article, and you want to learn more about how to design a WordPress website, make sure to subscribe to our Youtube channel and follow us on Twitter and Facebook!

Alina Belascu

Alina is a digital marketer with a passion for web design. When she's not strategizing she's doing photography, listening to podcasts on history and psychology, and playing with her 2 dogs and cat.

Build A Wordpress Site From Scratch

Source: https://colibriwp.com/blog/how-to-build-a-wordpress-website-in-2021/

Posted by: acevedoantence36.blogspot.com

Share this post