Ever thought of designing your own website with wordpress?
Of course, there’s no doubt that hiring a professional to design your small business website has a lot of advantages. For one, technical stuff like website design can be extremely time consuming and involves a massive learning curve.
However, considering the importance of a website to your online business simply leaving it in someone else control is definitely counterproductive.
Just think about it, what would it be like if you have to constantly email someone else to make updates, changes, additions, etc to your business website?
This will not only bring delays and sometimes, limit your ability to be creative with whatever new ideas you have it could also get pretty expensive.
And so, learning to design your own website, even if it’s only the basics, is the best decision you could make as a business owner in today’s content driven business environment.
Ok, I can see you are skeptical at the prospect of making your own website, right?
Well, it will interest you to know that I built my first website as far back as 2006. At the time I knew nothing about html or any of those web design languages. But having realized then the importance of a website to an online business, I went online to learn as much as I can.
After a prolonged and painful learning period I was able to setup my first website using the simple html coding skills I have learned and some web design templates which I downloaded free online. Now, that first website was nothing much. Updating it was also a pain in the neck!
However, in 2009 I got to know of wordpress, which is a blogging and web designing software. In all of these my html coding skills were limited; even up till now. However, what has fired up my interest in web design is my discovering of WordPress. And so, since 2012 I have been using WordPress for both my personal and my clients’ websites.
While in the recent past a lot of other web designing tools and software that can help even the technology-challenged person to design a website have flooded the market, wordpress has remained my best choice!
So, in this step by step guide I will show you how to design your own website using WordPress. You don’t have to worry about html or do you need to mess around with codes or CSS.
Ready? Then, let’s get started!
- What is Website Design?
- Types of Websites
- How Do You Make A Website?
- Why Use WordPress For Your Website Design?
- Components of a Website
- How to Set Up Your WordPress Website Step by Step
- Step 1: Get Your Domain Name and Web Hosting
- Step 2: Install WordPress on Your Domain
- Step 3: Customize Your WordPress Site
- How to Customize Your WordPress Theme (Video)
- Step 4: Add Content to Your WordPress Website
- Step 5: Install Plugins to Get More out of Your WordPress Site
What is Website Design?
Now, let’s start from the basics by understanding what a website is and what website design is all about.
Accordingly to Wikipedia.com,
A website is a collection of related webpages filled with data, media content, and often ecommerce options, all found at the same domain name.
The internet is a collection of millions of websites.
Website design on the other hand is a process of conceptualizing, planning, and building a collection of electronic files that determine the layout, colors, text styles, structure, graphics, images and use of interactive features that deliver pages to your site visitors. (Source)
To ensure that your website effectively perform its purpose each of these designing details must be taken into consideration.
Here’s an infographic by WebsiteMagazine.com why you should ensure that your website is carefully planned and built:
Infographic: Why You Should Pay Attention to Design Details
Types of Websites
Though many will want to divide websites into different groups depending on ownership and purpose, basically websites can be divided into two types namely static-content and dynamic-content sites. This is because whether the website is personal, informational, ecommerce, photo sharing, or a blogging site, they usually fall into these two types.
These types of websites are suitable for “Online Brochure” websites, and for organizations that do not plan to change the content on their pages often.
One feature of dynamic websites is that a visitor can input data on their pages, e.g. filling a form on the site, and the information will be stored in a database on the server. This way the visitor can create a user profile and personalize his/her experience on the site.
These are the types of websites that are usually referred to as “Web 2.0” sites. Examples of these types of sites are social media sites and blogs.
How Do You Make A Website?
Basically, if you want a website for your business, the options open to you include hiring someone to design and code it, or you have to do it yourself.
If you take the do-it-yourself route (which is what we want to do here) you can either look for a web designing software to create the web pages, or if you want to be really adventurous, use a plain text editor to create a site from scratch – just as I did when I started in 2006.
But I must say doing that today is like choosing to live in the 1820s!
So, let’s look at these two options:
i. Build it From Scratch
This means hand-coding all the functionality from scratch. But the truth is that website designers who choose this route usually turn to recycling modular code that they’ve created on past projects or utilize someone else’s modular code, which they then adapt to their projects. These are mainly called templates.
The disadvantages of building websites this way is that they are (1) time-consuming, (2) costly, and (3) can be difficult to maintain (since it is custom code that may not have embedded developer notes).
ii. Build it on a Framework
The second option is that instead of wasting time and effort in coding your site from scratch you can utilize proven (tested and debugged) code that serves as the foundation for a dynamic website. You simply leverage the code logic already available through the framework, to create and integrate dynamic functionality into your site.
There are a number of such website building frameworks available online. The most popular among these are Joomla, Magento, and WordPress. All of these are “CMS” websites.
Now, in between CMS platforms and built-from-scratch sites are IDE platforms, such as Ruby-On-Rails, Zend Framework, and cakePHP.
Advantages of using frameworks like these are:
(1) Rapid development of robust features.
(2) Adding new features is easy.
(3) Because the framework code is leveraged in your design it is very affordable.
(4) Your website is easy to maintain since it is built within a system that is widely known, and duplicated.
For simplicity and ease my recommendation is that you use frameworks whether you have coding knowledge or not. And my top recommended framework site is WordPress.
Why Use WordPress For Your Website Design?
By now you should be wondering what this WordPress is and why is it so special?
WordPress is one of the most popular software for building websites right now. Basically, it is a CMS (Content Management System) program that helps you manage your content without needing to do (much) coding.
Though WordPress was initially used for building blogs however, today you can use it either for blogging purposes or for building websites.
Here are 8 reasons why you should use wordpress for building your websites:
1. It is easy to use
Whether it is setting up, managing or updating your website, wordpress is easy to use. You don’t need to be some expert or know HTML coding to use WordPress.
2. It is great for both your blog and your website
Yes, WordPress started out as a blogging platform but that was ages ago. Over the years WordPress has evolved into a full-featured web content management system that can be used to build and run your website.
3. You have thousands of professionally designed themes
WordPress themes allow you to have a professionally designed website without the pain or expense of hiring a professional web designer.
There are over two thousand free themes available in the official WordPress Theme Directory and even more available for a fee at commercial sites like Theme Junkie.
4. Plugin extensions
WordPress plugins add complex business features to your website without having to hire a coder. Whatever additional functionality you want for your website there’s a plugin for it. This could be as little as adding a simple contact form or a full-blown ecommerce system to meet your business needs.
5. WordPress is search engine friendly
As Google Engineer Matt Cutts says, “WordPress automatically solves a ton of SEO issues.” But beyond that, there are hundreds of plugins that can make your site even more search engine friendly!
6. WordPress is ready for the mobile web
If you assume your customers are only visiting your website from a full-sized computer, think again. Mobile website usage has exploded in last few years. If your website doesn’t look great and work well on a smartphone or tablet your customers will skip your site and go somewhere else.
Many WordPress themes are designed to be responsive (aka mobile-friendly), meaning your customers won’t be challenged to use your website on their smartphones. The WordPress dashboard is also designed to work on smartphones as well as full-sized PCs — so you can easily manage your website from anywhere.
7. WordPress is mature
WordPress is over ten years old. During the past decade WordPress has been refined, tested, and enhanced. In the process it has evolved into a world-class web publishing system.
8. WordPress is open source
Unlike other website building tools WordPress is open source and free from commercial restrictions and limitations. That means you can use the software anyway you choose and host your website anywhere you choose. All without fearing that changes in someone else’s business model will have an adverse impact on your most important business assets.
As a business owner, when you choose WordPress you have complete control over your website. Besides, you’d be able to build a professional looking, highly functional business website.
Components of a Website
A website can be divided into different pieces and the process of development into stages. What makes a website work is the interaction between these different components that are separated in space and, possibly, time. Some of the pieces are more theoretical, such as the layout and the navigation structure.
Before we move on to the actual building of your website let’s take a brief look at these different components that hold a website together:
A. Front End Elements
A website may be described as having front end and back end. The front end comprises of what you see while the back end is what you don’t. Good front-end components include the following:
(i) The navigation structure – This is not the same as the sitemap, though that might represent it. The navigation structure is the order of the pages, the collection of what links to what. Usually it is held together by at least one navigation menu.
(ii) The page layout – This is the way things appear on the page. Is the navigation menu on the top or along the side? Are there images above the text area? Tables?
Good layout is as important as any other element of design. Bad layout makes a website look crowded and slapdash. Good layout allows the eye to find what it seeks easily.
(iii) Logo – A good website has a unifying graphic around which it is built. The graphic represents your company, your organization. It often sets up the color scheme and the style elements used throughout. The logo ties the website to everything else your company does, the printed materials, signs, etc.
(iv) Images – Photos, graphics, navigation bars, lines and flourishes, animations can all be placed on a website to bring it to life. Or, in some cases, bury it.
(v) Contents – Few websites exist just to be looked at. The internet began as a method of sharing information. As it evolved into the World Wide Web, it became rich in all kind of media. But it still exists primarily to communicate. Well written internet-ready text is a special kind of text. Usually the information is broken into readable chunks. It is formatted to be easily scanned, and it is often optimized for search engines as well as human eyes.
B. Back End Elements
As we have mentioned earlier, while some websites are entirely static others are dynamic and can be updated on the fly from a simple panel or word-processing program, in response to the specific needs of the user.
The functional elements that allow you to do this are called back-end elements. These include:
(i) Content Management System – This gives you the ability to update your website without any need to directly edit the html. A robust content management system allows for documents to be prepared, edited, approved, and tracked prior to publication. WordPress is one such program.
(ii) E-Commerce – Purchasing items from the internet has become more and more common and the internet allows merchants to reach a world-wide audience. The simple ability to safely process credit-card transactions over the internet is where this process begins.
(iii) Shopping Cart – If you have one or two products for sale on your website, it’s fine if visitors click a couple times, fill out information, and purchase the product. However, if you have a lot of different things for sale, you need a shopping cart. This is just a way for visitors to pick out different items and make a single purchase at the end of the process.
(iv) Contact forms – Most websites need some kind of contact form. Even if you are just giving information away, you still might want people to thank you for it. More likely you want some ongoing relationship to spring from visits to the website. Whether the goal is commerce or political, contact forms are a starting point for interaction.
(v) Newsletter registration – If you have the kind of content that is updated periodically, there are few better ways to build a regular readership than newsletters. Newsletters keep you in front of potential clients, as well as keeping your current clients in the loop about your new products, services, or campaigns.
The fastest way to build a legitimate newsletter mailing list is to allow people to opt in at your website. this can be better managed with an email management system.
C. Other Components
Some of the elements that are essential to a website cannot be properly described as either front-end or back-end components. However, without them a website wouldn’t work. These elements include:
(i) Hosting – A web host is a server where your website files are physically located. It’s from this server that these files are transmitted to user computers when they call your website name.
(ii) Domain Name – This is the address of your website. When someone asks to see your website, they put this address into the internet, and your site is served up to them.
Now, while all of these may appear to be intimidating the good thing is, when you create your website using WordPress they are automatically taken care of.
Alright, let’s get your website set up.
How to Set Up Your WordPress Website Step by Step
Step 1: Get Your Domain Name and Web Hosting
As we have established before now you’ll need three things to set up your wordpress website. These are:
- A domain name
- Web Hosting, and
- The WordPress software
Now while the WordPress software is free, domain name and webhosting comes with a price tag. Once you have purchased your domain name and linked it with your web host, you can easily install the wordpress software in a matter of minutes.
When choosing a domain name you may use your business name e.g. www.YourCompanyName.com or your personal name e.g. www.YourName.com depending on the type of your business.
Please note that while you can use a domain name of any extension, for example .com, .org, .net, .biz, .agency, etc. it is advisable to avoid the weird extensions and simply stay with the popular ones like .com, .net or .org. this is because while .com, .org and .net are commonly used and easily remembered, many of the other domain extensions aren’t mainstream and people might just find it difficult to find you if they can remember your domain extension.
Considerations for Choosing a Domain Name
In choosing your website domain name you should ask yourself these questions:
- Is it brandable?
For example, if you make a site about poetry then best-poetry-website.net is not a good choice: poetryacademy.com or poetryfall.com is much better.
- Is it memorable?
Short, punchy and clear domain names are much easier to remember. If your domain name is too fuzzy, too long or spelled in a strange way, visitors might forget it.
- Is it catchy?
You want a name that rolls off the tongue, describes what you do and turns head. Coming up with a cool name can be a bit tough since there are over 330 million active domain names in the world right now.
One of the great places where you can get your domain name is NameCheap.com. They are one of the industry leaders as far as domain name registration is concerned.
And for the web hosting, I must say that though many hosting companies will want to entice you with offers like “special wordpress hosting” packages, any shared hosting plan that supports Linux and boasts of a cPanel is good enough to host your website.
My top recommendation is Hostgator.com.
Step 2: Install WordPress on Your Domain
Once your domain name and web hosting account are ready your next step is to install the WordPress software on your domain.
There are two possible ways to do this:
- Manual installation
Now, the manual installation demands a little bit of technical knowledge and so, I’ll advice that you stick to the 1-click automatic installation.
Almost every reliable and well-established hosting company has the 1-click automatic installation as part of their hosting packages. For example if you sign up with Hostgator or any other similar hosting company, you should find your “1-click-installation” in your account control panel.
The simple steps (which are similar to all of them) are:
1. Log in to your hosting account.
2. Go to your control panel.
3. Look for the “WordPress” icon.
4. Choose the domain where you want to install your website.
5. Click the “Install Now” button and you should get access to your NEW WordPress website.
Here’s a video walk through:
How to Install WordPress Using Cpanel (Video)
Step 3: Customize Your WordPress Site
Once you have successfully installed WordPress to your domain, you’ll see a very basic yet clean site:
But you don’t want to look like everyone else, do you? That’s why you need a theme – a design template that tells WordPress how your website should look.
There are thousands of awesome, professionally designed themes you can choose from. With these themes you’ll be able to customize your site for it to have a feel that’s your own.
However, because these themes are designed by different people they are all different. But there are some very important features you should look out for when choosing one for your website.
Choosing a Theme for Your Site
Here are the features you should consider before you decide on a theme for your website:
(a) Load time – If your theme is clumsily designed and has no fast loading times it could affect the effectiveness of your website.
(b) Quick and easy setup – The theme should be easy to setup.
(c) SEO Optimized – SEO is a very important element in the success of your website. It’s important therefore that the theme you choose is optimized for the search engines.
(d) Minimalistic design – As noted above the theme should not be clumsy. The coding should be simple and light.
(e) Focus on your content – The design should be such that your web content is given greater prominence.
(f) One click demo import – This ties in with “b” above. With a one click demo import you’ll be able to save time and effort by installing the demo content and styles which you can easily update with your own content.
(g) Simple customization options – Choose a theme that has a panel and gives you the options to customize the theme without any trouble.
My top recommended resource for premium themes that meet these specifications is ThemeForest.com. They have thousands of themes for building any type of business website.
One of the top selling themes of all time on the site is the Avada WordPress Theme.
How to Customize Your WordPress Theme (Video)
How to Login to Your Website Dashboard
To work with your chosen theme you will need to log into your website’s dashboard (Admin Area). This is where all your customization work will be done.
To log into the dashboard, visit www.example.com/wp-admin where example.com is your site installation url and enter your password and username.
Please note that your dashboard login username and password are not the same as your cPanel’s. These are the details which you set up when installing your wordpress site.
After you have successfully login to the dashboard you can then proceed with installing the theme and the customization of your site.
Please watch this video on how to customize the Avada theme:
Step 4: Add Content to Your WordPress Website
1. How to Add Pages and Posts to Your Site
Remember I recommended that you get a theme that has 1-click demo import? And, did you see how that makes it REALLY easy in customizing your website in the video above?
Now, if you purchase the Avada theme you wouldn’t need to add your site pages and content from scratch. You’d simply need to edit the demo content and in a matter of minutes your site would be up and running.
However, I’m adding this section to show you briefly how to add content to your site since you’ll need to do this from time to time.
Your website content come in 3 basic forms, pages, blog posts and media – videos, images and audio files. Basically, pages form the static text content of your site.
A static page is a page on your website that doesn’t change every time someone comes to the site. For example your “About Us” page, “Contact Us” page, and “Services” page.
Blog posts on the other hand, are arranged chronologically on your blog (if you add one to your site) with the newest article showing up at the top every time.
To add a page to your site simply log into your site’s dashboard and look for “Pages”. Click on “Add New” and it will open up the content editor which looks a lot like your Microsoft Word editing screen. Add text, images and more to build the page you want, then save it when you’re done.
To add a blog post you follow the same process however this time you will need to look for the Dashboard menu labelled “Posts.” Click on it to add a new post and a similar text editor will open where you can enter your blog post content.
One other thing about blog posts is that you can group similar posts by adding them to categories. For example if you’re selling children wears on your website and you have a blog on the site, you may decide to write blog articles that are grouped into categories like “Children Nighties,” “Back to School,” etc.
To add your post to a category, go to “Posts” > “Add New” but before publishing your post simply choose the category you want to add it and then publish.
2. Adding Pages to Your Site Menu
One important element of a functional website is the menu. To add any of the pages you have created to the menu click “Appearance” and then “Menus” in your Dashboard. Locate the page you created and add it to the list by clicking the checkbox next to it and then “Add to Menu”.
When the page has been added click “Save.”
Step 5: Install Plugins to Get More out of Your WordPress Site
One great feature of the WordPress software is that there are hundreds or thousands of plugins that help you in expanding the capabilities of you site. You can use these extensions add features and functions to your site that are not built-in by default.
You can use plugins to do everything from adding photo galleries and submission forms to optimizing your website for the search engines and creating an online store.
To install a plugin, go to the “Plugins” section in your Dashboard and then click on “Add New” and then search for the one you desire to add. There are over 25,000 different FREE plugins however be careful that you don’t add too many as this could slow you’re your site, which is not good for your business.
Once you find a plugin you like, simply click “Install” and then “Activate”.
Again with the Avada theme and most of the themes you find on the ThemeForest site, the most essential functionalities that you will need to add using plugins have been built in. this means your site will be ‘light’ making it load faster. A good thing indeed for your business.
In this comprehensive guide on designing a WordPress website, I have given you everything you need to setup your own small business website. While this may look intimidating at first, I do believe you can do it!
It wasn’t easy for me when I got started, but today doing this is simply fun. I encourage you therefore to take it up. However, if you would rather want someone to do this for you, feel free to contact me and I’ll gladly help you out!
Btw, if you have any further questions simply post it in your comments below.