1. 1. You may republish excerpts from this guide as long as they are accompanied by an attribution link back to: http://www.WebsitesMadeSimple.org Copyright 2012 2013 Websites Made Simple Some Rights Reserved
2. 2. Introduction 4 Step 1: Learn The Basics 12 Step 2: Get a Domain and Hosting 17 Step 3: Install WordPress 23 Step 4: Install a WordPress Theme 28 Step 5: Install WordPress Plugins 32 Step 6: Add Some Content 39 Step 7: Configure WordPress 58 Step 8: Configure Your Theme 62 Step 9: Configure Your Plugins 74 Step 10: Design Your Website 82 Bonus: How To Import Content 97 Table of Contents
3. 3. Introduction What You Need To Succeed... A recent survey in April of this year pegged the number of websites at 649 million. Now, that might sound like a lot, but another statistic from the same survey showed that only 187 million of those websites are active. So that leaves 462 million inactive websites. Doing the math, thats nearly 71%, of all websites created, that end up going nowhere. I don't know about you, but those dont sound like very good odds to me. In order to build a successful website these days, you really need to start out on the right foot. That means having the right tools, as well as, the right information at your disposal. And that's exactly what I intend to provide you with here. I designed this guide to be a simple, yet comprehensive resource that anyone can use to build a website on their own. In fact, I'll show you exactly how to create an amazing WordPress website using nothing more than your keyboard and mouse. Introduction WEBSITES . MADE . SIMPLE 4
4. 4. Upon hearing that, most people think that you need to have certain technical or design skills to complete such a task. And, while that used to be the case, it's no longer true. WordPress and its accompanying themes and plugins, allow you to customize the design and functionality of your website without ever having to touch a stitch of code. Don't believe me? Read on... What Will Your Website Look Like? Were going to be building the exact same website you see pictured to the right. You can click on the image and take a closer look at the demo site, but first, I want to take you through a quick list of the specific features your site will have. Home Page Slider Youll have a fully responsive slider on the Home Page. This means your slides will automatically adjust and look good on any device. Youll be able to add titles and descriptions for each slide and also adjust the way it transitions from one slide to the next. Introduction WEBSITES . MADE . SIMPLE 5 This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text. This is some new text.
5. 5. Blog Page Your Website will have a Blog Page that will list all of your recent blog posts in one convenient place. Well also configure the sidebar on this page to have several widgets that add some great functionality to the page. About Page Most people dont realize it, but after the Home page, the About Page is usually the second most visited page on a website. Your visitors will have a strong curiosity about the person and the story behind your site. Youll have an About Page where you can introduce yourself, and tell you visitors what your site is all about. Contact Page A Contact Page gives you the opportunity to direct your visitors to the different options they have for getting in touch with you. Here are a few you might want to consider: telephone number, email address, contact form, physical address, social media profiles. You can use your Contact Page to list this information. Contact Form A Contact Form allows your visitors to reach you privately and directly with their questions and comments. This is one option I highly recommend providing as its more reliable than email, and often times the preferred method of contact. Social Profile Icons These days, social networks offer huge potential for you to connect and interact with your visitors. And at the very least, most people will expect you to have profiles, at the three major networks: Facebook, Twitter and Google. Your site will have icons that link to your social profiles on every page of your site, so that your fans can easily find your social pages and connect with you there. Introduction WEBSITES . MADE . SIMPLE 6
6. 6. Mobile Ready Now, more than ever, its important to build a website that looks good on any device. It doesnt matter if your visitor is using a PC, Mac, tablet, Kindle, iPhone, or Android phone. Because your website will be mobile ready, it will automatically resize and display your content beautifully on any device. How Much Will Your Site Cost? Now that you have an idea what your site will look like, your next question will probably be, How much will it cost?. And the good news... Not very much at all! In fact, there are only two main costs youll encounter when building a website with WordPress: registering a domain name; and signing up for website hosting. Lets take a closer look at the exact costs for each of these. Domain Name When you register your domain name, itll cost $12.95. Thats a yearly fee, so you wont pay it again until the following year, right before your domain expires. Website Hosting The cost of website hosting will vary depending on the pricing plan you choose. The longer you pay for up front, the cheaper your average monthly cost will be. For example, if you pay month-by-month, a shared hosting account will cost you, $8.95. If you pay for 1 year in advance, your average monthly cost drops to, $6.95 per month. For 3 years, it goes down to $4.95 per month. So, as you can see, building a website on your own is extremely affordable, and of course a lot cheaper than hiring someone else to build one for you. Introduction WEBSITES . MADE . SIMPLE 7
7. 7. How To Use This Guide As previously mentioned, this is a comprehensive guide that will show you exactly how to make a website on your own. However, I wanted to make sure that you have two options for going through the process of building your site. Here they are: 1. eBook (Beginner) All you need to do is follow along with the content of this ebook, and it will walk you through the 10 step process of building your website. Each and every step along the way is clearly explained and numbered for you. They also correspond to numbers and arrows in screenshots which provide a visual reference as well. 2. Video (Intermediate) Ive created a video that follows this process pretty closely. You can find the video at the following location: http://www.WebsitesMadeSimple.org/Pytheas-Video This medium is a bit more dynamic and allows you to look over my shoulder to see exactly what Im doing. At the same time, the video contains less detail and is better suited for intermediate users. Either option will produce the exact same result, but one may be more suited to your learning style than the other. Or you can even combine the two if you need extra help with certain sections. Introduction WEBSITES . MADE . SIMPLE 8
8. 8. 10 Steps To A WordPress Website In order to give you a better idea of where were headed, lets take a quick look at the 10 basic steps that we'll follow in order to create your WordPress website. Step 1: Learn The Basics. Before we get started building your site, well go over some key concepts about how websites work. Well take a short look at the main components of a website, as well as introduce you to the WordPress platform. Step 2: Register A Domain Name and Get Web Hosting. I'll talk briefly about how to choose the right domain name for your site. Then I'll walk you through the process of registering the domain and signing up for web hosting. Step 3: Install WordPress. Using a little piece of software on your server's control panel, I'll show you how to install WordPress with just one click. I'll walk you through the installation process, along with the steps you need to go through before and after installation. Step 4: Install a WordPress theme. It can be difficult to find a theme thats both free AND looks good, but I've done exactly that for you. I'll help you install the completely free and mobile-ready Pytheas WordPress theme along with a child theme that makes it perform and look even better. Step 5: Install WordPress plugins. There are thousands of plugins to choose from, and it's hard to wade through them all and figure out which ones you really need. Ill show you exactly which plugins to install, which ones to deactivate, and which ones to delete altogether. Introduction WEBSITES . MADE . SIMPLE 9
9. 9. Step 6: Add Some Content. Without text and images, your website will look empty and lonely. Youll need to know exactly how to add and manage your own content. Ill walk you through the process of creating posts, pages, slides and highlights; so that youll be able to do it on your own. Step 7: Configure WordPress. Right out of the box, WordPress runs just fine. However, there are some minor adjustments that need to be made in order to help your website to perform even better, and look better at the same time. Step 8: Configure Your Theme. Every WordPress theme is different, and needs a bit of configuration after you install it. The Pytheas theme is no different, and Ill show you exactly how to manage the options associated with this theme. Step 9: Configure Your Plugins. Plugins add functionality to your site, but if you dont configure them after installation, they wont be of any use. Ill walk you through the steps necessary for getting your plugins to work right, so they enhance the functionality of your website. Step 10: Design Your Website. One of the secrets to building a website that looks like its been designed by a professional is choosing the right color scheme. This might seem like an impossible task, but Ill introduce you to a couple of tools that make it dead simple. Creating a professional logo is also a great way to build your brand and establish trust. You might think that this task is better left to a professional, but Ill show you a simple, yet highly effective way to create a logo that youll be proud of. Introduction WEBSITES . MADE . SIMPLE 10
10. 10. Support Along with this guide, Im offering FREE support through the forums on my website: http://www.WebsitesMadeSimple.org/Forums If, at any point during the process of building your site, you run into a problem, or feel that you need extra help, just click one of the Forum links provided at the end of each chapter and well be there to help you out. Conclusion So, there you have it... 10 simple steps thatll help you build your very own WordPress website. If theres any part of this process that seems intimidating, let me reassure you that anyone can do this. Ill be there to guide you every step of the way, and other than that, all you need is your mouse and keyboard to build your very own website. Alright, lets go ahead and move on to Step 1. Introduction WEBSITES . MADE . SIMPLE 11 If you ever want to build a website that looks and functions differently than the one were building here, you can easily do so by changing two steps in this whole process. All you have to do is change Step 4 and Step 9 for installing and configuring a different theme, and youll be able to create a completely different website.
11. 11. Step 1: Learn The Basics The Four Components Of A Website Before we dive into building a website, its important to understand some of the terminology and concepts behind the whole process. This little bit of knowledge will go a long way towards making it easier for you to build your site. So lets just quickly go over the four key components that we be using to build your site. In order to help you get a better understanding of how a website works, well use the analogy of an brick-and-mortar store and draw parallels between the two. A Domain Name Hostgator is where well be registering our domain name. A domain name provides an easy way for humans to remember where your website is. For example, my web server uses an IP address such as, 67.18.16.244. But its easier for us to remember a domain name like, WebsitesMadeSimple.org. A domain name is like an address for your website. It lets people know where to come and visit you on the world wide web. Just as a regular brick-and-mortar store has an address that you give to your customers so they can find you, your website will also need a web address so your customers can locate you online. A Website Hosting Service Hostgator is the website hosting service we will be using. A website hosting service is a company that provides a server where your website will reside. The server is just a special computer that has special software to display websites. Step 1: Learn The Basics WEBSITES . MADE . SIMPLE 12
12. 12. Think of your website hosting service as the land where your are going to build your website. It provides a location where your website can be built. Just as an offline store needs land for the building and all of the equipment, your website needs a place to store all of the files and images that support its structure. A Platform WordPress is the platform we will install. Its a series of files and images that work together to form a piece of software. WordPress is responsible for interacting with the server and the user at the same time. A website platform is like the building for your website. Its the structure that supports your site. Just as an offline store wouldnt exist without an actual building, your website needs a website platform to provide a place, or structure, for you to interact with your customers in the online world. A Theme Pytheas is the theme we will use. A theme is a collection of files and images that allow you to change the look and functionality of your website. A theme can be uploaded to WordPress with two clicks of the mouse, and any adjustments you want to make will be point-and-click as well. A theme can be likened to paint. Its what allows you to create a unique look and feel through color and design. Just as every brick-and mortar store uses color and design to create a unique experience, your websites theme can be used to change the look and feel of your site. So, there you have it. Those are the only components needed to create a website on your own. Hopefully, you now have a better understanding of what each one does. Now lets move on to talk about WordPress in a little more detail. Step 1: Learn The Basics WEBSITES . MADE . SIMPLE 13
13. 13. Introducing WordPress... WordPress is an open-source website platform that has been around since 2003 and powers more than 74 million blogs. It's one of the most user-friendly, self-hosted blogging platform out there, and as a result, won't going away any time soon. WordPress is used by companies both large and small. Even Fortune 500 companies deploy WordPress websites to host their content. Heres a shortlist of a few familiar names that use it: GM, UPS, Sony, ebay, Best Buy. You might be surprised to find that several popular music artists use WordPress. That list includes: JAY-Z, Katie Perry, the Rolling Stones, and many more. Not only does it have an enormous base of plugins that add cool functionality to your site, its very stable, secure and able to power any size website you desire to build. WordPress Basics Lets take a brief look at the 4 main components of the WordPress platform and the role each will play in building your website. WordPress WordPress itself is a type of Content Management System. In other words, its a piece of software that helps you manage all of the content on your website. So instead of having to edit your pages and blog posts by wading through HTML files, you have a nice interface that organizes it all for you by interacting with the server. Step 1: Learn The Basics WEBSITES . MADE . SIMPLE 14
14. 14. Themes There are thousands of themes, both free and paid. Themes affect the layout and design of your site, while adding a little functionality at the same time. Most themes can be customized via options that are built in. For example, you might be able to change the color of your site, or change the location of your sidebar from the left to the right. Some themes even have their own framework that allows for drag-and- drop customizations. Most themes, however, provide simple point-and-click operations for making configuration changes. Plugins Plugins add functionality to your WordPress site. Want to add a contact form? Install a plugin. Need a gallery on your site? Install a plugin. Pretty much any functionality that you might want to add to your site has probably already been developed with a plugin. And the best thing is, theyre almost always free, simple to install, and easy to configure. Widgets Widgets allow you to add content and features to your website. They can be dragged and dropped into widget areas that are usually located in the sidebar, footer, and sometimes on the Home page. Many plugins have widgets associated with them so you can add your new feature to the above mentioned places on your site. Conclusion And those are the four main components that make up the WordPress platform. If talking about WordPress intimidates you a little, I want to reassure you that its very easy to use. Thats the exact reason WordPress was developed. So that non-technical people would have a user-friendly interface for managing their website. Step 1: Learn The Basics WEBSITES . MADE . SIMPLE 15
15. 15. There were some 65 million people who downloaded the latest version of WordPress. And that makes WordPress the most popular blogging platform in the world. And the reason why... Its extremely user-friendly and easy to use. Its as simple as that. Step 1: Learn The Basics WEBSITES . MADE . SIMPLE 16 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
16. 16. Step 2: Get a Domain and Hosting How To Register A Domain Name The very first thing you'll need to do is think of a domain name for your website. There are a few rules that you'll need to be aware of and a couple of other unspoken guidelines that you might want to stay within. Here are the two main rules when selecting a domain name: 1. You can only use letters, number, and dashes in your domain name. 2. Don't include an existing copyright in your domain. (Check here.) Here are a few tips that you might help you come up with a better domain name: Use only .com, .net, or .org for your domain. Others, like .tv may be appropriate at times. Don't use hyphens or numbers. They're harder to remember and look cheaper than a domain that only has letters. Keep it short. It'll make your brand easier to remember and your site easier to find. Make it unique. You don't want your customers confusing your brand with another established one. Try to choose a name that doesnt have the .com or .net version registered. Step 2: Register a Domain and Get Hosting WEBSITES . MADE . SIMPLE 17
17. 17. Use a domain that matches the name of your website. This might sound like common sense, but Ive seen too many people register a domain that doesnt match the name of their website. Dont do it! Itll confuse your visitors and wreck your branding. So, that should help you get started on the path to selecting a domain that you can live with for years to come. Take your time, because after you register the domain, the only way to change it is to purchase another one. How To Sign Up For Web Hosting For this tutorial, were going to be using Hostgator website hosting. Other than Bluehost, theyre the only shared hosting I recommend using. Ive been using Hostgator shared hosting for over 5 years now, and theyve always been reliable and very quick to solve any issues that come up. If youre going to use Hostgator, it would be really helpful if you use the button to the right. Doing so will not only help me continue to provide free support and tutorials on my website, it will also ensure you receive the biggest possible discount. Once youre on the Hostgator home page, click the, "View Web Hosting Plans" button in the middle of the page. (Note, this page changes slightly in appearance from time to time.) Step 2: Register a Domain and Get Hosting WEBSITES . MADE . SIMPLE 18 XXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXX
18. 18. On the following page, you'll need to select the hosting plan you want according to Package Type and Billing Cycle. 1. First, decide which type of plan you need, and then select the billing cycle from the drop down menu. 2. Click the, "Order Now" button to continue and enter your billing information on the next page. 3. Select whether you want to register a new domain, or already have a domain you'd like to transfer. 4. Enter the new domain you want to register, or the domain you already own. Step 2: Register a Domain and Get Hosting WEBSITES . MADE . SIMPLE 19 The "Hatchling" plan allows for one domain under your account, whereas the "Baby" plan allows you to put unlimited domains under your account. I would recommend starting with the Hatchling and then upgrading later if need be. The billing cycles range from one month to three years. The longer you pay for up front, the less you end up paying per month.
19. 19. 5. Confirm or change the Package Type you want. 6. Confirm or change the Billing Cycle. 7. Enter a Username and Security Pin, making note of the restrictions on each. 8. Select either Credit Card or PayPal and then enter the appropriate billing information or go through the PayPal checkout process. Step 2: Register a Domain and Get Hosting WEBSITES . MADE . SIMPLE 20
20. 20. 9. Deselect all of the Hosting Add- ons, unless you know for sure that you need them. 10. Enter the coupon code, "1CENT" and you will receive your first month for one penny. Step 2: Register a Domain and Get Hosting WEBSITES . MADE . SIMPLE 21 If you select a billing cycle of 6 months or longer, enter, "WMS25PERCENT" for the coupon code. This will give you an exclusive 25% discount on your hosting, which adds up to a much bigger savings in the end.
21. 21. 11. Check your total. If you're registering a domain, it should be $12.96. If not, $0.01. 12. Check the box for, "I have read and agree to the terms and conditions of use". 13. Select the "Create Account" button. And finally, after completing the registration process, Hostgator will send you a "Welcome" email that contains all of the information you need for logging in to and managing your server. That same email will also contain the DNS servers which you will need if you are transferring a domain instead of registering a new one (see step 2.1 above). If you're unsure of how to transfer your domain to Hostgator, then you'll have to contact your domain registrar directly for help with doing that. Just make sure to retrieve the DNS servers from your Hostgator Welcome email before contacting them. Step 2: Register a Domain and Get Hosting WEBSITES . MADE . SIMPLE 22 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
22. 22. Step 3: Install WordPress This step is where people start to get nervous because they see it as the point where the technical part begins. But let me reassure you that it's not technical at all. Hostgator has greatly simplified this process so that you can install WordPress with, literally, one click. All you have to do is follow the directions and the screenshots below and use your mouse to complete the installation. The One Click Install Installing WordPress can be done through your servers control panel. Well be using a piece of software that allows us to install WordPress with one click of the mouse. First, find and open up the "Welcome" email that was sent to you by Hostgator after you completed the registration process. 1. Retrieve your Username and Password. Step 3: Install WordPress WEBSITES . MADE . SIMPLE 23
23. 23. 2. Retrieve the nameserver URLs and transfer your domain's nameservers to Hostgator. (Optional, see 1st note below.) 3. Click on the cPanel URL and go to your control panel. (See 2nd note below.) 4. Next, take the Username and Password provided in the email and log in to the control panel (cPanel) for your server. Step 3: Install WordPress WEBSITES . MADE . SIMPLE 24 The two temporary URLs provided in the email for your cPanel and website can be used until your domain name fully propagates and starts working correctly. Sometimes this happens immediately, and other times it can take up to 48 hours. After DNS starts working properly, youll then be able to access them at: http://www.yourdomain.com/cpanel, and http://www.yourdomain.com. Its only necessary to do Step 2 if you didn't register your domain with Hostgator. When you register your domain somewhere else, you'll need to take the DNS servers provided in this email, and enter them wherever you registered your domain name. If youre not sure where that is, just ask them, and they will be able to tell you exactly where.
24. 24. 5. Scroll down to the "Software/ Services" section of the page. 6. Click on, "QuickInstall" icon and proceed to the next page. 7. On the QuickInstall page, select "WordPress" from the left-hand column. 8. Then select the "Continue" button on the right. 9. Now you'll need to select your domain from the drop down menu. 10. Fill in the five fields. 11. Click on the, "Install Now" button. Step 3: Install WordPress WEBSITES . MADE . SIMPLE 25
25. 25. 12. You'll see a progress bar that reaches 100% when the installation is finished. 13. Write down the Username and Password given below the "Congratulations" message. 14. Click on the "Admin Area" link provided directly above the Username and Password. (Note: This link may not work yet if DNS has not propagated. If not, use the temporary URL from the welcome email.) 15. Log in to the Admin Area of your website by entering your Username and Password. 16. You will arrive at your WordPress dashboard. Notice theres a menu on the left that will be used for navigating the backend of your site. Step 3: Install WordPress WEBSITES . MADE . SIMPLE 26
26. 26. Next, you'll need to change your password from the one that was given to you, to a new one that you'll be able to easily remember. 17. Find, Users > Your Profile in the left-hand column. 18. Scroll down to the section where you can change your password. 19. Enter your new password twice. 20. Click the "Update Profile" button And there you have it... If you've made it this far, you've just successfully installed WordPress and your website is ready for a theme and some plugins. Step 3: Install WordPress WEBSITES . MADE . SIMPLE 27 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
27. 27. Step 4: Install a WordPress Theme Moving on to the next step, we're now going to install a WordPress theme for your site. There are a number of high quality free themes that we can use, but it's best to always use a theme that's responsive. Installing The Responsive Pytheas Theme A responsive theme is one that will resize to the dimensions of the device that it's being viewed on. That means it will look good on any device, including: iPhones, iPads, Kindles, Android phones, PCs or Macs. So, the theme we've chosen to use is called, Pytheas. 1. The first step is to download the theme from the following location and save it somewhere convenient. I recommend your Desktop so you can find it easily. http://www.websitesmadesimple.org/pytheas-files 2. After you download the file, unzip it so that you have an uncompressed version of it in the same location. Depending on the operating system youre running, you can extract a zipped file by doing the following. Windows - Unzip a file by right clicking and selecting, "Extract All". Mac - Unzip a file by double clicking it. Step 4: Install a WordPress Theme WEBSITES . MADE . SIMPLE 28
28. 28. 3. Next, log in to your WordPress dashboard at: yourwebsite.com/wp-admin 4. Then go to, "Appearance" > "Themes" on the left-hand side. 5. Click the, "Install Themes" tab. 6. Click on the, "Upload" link 7. Now click on, "Choose File" and navigate to the location of the "Pytheas-Files" folder that you previously downloaded and unzipped. 8. Select the "Pytheas.zip" file and click on, "Open". 9. After you've selected the file, click on the, "Upload" button. Step 4: Install a WordPress Theme WEBSITES . MADE . SIMPLE 29
29. 29. 10. After the theme finishes installing, DON'T ACTIVATE IT. Instead, click on your BROWSER'S BACK BUTTON. That should take you back to the Upload page again where you can upload the child theme. 11. Click on, "Choose File" again and navigate to the "Pytheas- Files" folder. 12. This time, select the file, "Pytheas-Child-Theme.zip" and click, "Open". 13. After you've selected the file, click on the, "Upload" button. 14. This time, you will want to click on the, "Activate" link that appears after the theme installs. Step 4: Install a WordPress Theme WEBSITES . MADE . SIMPLE 30
30. 30. 15. You will then be taken to your themes page where you will see that the Pytheas-Child-Theme is installed and activated. 16. You will also want to make sure that the Pytheas theme is installed and showing up down below. That's all there is to it! Pretty easy, huh? You now have a parent theme, the Pytheas Theme, and a child theme, Pytheas-Child- Theme, installed on your WordPress website. One of the main benefits to having a parent and child theme installed is that you can make all of your configurations and settings changes to the child theme, and when you update the parent theme, you won't lose anything. We'll get into the details of configuring your theme in Step 5. Step 4: Install a WordPress Theme WEBSITES . MADE . SIMPLE 31 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
31. 31. Step 5: Install WordPress Plugins WordPress plugins add features and functionality to your website. There are literally thousands of them, and one can be found for almost any conceivable modification you wish to make to WordPress. However, you want to be careful about which plugins you install for a couple of reasons. Plugins can cause cause technical issues with your site. Plugins can cause your site to run slower. Plugins can be difficult to maintain. So, in this tutorial, I'm going to show you the EXACT plugins you need and nothing more. We're going to install 7 plugins that will add some needed functionality to your site, and then we're going to delete the plugins you wont use. Again, as with most WordPress tasks, this isn't going to be a technical process. All you'll need to do is just follow along and point and click with your mouse. Which plugins do you need? Here's a list of the plugins that we're going to install, along with a brief description of what each one does. Plugin Central - Allows you to install multiple plugins at once. Black Studio TinyMCE Widget - A WYSIWYG editor for adding widget content. Fast Secure Contact Form - Helps you create beautiful, custom contact forms. Options Framework - An integral plugin for the Pytheas theme. Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 32
32. 32. Wordpress Importer - Import text and images for posts, pages, and slides. Wordpress Popular Posts - Show the most popular blog posts along with images and meta data. Wysija Newsletters - Create and add an opt-in form to your sidebar or footer. Those are the 7 plugins we're going to install. And don't worry if you don't quite understand the short explanations given here of what these plugins will do. It will all become clear later as we work with them a little. Installing Plugins The installation of a WordPress plugin can be accomplished with 2 clicks. Below, I will detail the basic steps and provide images to help you follow along. 1. First, log in to your WordPress dashboard by going to: yourwebsite.com/wp-admin Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 33
33. 33. 2. Go to "Plugins" and "Add New" on the left-hand side. 3. Next, place your cursor in the "Search" field, and type the name of the plugin, in this case, "Plugin Central". 4. Then, click "Search Plugins" and wait for the results to be displayed. 5. Your search results will appear and Plugin Central should be the first one listed. Just click on "Install Now" 6. You will then be presented with a confirmation screen that asks you if you really want to install the plugins. Choose, "OK". Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 34
34. 34. 7. The plugin will install automatically, and will give you a series of messages letting you know what is going on. 8. After it finishes, you will see an, "Activate Plugin" link appear. Click on that link to finish the installation. You'll then be taken to the Plugin page where you'll have a list of the plugins installed on your website. (This step isn't shown with a screenshot, so just follow the directions for the next step.) 9. Next, go to, "Plugins" > "Plugin Central" in the left-hand column. 10. Then copy and paste the following list of plugins below to the text box that's provided. Black Studio TinyMCE Widget Fast Secure Contact Form Options Framework Wordpress Importer Wordpress Popular Posts Wysija Newsletters 11. Finally, click the, "Install Plugins" button down below. Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 35
35. 35. 12. You'll then see a list of each plugin being installed, with a message stating, "Plugin installed successfully." 13. After all 6 plugins have been installed, click on "Plugins" > "Installed Plugins" in the left-hand menu. 14. On the Plugins page, select the following 5 plugins that were just installed in the previous steps: Black Studio TinyMCE Widget Fast Secure Contact Form Options Framework Wordpress Popular Posts Wysija Newsletters 15. Then, select, "Activate" from the drop down menu and click on the, "Apply" button to the right. Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 36
36. 36. 16. Next, we're going to deactivate some plugins that we don't need. To do that, select the following 3 plugins: Plugin Central, WP Super Cache, Jetpack by WordPress.com. 17. Then select, "Deactivate" from the drop down menu at the top, and click the, "Apply" button. 18. In order to delete the plugins that we're not going to use, select the plugins: Hello Dolly, Jetpack by WordPress.com, Plugin Central, WP Super Cache. 19. Then select, "Delete" from the drop down menu and click the, "Apply" button. Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 37
37. 37. 20. Select, "Yes, Delete these files and data." when prompted and confirm that you want to delete the plugins. 21. After that process has completed, select the "Disable vCita" link at the top of the dashboard window. And that completes the process of installing all of the plugins we'll need to use. I hope you also got a good feel for how to deactivate and delete plugins as well, since that's a common task that you'll no doubt encounter again in the future. Now that you have your whole website installed, you can move on to adding some content and then configuring everything. On to the next step... Step 5: Install WordPress Plugins WEBSITES . MADE . SIMPLE 38 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
38. 38. Step 6: Add Some Content Two Ways To Add Content There are two ways you we can populate our WordPress website with content. We can import it using an XML file that we exported from another WordPress website, or we can generate our own posts and pages by adding text and images one-by-one. If youre not familiar with adding content to WordPress, I would highly recommend you follow the directions outlined in this step (Step 6). This will help you learn a lot more about how to create and manage content in WordPress, so youll be able to do so at a later date on your own. However, if youve already been through this process before, and know how to add content on your own, you can easily skip over this section by following the instructions provided in the bonus section of this ebook. Click here to learn how to upload content via an XML file. Delete The Default Content The very first thing we need to do is delete the default posts and pages that WordPress always adds to a new website. After we accomplish that, we can add all of our own content. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 39
39. 39. 1. First, we need to click on, "Posts" > "All Posts" in the left-hand column. 2. Then click on the "Trash" link below the post entitled, "Hello World". 3. Next go to, "Pages" > "All Pages" in the left-hand menu. 4. Click on the "Trash" link below the post entitled, "Sample Page". Okay, now that weve gotten rid of the default WordPress content were ready to start adding some posts and pages. Add Posts To Your Website Posts and pages are kind of similar, and its a good idea to understand the differences between the two before you start publishing your content. So lets dene what a post is rst. Posts A post is an article that provides your readers with information on a specic topic. Then an excerpt of the post will end up being listed on your blog page. Blog posts dont contain important content that needs to be accessible through your menu. Blog posts can be organized through the use of tags and categories. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 40
40. 40. Adding new posts and pages to your WordPress website is very simple to do. First, well go over the exact steps for adding a new post to your site. After that, well show you how to add the pages youll need. Note that the following steps will require the Pytheas-Files.zip le that you downloaded at the beginning of Step 4. Heres that link again, just in case you need to download it again: http://websitesmadesimple.org/pytheas-files 1. Log in to your WordPress dashboard by going to: yourwebsite.com/wp-admin. 2. Go to, Posts > Add New. 3. Enter the title of your post. 4. Copy and paste the text from the le This Is Post Number Four.txt in the Pytheas- Theme-Files folder. 5. Enter a tags, entitled, City. 6. Add a category entitled, City. 7. Click the, Save Draft button. 8. Click the Set Featured Image button. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 41
41. 41. When creating a new post, you can use the, Save Draft button to save any changes that youve made until youre ready to publish it live on your site. Weve already added text, tags and selected a category, but we still need to set the Featured Image before hitting Publish. So, lets go ahead and do that. 9. Click the, Upload Files link in the upper, left-hand corner. 10. Click the Select Files button in the middle of the screen. 11. Navigate to the Pytheas-Files folder that you downloaded previously. 12. Select the photo labeled, paris.jpg. 13. Select the, Open button. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 42
42. 42. 14. Make sure the image is selected. 15. Select the, Set Featured Image button. 16. You should now see your Featured Image showing up in your in your Edit Post window. 17. You can now publish your post and it will show up on your, Blog page. 18. Repeat the Steps 1-17. Use the le, This Is Post Number Three.txt for Step 4 and, Desert for the tag and category. Then use the image, canyon.jpg for Step 12. 19. Repeat the Steps 1-17. Use the le, This Is Post Number Two.txt for Step 4 and, Ocean for the tag and category. Then use the image, hawaii.jpg for Step 12. 20. Repeat the Steps 1-17. Use the le, This Is Post Number One.txt for Step 4 and, Nature for the tag and category. The use the image dock.jpg for Step 12. These last three steps will provide more practice with adding posts, as well as add the content we need to make our website to look exactly like the demo site. So make sure to add them all. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 43
43. 43. Add Pages To Your Website Now its time to add some content to our site in the form of pages. And just as we dened what a post is, we should also clearly dene what a page is. Pages Pages are for permanent content that will be added to your navigation menu or footer. A few examples of pages are: an About page, a Contact page, a Gallery page, a Services page. All of these pages contain content that needs to be readily available for all of your visitors to easily find through the navigation menu. So lets go ahead and create each page, one-by-one and also add the content for each as we go along. Home Page Your Home page will be the most visited page on your site, and usually the first page that people see. Pytheas has a template for the Home page which displays your Slides, Highlights, Portfolios, and Recent Blog Posts. 1. Log in to your WordPress dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Pages > Add New in the left-hand menu. 3. Type in Home for the title of the page. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 44
44. 44. 4. Select the Home Template from the drop down menu. 5. Click, the Publish button. Thats it. Selecting the Home template as we did in Step 4 will ensure that all of our Home page content that we added earlier will show up there. Blog Page Your Blog page lists excerpts of your most recent blog post. Each excerpt consists of a Featured Image, if you have one set, and a few lines of text. You can choose how many blog excerpts you want to be shown on your blog page. 1. Log in to your dashboard by going to: yourwebsite.com/wp- admin 2. Go to, Pages > Add New in the left-hand menu. 3. Type in Blog for the title of the page. 4. Click, the Publish button. Now that youve published your Blog page, your blog posts have a place to be displayed when you publish them. Theres one more setting that well need to change in order for your posts to show up here. But well cover that in the next section. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 45
45. 45. About Page Your About page is where you can tell your audience about yourself, and your blog. Usually you have a picture or two in there, so Ill show you how to insert a picture as well. 1. Log in to your dashboard by going to: yourwebsite.com/wp- admin 2. Go to, Pages > Add New in the left-hand menu. 3. Type in About for the title of the page. 4. Make sure the Visual tab is selected. 5. Copy and paste the text from the About Page Text.txt file found in the Pytheas- Files folder that you downloaded. 6. Place your cursor in the upper- left hand corner of the text box and then click the Add Media button. 7. Click the Upload Files button. 8. Click the Select Files button. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 46
46. 46. 9. Navigate to the Pytheas- Files, and select the file, todds-avatar-250.jpg 10. Set the Alignment to Right. 11. Set the Size to Thumbnail - 150 x 150. 12. Click the Insert Into Page button. 13. Click the Publish button. Contact Page Your Contact page is where you can offer your visitors several ways of getting in touch with you. Were going to focus on putting a contact form with a captcha in order to prevent spam. 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Pages > Add New in the left-hand menu. 3. Type in Contact for the title of the page. 4. Make sure the Visual tab is selected. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 47
47. 47. 5. Copy and paste the following shortcode in the text field: [si-contact-form form='1'] 6. Click the, Publish button. You now have a contact form on your Contact page that will automatically forward any requests to the email address you specied when you installed WordPress. If youd like to change that email address, you can do so by going to, Plugins > FS Contact Form Options and change the email addresses in the E-mail and E-mail Conrmation sections. Then make sure to click the Update Options button after youre nished. Adding Home Page Content If youve been looking around your WordPress dashboard, youve probably noticed that there are several other place you can add content besides just Posts and Pages. More specically, there are three different sections where we will be adding content to the Home page, and those are the following: 1. Home Slides - These are the slides that you see on the home page right under the navigation. You can add as many as youd like, and even add titles and descriptions if youd like. 2. Highlights - This section is right below the slides and helps you explain what you do. Theres room for about 3 to 5 highlights with a drop down menu that lets you add cool icons. 3. Blog Posts - Theres a special section on the Home page which displays your recent posts. Visitors can see an image and a post excerpt and then click through to read. This actually happens automatically, but you can change the number of posts that are displayed. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 48
48. 48. Add Slides To The Home Page Adding a slide to the Home page is pretty similar to the process of adding a post or a page. The main differences are that you dont have a body of text to enter, and you need to set a, Featured Image. So lets take a look at that process real quick: 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Home Slides > Add New. 3. Enter the title, Slide 1. 4. Next, click on Set Featured Image. 5. Then click on, Upload Files in the upper left-hand corner. 6. Next the, Select Files button in the center. 7. Navigate to the Pytheas-Files folder that you downloaded earlier and select the file, mountains.jpg. 8. Finally, click the Set Featured Image button and youll be taken back to your slide. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 49
49. 49. 9. Enter a URL if you want the slide to link to a web page, either on your site, or on another site. 10. Enter a Caption if youd like (Optional: will show on the slide.) 11. Enter a Caption Description (Optional: will show on the slide.) 12. Save your Draft until youre ready to publish. 13. Publish the Slide when you want it to show up on your Home page. 14. Repeat the steps above and use Slide 2 in Step 3 and boat.jpg in Step 7. 15. Repeat the steps above and use Slide 3 in Step 3 and desert.jpg in Step 7. After youve added all three slides, your slider will be almost ready to go. Well still have to configure some settings in the next Step in order for you to be able to see it. Add Highlights T0 The Home Page Adding a Highlight is different than publishing a Slide in three ways. First, the highlight wont have a featured image. Youll also have to enter some text for the highlight. Finally, youll have the option of adding an icon to the Highlight. Here are the steps for creating a Highlight: Step 6: Add Some Content WEBSITES . MADE . SIMPLE 50
50. 50. 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Highlights > Add New. 3. Add a title, Highlight 5. Note: This will be visible at the top of your Highlight. 4. Copy and paste the following text: This is some text. This is some text. This is some text. This is some text. This is some text. 5. Add a URL if you want your Highlight to link to something. 6. Select the icon you want to use. 7. Save it as a draft while youre making changes to it. 8. Publish your Highlight to make it show up on your Home page. 9. Repeat Steps 2-8 and create Highlight 4. 10. Repeat Steps 2-8 and create Highlight 3. 11. Repeat Steps 2-8 and create Highlight 2. 12. Repeat Steps 2-8 and create Highlight 1. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 51
51. 51. Formatting Text With The Toolbar Now that you know how to add a posts, pages, slides and highlights; lets take look at how each button on the toolbar can help you format your content. 1. Bold - Highlight the text you want to bold and click the button. 2. Italics - Highlight the text you want in italics and click the button. 3. Strikethrough - Highlight the text you want to strike through and click the button. 4. Unordered List - Creates a bulleted list. Put your cursor where you want to start to the list, and click the button. Click it one more time when youre nished creating your list. 5. Ordered List - Creates a numbered list. Put your cursor where you want to start to the list, and click the button. Click it one more time when youre nished creating your list. 6. Blockquote - Indents, italicizes and changes the font of your text. Put your cursor on the line you want to block quote, and click the button. 7. Align Left - Left justies your text or image. Just highlight the line of text, or select the image that you want to change. Then click the button. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 52
52. 52. 8. Align Center - Centers your text or image. Just highlight the line of text, or select the image that you want to change. Then click the button. 9. Align Right - Right justies your text or image. Just highlight the line of text, or select the image that you want to change. Then click the button. 10. Insert Link - Adds a hyperlink. Highlight the text and click the button. Then enter the URL and Title of the link. Also, check the box if you want it to open in a new window. 11. Unlink - Removes a hyperlink. Highlight the text you want to unlink and click the button. 12. Insert More Tag - The More Tag tells WordPress where to show a truncated version of your article on your blog page. It show the Continue reading link, which when clicked, takes your reader to the full article. Place your cursor where you want to truncate your post, and click the Insert More Tag button. 13. Toggle Spellchecker - This turns spellchecker off or on. You can also select the language you want spellchecker to use by clicking the drop down menu and checking your language. 14. Distraction Free Writing Mode - Click this button to remove everything and leave you with just your text area to compose your post. When youre nished, click the Exit Fullscreen button. 15. Show/Hide Kitchen Sink - Displays or removes the lower half of the toolbar that contains more options for formatting your post. Formatting Text With The Kitchen Sink After clicking on the last button on the Toolbar, and the full Kitchen Sink is displayed, youll have lots of additional options to choose from for formatting your text. Below, well go over what each one does, and how to use it. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 53
53. 53. 1. Style - Allows you to specify paragraphs and headings sizes. Just highlight the text and then select the option from the drop down menu. 2. Underline - Highlight the text you want to have underlined and click the button. 3. Align Full - Only for text and not images. This will align both sides of the selected text block. Just highlight the text you want to align, and click the button. 4. Select Text Color - Highlight the text you want to change the color of, and select one of the preset colors, or click on More Colors and enter a HEX code. 5. Paste As Plain Text - Removes any formatting or HTML code before you paste a block of text into the editor. You may want to check the Keep Linebreaks box before pasting your code. 6. Paste From Word - Helps to clean up and properly format any text that is copied and pasted from a Microsoft Word document. 7. Remove Formatting - Removes all formatting of the selected text. Highlight the text you want to change, and click the button. 8. Insert Custom Character - Since custom characters use special HTML codes in order to be displayed correctly, you can easily insert them by clicking on this button, and then selecting the special character you want to use. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 54
54. 54. 9. Outdent - Allows you to adjust the indent of the line to the left by one level. Just place your cursor on the line and click the button. 10. Indent - Allows you to adjust the indent of the line to the right by one level. Just place your cursor on the line and click the button. 11. Undo - Allows you to undo your last action. 12. Redo - Allows you to redo your last action. 13. Help - Displays extra information about how to use the editor, as well as information about hotkeys. That covers all of the features you might need to use when adding content via a post or page. Now lets take a look at how to add content to a couple of other places on your Home page. Turn Comments Off For the posts on your blog, you usually want comments turned on. But for pages, you usually turn comments off. Sometimes, depending on the settings in your dashboard, it can be a little difcult to gure out how to do this. So, well go through the steps to make sure you can do it on your own for any page or post. 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Pages > All Pages in the left-hand menu. Then select the Contact page on the right. 3. Click the Screen Options in the upper, right-hand corner. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 55
55. 55. 4. Make sure that Discussion is selected. 5. Uncheck both, Allow Comments and Allow trackbacks and pingbacks on this page. 6. Click the Update button. Comments will now be turned off for your Contact page. Youll have to repeat this process for any page or post where you dont want to have comments showing. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 56 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
56. 56. And that concludes this Step for Adding Content. You should now have 4 pages, 4 posts, 3 slides and 5 highlights. If you have too few or too many of each type of content, youll want to go back through this section and add or delete accordingly. Step 6: Add Some Content WEBSITES . MADE . SIMPLE 57
57. 57. Step 7: Configure WordPress Configuring WordPress First, were going to configure WordPress, and there are only three configuration changes that we need to make. 1. We need to create and set the main menu. 2. We need to set the Home page and Blog page. 3. We need to change the structure of your URLs. All three of these things are very easy to do, and can be accomplished with a few clicks of the mouse. So just follow along with the steps below. Create and Set The Main Menu Setting the Main Menu will ensure that your navigation menu displays properly on every page. In order to set the main menu for your website, do the following: 1. Log in to your WordPress dashboard at: yourwebsite.com/wp-admin. 2. Navigate to, "Appearance" > "Menus" in the left-hand column. 3. In the, "Menu Name" box, type in, Main Menu. 4. Click the Create Menu button to finish creating your menu. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 58
58. 58. 5. Check all four pages that we created earlier: Contact, About, Blog, Home. 6. Click the Add to Menu button to add the pages to the menu. 7. All pages will show up in the menu and your can order them by dragging and dropping them with your mouse. 8. Make sure the box for Main is checked. 9. Click the, Save Menu button. And that completes all of the steps for adding a menu to your website. You should now have all of the pages showing up in the navigation menu of your site. Set The Home Page and Blog Page This setting will ensure that all of your slides, highlights and blog post excerpts are displayed on the Home page of your website. It will also tell WordPress to show new blog post excerpts on your Blog page as well. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 59
59. 59. 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin. 2. Go to, "Setting" > "Reading" in the left-hand column. 3. Select, "A Static Page" for the, "Front page displays" setting. 4. For, "Front page:", select, "Home" from the drop down menu. 5. For, "Posts page:", select, "Blog" from the drop down menu. 6. For the setting, Blog pages show at most enter the number of blog excerpts you want to show on your blog page. 7. "Save Changes" at the bottom. Change The Structure of Your URLs Next we're going to change the "Permalink" settings. This will change your URLs from having a number at the end, such as, "yourwebsite.com/p=?123", to having the post title at the end, such as, "yourwebsite.com/your-latest-article". Permalinks have two different functions in WordPress. First, they give your post URLs more meaning and make them easier to remember. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 60
60. 60. Second, they help improve your search engine rankings because they allow you to put your target keyword in your URL. Heres how you can accomplish both of those things in four easy steps. 1. Log in to your dashboard by going to: yourwebsite.com/wp- admin. 2. In the left-hand menu, go to, "Settings" > "Permalinks". 3. Select, "Post name" under the "Common Settings" section. 4. Click on the, "Save Changes" button at the bottom to save your settings. And that completes our configuration of WordPress. We only had to make three simple changes, and now were ready to go and configure our plugins. So lets keep moving. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 61 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
61. 61. Step 8: Configure Your Theme The Pytheas theme comes with a host of options that can be configured. And after installing it in Step 4, we didnt really change anything. So now were going to take the time to examine and configure each option so our website will look like the demo when were finished. This exercise will also provide practice so youll be able to configure your theme on your own in the future. There are 7 tabs under the, Appearance > Theme Options page and well take a look at each one individually. General The General tab has, well, general options. For the most part, changes made to the options listed there affect the overall state of your website. Lets go over what each one of them will do. To get to the General options tab, do the following: 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin. 2. Go to, Appearance > Theme Options. 3. Click on the General tab on the left. Now lets talk about all the options you can change there: Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 62
62. 62. 4. Custom Logo - This is where you can upload a logo that youve made. It will be an image that takes the place of the text title and tagline you currently have. We will learn how to upload one after we create it in Step 10. 5. Custom Favicon - A favicon is the tiny icon you see on the tab of your browser window for website youre visiting. We wont be uploading one now. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 63
63. 63. 6. Responsive - A responsive website is one that adjust to the size of the browser its being displayed on. Whether it be a mobile, tablet or PC, it will look good on any device. Make sure you leave this option checked. 7. Header Search - By default, there is a search box and button in the header of the Pytheas theme. I recommend leaving this checked. 8. Exclude Header Image From Homepage - To be honest, I still havent been able to figure out what this option does. Just to be safe, leave this one checked. 9. Widgetized Footer - Widgets are small areas where you can add features to your site. In the next step, well put 3 widgets in the footer, so leave this one checked. 10. Sidebar Location - This option allows you to move the location of your sidebar to the left or the right of your content. Make sure you select the right. 11. PrettyPhoto Theme - PrettyPhoto is a plugin thats incorporated into the Pytheas theme. When you click on a photo, to display it at a larger size, it gets wrapped in a frame by PrettyPhoto. This option allows you to choose the theme you want for your frame. You can select any option you want here. 12. Slider Animation - This is a setting that will determine how the slider on your Home page transitions from one slide to the next. Any option is fine here. 13. Slider Show - If this box is checked, the slider will automatically change from slide to slide. If unchecked, the visitor will need to use the arrows on the slider to change to a new slide. I recommend leaving this checked. 14. Save Options - After you are finished changing the options on the General tab, youll want to save your changes before going to another tab. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 64
64. 64. 15. Reset Defaults - This will erase ALL configuration changes that youve made to the Pytheas theme and restore ALL defaults. Use with caution. Homepage As the title might imply, all of the settings that you change on the Homepage tab will affect the content and features on your Home page. Many of them are self-explanatory, but well go over them in detail just to make sure you know what they do. First, heres how you get to the Homepage options tab: 1. Log in to your dashboard by going to: yourwebsite.com/wp-admin. 2. Go to, Appearance > Theme Options. 3. Click on the Homepage tab on the left. Now lets talk about all the options you can change there: 4. Homepage Tagline - This is different from your site tagline and shows up only on the Home page under the slider. You can set your own Homepage Tagline, or delete everything in the box and go without one. 5. Homepage Highlights Title - This is the title that shows up right above the row of Highlights on the Home page. You can change or completely remove it altogether. Enter, What We Do in the text field provided. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 65
65. 65. 6. Show Recent Work - Your recent work is your latest Portfolio pieces. If you have this box checked, your most recent Portfolio pieces will show up on the Home page. Make sure this option is checked. 7. Recent Work Title - This is the title that goes right above you row of Portfolio pieces. You can change it or leave it blank. Enter, Recent Work in this field. 8. How Many Portfolio Posts - Allows you to specify the number of Portfolio posts you want to be displayed. We wont be adding Portfolio Posts, so you can leave this option blank altogether. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 66
66. 66. 9. Show Recent Blog Posts - As you may have guessed, this option will display your most recent blog articles. Make sure this option is checked. 10. Recent Blog Posts Title - This allows you to change the title thats displayed above the Recent Blog Posts section. Enter, Recent News in this field. 11. How Many Blog Posts - Later, you can specify how many blog posts you want to show. Again, the width will be adjusted based on the number you specify so that the posts will display across the full width of the page. Enter 4 in this field. 12. Save Options - Make sure to save any changes you make to the Homepage tab before moving on to another. 13. Reset Defaults - This will erase ALL configuration changes that youve made to the Pytheas theme and restore ALL defaults. Portfolio There is only one option on this tab, and its pretty unlikely youll use it. First, heres how you get to the Portfolio options tab: 1. Log in to your WordPress Dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Appearance > Theme Options. 3. Click on the Portfolio tab in the middle. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 67
67. 67. 4. Portfolio Posts Per Page - This sets the number of portfolio posts to show when you use the Portfolio template for your page. Templates are set when you create a page. Again, we wont be using Portfolio pages, so you can leave it blank. 5. Save Options - Make sure to save any changes you make to the Portfolio tab before moving on to another. Blog There are only 4 options on the Blog tab. These options will allow you to change the features associated with single blog posts. First, heres how you get to the Blog options tab: 1. Log in to your WordPress Dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Appearance > Theme Options. 3. Click on the Blog tab in the middle. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 68
68. 68. After you get there, youll find these four options. Make sure theyre all checked. 4. Featured Images On Single Posts - Featured images can be set for each blog post when you publish it. The featured image will then be used on the Blog page to go along with an excerpt, and also at the top of the single blog post. This setting turns the featured image off on the single blog post. 5. Author Bio - Your author bio information can be entered under, Users > Your Profile > Biographical Info. If you ll out that box, and check the Author Bio box here, your information will show up at the bottom of each single blog post. 6. Tags - Tags are a way of labeling and organizing posts with a label. They can be set on each posts page when you publish the post. If this box is checked, your Tags will show up at the end of each single blog post 7. Related Posts - Related Posts are posts that are found in the same category. If you have this box checked, a thumbnail and the title of other posts in the same category will be shown at the bottom of each single blog post. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 69
69. 69. 8. Save Options - Make sure to save any changes you make to the Blog tab before moving on to another. 9. Reset Defaults - This will erase ALL configuration changes that youve made to the Pytheas theme and restore ALL defaults. Social We also need to add your social icons so that your visitors can click on them; find your social profiles; and follow you. The social icons will be located in the menu to the right and will be visible on every page. First, heres how you get to the Social options tab: 1. Log in to your WordPress Dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Appearance > Theme Options. 3. Click on the Social tab in the middle. Now lets see how to add your social media icons: 4. Social - This checkbox will allow you to show or hide social icons in the menu bar. 5. Add your URLs for each of the social networks that you have a profile for. The format of your links should look like this: http://www.facebook.com/WebsitesMadeSimple http://www.twitter.com/WSMadeSimple Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 70
70. 70. 6. Save Options - Make sure to save any changes you make to the Homepage tab before moving on to another. 7. Reset Defaults - This will erase ALL configuration changes that youve made to the Pytheas theme and restore ALL defaults. CSS The CSS tab give you a text eld where you can enter any custom CSS that you have without having to mess around with editing CSS les. You wont need to add anything here now. First, heres how you get to the CSS options tab: 1. Log in to your WordPress Dashboard by going to: yourwebsite.com/wp-admin Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 71
71. 71. 2. Go to, Appearance > Theme Options. 3. Click on the CSS tab on the right. 4. Add your custom CSS to the text field. 5. Save Options - Make sure to save any changes you make to the Homepage tab before moving on to another. 6. Reset Defaults - This will erase ALL configuration changes that youve made to the Pytheas theme and restore ALL defaults. About/Support The About/Support tab provides links and information about the developer of the Pytheas theme. 1. Log in to your WordPress Dashboard by going to: yourwebsite.com/wp-admin 2. Go to, Appearance > Theme Options. 3. Click on the About/Support tab on the right. 4. Theme Credits - AJ Clarke from WPExplorer.com developed this theme, and hes done an amazing job with it. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 72
72. 72. 5. Support/Donation - If you like Pytheas, you should definitely check out some of the other themes AJ produces. If you pay $25 for this or another theme, youll get access to technical support when you need it. 6. Newsletter - Click the link to subscribe to the WPexplorer newsletter and receive guides, tutorial and other content. And with that last tab, were finished configuring all of the options available in our Pytheas WordPress theme. So lets go ahead and move on to conguring our plugins. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 73 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
73. 73. Step 9: Configure Your Plugins We now need to configure the plugins that we installed earlier. Most of those plugins are actually widgets that will be placed in the sidebar and footer. In total, we're going to have 8 widgets. 1. First, log in to your WordPress dashboard and then go to "Appearance" > "Widgets". 2. Then, drag and drop the following widgets from the left-hand side to the, "Blog/Archives" widget area. (See screenshot to the right.) Black Studie TinyMCE Wysija Subscription WordPress Popular Posts Categories 2. Also, drag and drop the following widgets from the left-hand side to the, "Footer 1 - Footer 4" widget areas. (See screenshot to the right.) Footer 1 - Black Studie TinyMCE Footer 2 - WordPress Popular Posts Footer 3 - Recent Posts With Thumbnails Footer 4 - Wysija Subscription Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 74
74. 74. 3. Click on the arrow in the upper right corner to open the Black Studio TinyMCE widget in the "Blog/ Archives" area. 4. Enter, "About The Author", or whatever you'd like, in the "Title" field for the widget. 5. Make sure to select the "Visual" tab to the right before entering the text. Open the Pytheas-Files folder again, and copy and paste the text from the About The Author Text.txt file. 6. Place your cursor at the very beginning of the text. This will ensure that when you add your picture in the coming steps, it will display in the correct place. 7. Click on the, "Add Media" button above. 8. Select the small avatar photo of me, or go to the Upload Files tab at the top and upload your own. (Make sure yours is around 65 x 65 pixels.) 9. In the, "Attachment Display Settings" section, use these settings: Alignment: Left Link To: Custom URL http://www.yoursite.com/about Size: Full Size - 65 x 65 10. Click the, "Insert Into Post" button. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 75
75. 75. 11. You should then see it show up to the left of your text in the widget. 12. Click, "Save" in the bottom right- hand corner of the widget window. Before moving on, just repeat the exact same procedure in Steps 3-10 for the Black Studio TinyMCE widget in the "Footer 1" area. 13. Click on, "Wysija" in the left-hand column. 14. Then click on the, "Thanks! Now Take Me To Wysija." at the bottom of the page. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 76
76. 76. 15. Click on, "Wysija" > "Settings" in the left-hand column. 16. Select the, "Forms" tab at the top of the right-hand column. 17. Click the, "Edit" link under the default form, Subscribe to our Newsletter. 18. Drag and drop the, "First Name" and "Random text or HTML" elements from the right-hand side into your form. 19. Mouse over the, "Random text or HTML" box after you've added it, and click on the, "Edit" link and add the text from the Wysija.txt in the Pytheas-Files folder. Then click, Done. 20. Click on the, "Save" button at the bottom when you're finished. The next step is to configure the, "Wordpress Popular Post" widgets. There is one in the, "Blog/Archives" widget area, and on in the, "Footer 2" area. The settings for each are a little different, so take note of the differences as outlined in the screenshots below. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 77
77. 77. First, open the two, "WordPress Popular Posts" widgets. One in the, "Blog/Archives" widget area. And one in the, "Footer 2" widget area. 21. Set the, "Title" for the widget to Popular Posts. 22. Enter the number for how many posts will be shown. In the footer widget, enter, "3". In the Blog widget, enter 10. 23. Set the, "Time Range" for, "All Time" or else no posts will show up at first. You can change it later as you accumulate posts and data. 24. Set the, "Sort posts by" to, "Comments" for both the "Blog/Archives" widget and the Footer 2. You can change this setting later after you accumulate views. 25. Select, "Display post excerpt" for the, "Blog/Archives" widget but not for Footer 2. You can change the, "Excerpt length" after you click "Save" down below. 26. Erase, "Page" for the, "Post type(s)" field so that only, "post" remains. 27. Check, "Display post thumbnail" for both widgets. You'll have to click, "Save" down below before youll be able to set the, "Width" and "Height". When they do show up, set them to "50px" each. 28. Check, "Display comment count" for the, "Footer 2" widget area, but not for the, "Blog/Archive" widget area. 29. Click the, "Save" button once again after you are finished changing all of the settings. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 78
78. 78. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 79
79. 79. 30. Important... Dont skip this step, or your website will look strange!! In order for your Popular Posts to show up in the sidebar and footer widgets, they need to have some comments. To add comments, just go to your Blog page, and then click through to each post individually. You can copy and paste the text in the Comments.txt file I provide in the Pytheas-Files folder, or just create your own. 31. Open the, "Recent Posts With Thumbnails" widget in the, "Footer 3" widget area. 32. Change the, "Number to show" to "3". 33. Click the, "Save" button in the bottom right corner. The very last step is to get rid of the Wordpress Admin bar that shows at the top of your website when you're logged in. You don't have to remove it, but I'll show you how just in case you ever want to deactivate it. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 80
80. 80. Here are the steps you'll need to take to get rid of it: 34. Go to, "Users" > "Your Profile" in the left-hand column. 35. Uncheck, "Show Toolbar when viewing site". 36. Scroll down to the bottom of the page. 37. Click the, "Update Profile" button. And that finishes up this section for configuring our plugins. That was pretty painless, don't you think? Youre website should now be complete except for the logo, which we will design in the next step. It should look just like the demo site you saw at the top of this page. If something looks strange, or different than the demo site, just ask a question in the forum and well be glad to help you fix it. Step 8: Congure Your Theme WEBSITES . MADE . SIMPLE 81 If you have any questions, please feel free to ask them in our forums and we'll be more than happy to help you out. Click Here To Go To The Forums
81. 81. Step 10: Design Your Website One of the easiest ways to improve the design of your site, is to employ a color scheme. A color scheme is nothing more than the choice of colors used in the design of your website. Using a color scheme will not only make your site look more professional, itll help establish your brand at the same time. Now, you might be wondering how you would go about developing a color scheme on your own. And the good news is that you dont have to. All you have to do is find a color palette that someone else has created and then pick the colors you want to use for your site. Where to Find a Color Palette There are quite a few places on the web where you can find color palettes, but only two websites that I recommend spending any time on: COLOURlovers and Adobe Kuler. Both offer essentially the same thing, and that is, thousands of predesigned color palettes, that you can use for free. So lets take a closer look at each service to find out what they have to offer and how you can go about using them. COLOURlovers COLOURlovers is a place where people create and share color palettes. There are over a million color palettes to choose from, which can make it difficult to find the exact one you like. Luckily, they have a really efficient sorting tool that will help you find the best color palettes to choose from. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 82
82. 82. Heres how you use COLOURlovers to find a palette: 1. First, go to COLOURlovers.com. 2. Then find the Browse link in the top left-hand corner of the page and click on, Palettes in the drop down menu. 3. Next, right above the, Browse Palettes click on MOST LOVED. That will sort the palettes and list the most popular ones first. 4. If you cant find what youre looking for, try sorting by, MOST FAVORITES. 5. If you have a specific color you want to find, use the search box in the upper right-hand corner to find a palette that will work with that color. 6. Once you find a palette that you like, mouse over it and click. 7. A new page will open that displays the colors individually. 8. In order to use on your website, youll need to copy the HEX code listed under each color when youre ready to use it on your website. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 83
83. 83. Adobe Kuler Adobe Kuler is another site where you can create and share color palettes. Im not sure how many palettes they have, but I get the feeling its not as many as COLOURlovers. That being said, Ive found some great color schemes there before, so its definitely worth checking out. Heres how to use Adobe Kuler: 1. First, go to Adobe Kuler. 2. When you get there, youll already be viewing the Most Popular palettes. 3. You can enter the name of a color youre looking for in the Search box. 4. When you find the palette you want, mouse over it and click on the Edit button. 5. A new page will open that will have the colors displayed individually. 6. For each color you want to use, youll need to copy the HEX code when youre ready to implement it on your website. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 84
84. 84. Here are just a couple of tricks Ive learned along the way that might be useful for helping you find your perfect color palette. Dont be afraid to only use one or two colors from the palette. You dont need to use them all. In fact, for the Pytheas theme, you only need to pick one main color for the menu background and links. You can mix and match colors from other palettes. Just make sure that they look good together. One way to do that is to replace the color you dont like with a similar color. For example, replace a lighter green with a darker one. Sometimes, if you have a specific color in mind that you really want to use, its easier to use the search function to find a color palette. For example, if you know you want to use green, then search for green or pea green or whatever shade youre looking for. Youll be surprised what comes up. You dont have to worry about the licensing associated with the palettes, as long as you dont present the whole palette exactly like its displayed on COLOURlovers. Using the individual colors in different places on your site is perfectly okay to do, even without attribution. Heres a link that talks more about it. How To Use Color On Your Website Okay, so even if youve decided on a color palette, you still need to know how to use the individual colors with the different parts of your website. There are seven basic areas where you can use color on your site. So first, well define those areas, and then give you a brief explanation of which types of colors might work best for each one. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 85
85. 85. Website Background The website background is the area around your content. My best piece of advice here is, stay away from bright colors for the background of your site. Why? Well, its a large amount of space, and a bright color can be visually overwhelming. Its best to use grey or very light colors (think pastels). You can also get away with more saturated colors for parts of your background, if youre using more than one color to cover the space. Content Background The Content Background is the main area of your site where all of the text and images go. Your content background should almost always be white. Sometimes a very light grey will work there too, but its very difficult to work with a colored background for the content area. Trust me, Ive tried it many times! It will cause many difficulties and its usually just easier to stick with white. Text I almost always use black or white for text, except in the case of hyperlinks (see below). So first, youll want to determine the color of the background your text will be shown on, and then select the opposite. For example, if your background is white or light grey, youll want to use black text. If your background is dark blue or green, youre going to need to use white text. Navigation Menu Its usually easier to incorporate darker colors for menus. However, light colors can work as well. Just remember, if you use a dark color for the menu background, youll have to use white for your text, and vise versa. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 86
86. 86. Links Youll always want to make your links a different color from the rest of your text so that they stand out and can be easily recognized as a link. Since text is so thin, it works better to use a bright color if you have one in your palette. Buttons Sometimes Ill use a bright color with buttons and often Ill try to coordinate it with the color Im using for my links. It seems a lot of people tend to use orange or green for buttons, but dont be afraid to try other colors that fit with your site. Logo Since your logo will be mainly made out of text, it usually works out best to use a fairly dark color. The other option is, if you have a dark background behind the logo, you can make your logo white to make it really stand out. And that about wraps up our discussion of color. You should now have a good idea where to find a color palette, how to pick one, and how to implement it on your site. Just remember that it might take a little time to find the right color scheme, but its well worth the effort because itll be something that permanently contributes to the design of your site and the strength of your brand. So, make sure to take your time and get it right the first time. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 87 Join the fun!
87. 87. Create A Logo For Your Website When most people think of a logo, they tend to picture some kind of graphic thats created and becomes associated with the name and branding of a company. As a result, we sometimes think that in order to create a logo for our own website, well need to be some kind of design genius that can come up with a cool design. But that idea couldnt be farther from the truth. If you think about some of the most famous brands in history, there isnt any kind of graphic associated with their logos. In fact, their logos only incorporate two things into their design. 1. Colors - Color is used for the background and the text as well. 2. Fonts - The companys name is written in text with a distinctive of font. Thats it! Thats how easy it is to create your logo. Pick a color and nd a font. If you dont believe me, lets take a look at a few examples. Sony FedEx Coca Cola Canon ebay Home Depot And the list goes on. Its even more common with website brands. Take a look at the Hufngton Post, Yahoo, Google, and so on. You can even take a look at my logo which only uses colors and fonts. All this to say that its actually extremely easy to create your own text based logo. And Im going to show you exactly how to do it, step-by-step. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 88
88. 88. The Tools For The Job First, well take a quick look at the tools youre going to need to create your own logo. And just so you know, these are all free. So you dont have to worry about any extra expense associated with this step. Heres are the 3 tools youll use: 1. COLOURlovers I introduced this website in the previous section, so you should already be familiar with how to use it. In fact, you should have already picked a color palette and decided on the color scheme for your website. Now all you need to do is pick the one or two colors you want to use with your logo. 2. Font Squirrel Font Squirrel is a site that offers free fonts that you can download and install on your computer. After youve installed the font you want to use for your logo, it will become available to use within your photo editing program, Pixlr. 3. Pixlr Pixlr is a free, web-based photo editing program that you can use to easily create your logo. Its kind of like Photoshop, but not quite as powerful. Which is ne, because we only need to use a couple of simple tools they provide. Now that you know which tools youll need, lets go ahead and get started creating your logo. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 89
89. 89. Step 1: Find a palette at COLOURlovers.com. There are three main steps with lots of little sub-steps that were going to take. But its really not that hard. Ill walk you through the process while I create a logo for my demo website, www.SimpleSampleSite.com. That way you can see exactly how its done. a. Think rst... I already know that I want to use something that goes well with the orange color used in the menu background. That color itself would be too bright for text, and wouldnt look good with all of the other orange on the page, so I need to nd a different color that goes with it. b. I head on over to COLOURlovers.com, and since I know the color I want to work with, I enter the HEX code for it in the proper search box. c. In the page of results, I spot the palette entitled, Shes a genius. I like the dark color because it matches the one used in the menu, and dark colors always work well for text too. d. I click on the palette and look at the colors. I really think the logo will look good with the elation color, and I might use one of the grey colors for the tagline. e. I copy the HEX code for elation by selecting it with my cursor and then doing Ctrl - C with my keyboard, for use in Step 3. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 90
90. 90. Step 2: Go to FontSquirrel.com and find a font. Its important to try to nd a font that somehow represents the theme of your site. It will help add to the strength of your brand and make your site look that much better. It may take a little trial and error before you nd something, but dont give up. Youll get it! a. Once at Font Squirrel, I select the Popular tab to see if I can quickly nd something that I like. b. I could also sort fonts by Classication or Tag by using the Find Fonts section in the sidebar. c. On that rst page, I see a font that I think goes well with the simple theme of my site, and click on BEBAS. d. I can then test the font to see what it looks like with my sites title by clicking on the Test Drive tab. e. I then enter my text in the eld provided, and select the size I want to view it at. f. Since I think it looks good, Ill click on the, Download TTF or Download OTF button in the upper right-hand corner. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 91
91. 91. g. When prompted, save the le to your computer. h. Unzip the le by double clicking it (Mac) or right click and select Extract All (Windows). i. Open the resulting unzipped folder. j. Double click the font le you want to install. k. Select the Install button when prompted. l. IMPORTANT: After you nish, make sure to close and re-open your browser. (All windows) m. And thats it, youre nished installing your new font. 3. Go to Pixlr.com and create your logo. a. Next, I head over to Pixlr.com and click on, Open Pixlr editor (Advanced). b. Then Ill select, Create a new image, and continue. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 92
92. 92. c. When prompted to enter the name and image size, Ill enter, logo for the name, and 370px for the width and 80px for the height, and then click OK. d. Ill then have a blank canvas where I can start creating my logo. On the left-hand side, you can see all of the tools that are available. Well mainly be using these three tools: Type Tool Paint Bucket Tool Color Selection Tool You can select each one just by clicking on it. e. The rst thing youll want to do is decide what color you want your background to be. I know mine is going to be white, so that makes it easy. Step 10: Design Your Site WEBSITES . MADE . SIMPLE 93
93. 93. f. If you want yours to be a different color, just select the Paint Bucket tool. g. Change the color to the one you want by going to the Color Selector tool. h. Then change the HEX code to yours. i. Then click, OK after youre done. j