WordPress 101: The Ultimate Guide to make a Website on WordPress A Complete Beginners Guide That Requires No Coding, No Hosting, No Domain Fahad A. Cheema fahadacheema.com Page 1 Who Am I? I’m a Personal Growth Writer and a UI/UX Consultant currently residing in Bremen, Germany. I have been designing and developing websites for 3 years, starting from small projects to working with big organizations like M itsubishi and the National Center for Big Data and Cloud Computing (NCBC) Pakistan. If you want to send me a message you can email me at hello@fahadacheema.com or DM me on I nstagram Table of Contents ● Introduction ● Section 1: Local Environment Setup ○ Install WampServer (Windows Users) ○ Install XAMPP (Mac Users) ○ Installing WordPress ● Section 2 – Inside WordPress ○ Install Themes ○ Add Website Content (Posts, Pages, Menus/Navigation) ○ Install Plugins ● Section 3 – Deployment ○ Configuration ○ Transfer Website ● Conclusion ● Full Video Course Page 2 Introduction So you come up with an idea to start your own online business, start a blog, have your online brand, or simply create a portfolio for your next job application but if you’ve never built a website before, you’re probably feeling a little overwhelmed. You’ll think of hiring a professional developer and they’ll quote you such premium prices that will probably make you drop your entire idea (I have been on both sides of the picture). Well, I have good news for you — this comprehensive guide will walk you through everything you need to know in order to set up your first WordPress site. And you know what? Even if you don’t have a geeky bone in your body, by the time you finish completing all the steps in this guide, you’ll have your very own website up and running. Now I know there are tons of guides and courses out there that offer similar information but here’s why this is different and why you should take this: ● Unlike most guides out there, y ou don’t need to invest in any hosting or domain to get started on creating your first website. That will be the very last step when your website is complete and ready to go live. Before that, a computer with an internet connection is enough for you to follow this guide and if you’re reading this, then obviously that’s covered. ● I value your time and that is why I won’t be wasting it by telling you what WordPress is and why you should use it for your website but let’s just say that out of hundreds of frameworks out there to create a website, chances are you might have only heard of WordPress because it’s that popular. WordPress runs 36% of all websites. Yes, you’re reading this right, that’s all websites and that’s all you need to know. ● You don’t want to consume 8 hours of content just to make a very simple website that requires maybe only 10% of that content. In this guide, I’m not going to be teaching you WordPress but rather the skill of making a website on WordPress by only focusing on the critical elements. Let’s get started Section 1 - Local Environment Setup Remember when I said earlier that you don’t need to invest in any hosting or domain to start creating your website? Well, I wasn’t kidding and this is the part where you’ll understand why. Page 3 The hosting you buy online is a server that hosts your website files and since that server is going to be connected to your domain e.g w ww.example.com, whenever someone enters the URL www.example.com, the browser starts displaying the files that are hosted on that server. In this section, I’ll tell you how you can set up the same server on your local machine that will allow you to create not just one but as many WordPress websites as you want. The only difference is that this server is not going to be connected to any domain and is only going to be accessible on your computer. You see, it’s always a good practice to first create your website on your local machine and once everything is finished, you can upload it to your hosting so that it’s accessible for everyone else to see. To achieve all of this, you have to install WampServer if you’re a Windows user or XAMPP if you’re a Mac user. Install WampServer (Windows Users) 1. Download and install Visual C++ Redistributable for Visual Studio 2012 Update 4 (Choose 64-bit or 32-bit based on your operating system) Note: When installing if it shows three options of repair, uninstall and close instead of install, that means it’s already installed on your system and you can skip it. 2. Download and Install WampServer (32-bit and 64-bit) Remember a couple of things during installation. Don’t change the destination folder of the installation because everything else I tell going forward will rely on that. During the ‘ Select Components’ part of the installation, check all the unchecked boxes. At the end of the installation, two popups will show up asking to change your default browser and text editor. Don’t change them and click on ‘ No’ for both the popups. 3. Once the installation has finished, you will see the WampServer icon on your desktop. To start the WampServer, click on that icon and you’ll see a small red icon show up in the minimize tray at the bottom right of the screen. Wait for that icon to turn green and if it does, that means everything is working perfectly and you’re good to go! Page 4 Another way to test if it’s working is to open your browser and type ‘ localhost’ in the address bar. If a page like this shows up then you’re on the right track. Install XAMPP (Mac Users) 1. Download and Install XAMPP 2. Once the installation has finished, launching the application will open up a control panel for XAMPP. In the ‘Manage Servers’ t ab make sure that both the Apache Web Server and the MySQL Database are running. If not, start those services and wait for them to say ‘ Running’. 3. Open your browser and type ‘localhost’ in the address bar. If you see a XAMPP landing page show up, then you’re good to go! Note: Just to make sure you don't run into any other problems when working with WordPress please make sure to change the XAMPP folder permissions on macOS. For that do the following: Page 5 ● ● ● ● ● ● ● ● ● ● ● Open applications folder Locate XAMPP folder Right-click, get info In the pop-up window locate the 'sharing & permission' section Click the 'locked' padlock symbol Enter admin password Change 'Everyone' permissions to read & write In the get info window still, select the 'cog' icon' drop-down option at the very bottom and select 'Apply to enclosed items' this will adjust the permission across all sub-folders as well. Re-lock the padlock symbol Close the 'Get Info' window Installing WordPress Now that we’re done setting up a server on our local machine, the next logical step is to create your first WordPress website on that server. Make sure your server is running in the background before you start. Before going forward, there are some PHP settings you should change. Left-click on the Wamp icon and go to ‘PHP > PHP Settings’. In that change the following: ● ● ● ● ● ● max_execution_time: 300 max_input_time: 300 max_input_vars: 10000 memory_limit: 1G post_max_size: 256M upload_max_filesize: 256M Remember the post_max_size value should be the same as the upload_max_size. If you’re using XAMPP on Mac, you’ll find the PHP Settings in ‘ /private/etc/php.ini’. Open the file in an editor and search for these keywords mentioned above to change their value. Note: The process that follows can be replicated to create as many WordPress websites as you want. 1. Download the WordPress files from its o fficial website and save it wherever you want on your computer. 2. Extract the zip file to get a folder called ‘ wordpress’. 3. Windows Users: Go to your ‘ C:/wamp64/www directory’ and create a new folder ‘myfirstwebsite’. Page 6 Mac Users: Go to ‘Applications/XAMPP/htdocs’ directory and create a new folder ‘myfirstwebsite’ 4. Copy the contents of the ‘ wordpress’ folder into ‘myfirstwebsite’. 5. Open your browser and in the address bar, type ‘ localhost/phpmyadmin’. This will open the login screen to your MySQL Server. Type ‘root’ as the username and for the password leave it blank and in the server choice, make sure to select ‘MySQL’. Once you’re logged in, at the very left you’ll see a list of databases already created on the server. Now, we need to create a database for our website that will store all of its information. For that, click on the link that says ‘ New’ at the top of the database list. In the field where it says ‘Database name’, type ‘myfirstwebsite’ and click on create. Note: At the top of your screen, right next to the PHPMyAdmin logo, you’ll see a text saying ‘Server: MySQL:330x’. The value of x can vary but just remember this value. We’ll be needing it going forward. 6. Open your browser and in the address bar, type ‘ localhost/myfirstwebsite’ and you’ll see the WordPress setup wizard on your screen. Just follow the wizard because it’s pretty straightforward except for two steps. Database connection details Database Name: myfirstwebsite Username: root Password: Leave this blank like we did when logging in the MySQL server Database Host: localhost:3308 or localhost:3306 depending on your value in PHPMyAdmin Table Prefix: wp_ Website Information Site Title: My First Website (you can always change it afterward) Username: This is going to be the username to login to your WordPress website once it’s installed so set it accordingly. Password: Same goes for the password Your Email: Enter your email address here which will be set as the admin email address Finally, click ‘Install WordPress’ and in a few seconds, you will have your WordPress website up and running. Once you get the success message, login to your website’s Page 7 dashboard using the credentials you set. To see the actual website and what it looks like, click on the home icon at the top. Note: Whenever you want to visit your website, just type ‘ localhost/myfirstwebsite’ in your browser’s address bar. If you’re not logged in and want to visit your website’s dashboard, type ‘localhost/myfirstwebsite/admin’ or ‘localhost/myfirstwebsite/wp-admin’ in the address bar. Section 2 - Inside WordPress Congratulations! The hard part is done. You have finally created your first ever WordPress website but this is not the end of it. You have the base created and now let’s build upon that to take your website to the next level. Install Themes WordPress already comes with a default theme that looks rather plain. Sure, you can keep it, but your website visitors may not be so impressed. A custom WordPress theme, whether it’s paid or f ree, will make your website more appealing as well as ensure that it looks professional. There are literally thousands of themes out there to choose from but in this guide, we’ll only be focusing on the free themes and how to install them. Whether it’s an e-commerce site, portfolio, blog, or niche business, there’s a theme that will work for your specific needs. These themes contain a multitude of layouts, formatting styles, colors, fonts, and other visual options that help you customize your website. Note: In my v ideo course, I provide a premium theme worth $60 for free to my students that has prebuilt demos you can choose from and makes the whole process of customizing your website even easier. To find a theme that works best for you, head to your admin dashboard. Click ‘Appearance > Themes’ and then ‘Add New’. This will open a page containing a list of all the free themes you can browse from. Page 8 Once you discover the perfect theme, simply ‘ Install’ it to begin customizing it. Each theme has different steps required of you during the customization process, so be sure to follow them closely. Each theme’s website (often mentioned in the theme details) has helpful documentation as you work through the customization process. If you still cannot find any information, click ‘Appearance > Customize’ in your admin dashboard and that often contains all the customization options you have for that particular theme. If you've purchased a theme from a third party like ThemeForest, you can use Upload Theme to add it to your site. Remember to upload the .zip file you get from the third party theme. Add Website Content With your theme now installed, you can customize your site’s physical appearance but what about the content of your website? In this section, we’ll cover how to manage your website pages, create new blog posts, and add menu items. ● Pages To create a new page, navigate to the ‘Pages’ tab in the WordPress dashboard, and click on ‘ Add New’. Type the title of the page i.e Home, About, etc, and below that is the area where you will add the contents of that page. If you’re using the latest ‘ TwentyTwenty’ theme of WordPress, the interface will look something like this Page 9 This is the default WordPress editor called ‘ Gutenberg’ and if you click on the ‘plus icon’ you will see a list of blocks you can add to the page. Although the list has all the basic blocks one would need to make a decent page, you can expand the list even further by installing plugins on your website which we’ll come to later. Some examples would include A dvanced Gutenberg and Gutenberg Blocks – Ultimate Addons for Gutenberg. When your page is ready, click publish and a URL will be generated where it will then be visible. One thing to note, however, is that to actually make your page accessible, you will have to add it to your menu or navigation bar. We’re going to cover that later. If you want to set one of the pages as the homepage of your website, go to ‘ Settings > Reading’ in your WordPress dashboard and change the ‘ Homepage Display’ to a static page Important Tip To make the process of page creation even easier, you can use plugins like Elementor, B eaver Builder, Divi Builder, and WPBakery Page Builder. These are visual drag-and-drop page builders with an extensive block library of their own so you will be able to see the changes you make in real-time. Note: In my v ideo course, I provide a premium theme worth $60 for free to my students that has prebuilt demos you can choose from. These demos contain some amazing page templates that you can import as it is and then modify instead of creating pages from scratch. Page 10 ● Posts To create a new blog post, navigate to the ‘Posts’ tab in the WordPress dashboard, and click on ‘ Add New’. You’ll then see an interface that’s nearly identical to the one you used to create your first page. There’s no need to reproduce the steps here on how to create a new blog post since the process is the same as what you’d do with pages. You can use a block on your page to display all the blog posts on your website for the users to read. ● Menus/Navigation If you don’t know, a menu or navigation bar is what we see at the top of the website or even in the footer containing links to the different pages of the website. It’s a guide for the users to find their way around your website. After all, you don’t want them to get lost, right? To create a menu or assign pages to an existing one, go to ‘Appearance > Menus’ in your WordPress dashboard. From this page, either select a menu or create a new one, and then from the widget on the left start adding the pages you want to that menu. Once it’s finalized, you can save it. If you go to ‘ Manage Locations’, you can assign a menu to the relevant theme location e.g top menu, mobile menu, footer menu, etc. You can also use one menu for multiple locations. Page 11 Install Plugins Consider plugins to be extensions/addons that allow you to add certain functionality to your WordPress site. There are plugins for just about everything, such as setting up an online shop, adding a contact form or social media, creating a photo gallery, and even tracking who visits your blog. To add a new plugin, navigate to the ‘Plugins’ tab in the WordPress dashboard, and click on ‘Add New’. Just like themes, there are thousands of plugins you can browse from. If you already know the name of the plugin you want, you can search for that directly or if you have no idea then you can search based on the functionality you want to add e.g newsletter, popups, eCommerce, etc. if you’ve purchased a plugin from a third party, you can use Upload Plugin to add it to your site. Just like themes, here too you have to upload the .zip file in your third party plugin folder. Once you’ve found the plugin you want, simply click ‘Install’ and then ‘ Activate’. For most plugins, once it has been activated, you’ll see a separate tab for it on the left sidebar in your WordPress dashboard which will take you to the settings of the plugin. However, if there is no separate tab, simply navigate over to ‘Plugins > Installed Plugins’. The plugins listed in blue are active; the ones in white are not. Each of them will include a Settings, Deactivate, and Edit button. Page 12 Important Tip If you decide you don’t want to use a certain plugin anymore, deactivate and remove it from your site. You should only install plugins that you plan to use. Leaving unused plugins on your site not only slows down your site but can also have security implications. Note: I n my v ideo course, I provide a premium theme worth $60 for free to my students that has prebuilt demos you can choose from. This theme also comes with some amazing premium plugins like W PBakery Page Builder which makes the whole page customization process a piece of cake. Section 3 - Deployment We’re almost at the end of the line now. Let’s say your website is finally complete and you’re ready to take it online to share it with the rest of the world. For that, you’ll need to buy a hosting and a domain. Do note, you don’t need hosting to create a website but you need one to take it online. There is no other way around it. There are hundreds of hosting providers out there to buy your hosting from and frankly, whichever one you find affordable, just go with that. I’m not going to give any referral links here to promote a particular hosting. Here’s what you have to look for when buying a hosting. Make sure you’re buying a Linux-based Shared Hosting plan. Some providers like Bluehost, GoDaddy, etc also provide hosting plans specifically made for WordPress websites and if you have that option, that’s even better. Configuration When it comes to the domain name, my suggestion is to always buy it from the same provider as the hosting because that will reduce the number of steps you’ll need to set up everything before going live. Most hosting providers also give ‘ Free Domain Name For 1 Year’ which makes it even more affordable. In case, you have a domain from one provider and hosting from another one, you’ll have to connect them together. Here’s how ● When you buy hosting you’ll get the details of your server on your email. In those details, you’ll find information about the nameservers as well as the credentials to your CPanel account. Note down the nameservers because we’ll be needing that. They will consist of two values like ns1.example.com and ns2.example.com. In case you don’t see the nameservers information in the email, log in to your CPanel account and Click the ‘Server Information’ link in the General Information section. Page 13 You will then see your Server Name listed along with additional information about your server. In this example, your nameserver values will be ns1.ecbiz182.com and ns2.ecbiz182.com. ● Log in to your provider account where you have purchased your domain from. Once you go to your domain settings, you’ll see an option to change your domain’s nameservers. In that replace the existing values with your own hosting’s nameserver values. Once you save these changes, it will say that the propagation will take 24-48 hours but don’t worry it usually doesn’t take that long and will be done in an hour or two. ● Come back to your CPanel account and search for the ‘Addon Domains’ o ption. In that, add your domain name e xample.com and you’re done. Once the propagation is Page 14 finished, upon visiting the URL, you’ll either see a dummy landing page by your hosting or a list of files in your website folder on the hosting. If you do, that means your domain is finally pointing to your hosting and you’re good to go. J ust keep checking every now and then because sometimes the propagation can take even longer. Before we continue, change your PHP settings on your hosting just like we did on our local machine. In your CPanel account look for ‘PHP Settings’. The exact wording might vary from hosting to hosting but if you just search PHP in your Cpanel settings you'll find it. If not then just google how to change PHP settings in your hosting and you'll find a link that will guide you to the correct page. Once you're in your PHP settings change the following values to these: ● ● ● ● ● ● max_execution_time: 6000 max_input_time: 6000 max_input_vars: 20000 or whatever the maximum value your hosting allows you to set it at if it is as a dropdown option. If it's a free text field then just write 20000 memory_limit: 2048M post_max_size: 1024M or 1G upload_max_filesize: 1024M or 1G Remember the post_max_size value should be the same as the upload_max_size. Transfer Website Transferring a website from your local machine to the hosting might seem like a complicated task but I’m going to make it the easiest thing for you in this entire process. We’re going to use a plugin called All-in-One WP Migration and as the name suggests this is a one-stop solution to the entire thing. ● Install and activate the All-in-One Wp Migration plugin on your local website. Once you activate it, go to ‘All-in-One Wp Migration > Export’ and export your website into a file Page 15 After the export is complete, you’ll get the file with the extension ‘.wpress’ ● Install a fresh copy of WordPress on your hosting using the CPanel account. CPanel has a WordPress installer which will easily guide you through the installation. If you still want, you can follow this g uide. Install the All-in-One WP Migration plugin on this website as well. ● Now all you have to do is go to ‘All-in-One WP Migration > Import’ and upload the ‘.wpress’ file you exported from your local website. It will take a couple of minutes before the import is completed and once it’s done, visit the URL of your website and voilà! The transfer is complete. Easy, isn’t it? Page 16 What if the import gets stuck? Yes, sometimes during the import it tends to get stuck and no matter how long you wait, the progress doesn’t go further than a certain percentage. What do you do then? Don’t worry, I got you covered. In that case, here’s what you should do ● Cancel the import. Then deactivate and remove the All-in-One WP Migration plugin from your live website. ● Go to your CPanel account and in the File Manager go to the root directory of your WordPress website. From there go to ‘ wp-content/ai1wm-backups’ folder and upload the ‘.wpress’ file into that folder. ● Then go to your live website and install the f ollowing version of the All-in-One WP Migration Plugin. How you will do that? Go to ‘Plugins > Add New > Upload Plugin’ and upload the zip file. ● Finally, go to ‘ All-in-One WP Migration > Backups’ where you will see the ‘.wpress’ file you just uploaded. ‘Restore’ that file and that will start the import process. This will skip the upload process of the file which is where the import tends to get stuck so now you won’t have any problems going forward. Congratulations! Now you know how to make a WordPress website from scratch on your local machine and once it’s complete, how to deploy it to hosting so that it’s live and accessible for everyone else to see. Nice work! In the above Ultimate Guide to Make a Website on WordPress, I have broken down my experience of making websites for almost 3 years into small nuggets so you can learn it quickly and easily. I don’t believe that one needs to know each and everything about WordPress to make an amazing website. You just need to learn the skill of it. Now, I have played my part and covered all the basics you need to know but now it’s your turn to experiment with the information you have and take your skill to the next level. I know initially, you might not make some great websites you can be proud of. You’ll probably make stupid mistakes, learn from them but eventually, there will come a time when you would have made so many mistakes that you’ll become a master of this skill. All you have to do is to not feel bad about making them in the first place. Page 17 Full Video Course This guide is from my full course, T he Smart Guide to Make a Website on WordPress from Scratch, in which I provide a p remium theme worth $60 for free, 1 hour of videos taking you through the entire step by step process, and techniques to help you create a website in a smart way without reinventing the wheel. 10K+ students have already gained value from this course. Don’t believe me? See for yourself Join The Course Here