How to Start a Blog - Step by Step Tutorial for Beginners

oh hey guys what's up in here from vlog we've been calm and welcome to be how to start a lifestyle blog tutorial now in this video I'm going to show you step-by-step how to set up your very own self hosted lifestyle blog now lifestyle blogging has become a billion-dollar industry and like I said in this video I'm going to show you step by step from start to finish how to create your very own unique and innovative lifestyle blog so if you can get your foot in the door now if you're new to my channel welcome and thank you for stopping by I create videos that help people build grow and monetize their blogs and if you find this video helpful I'd greatly appreciate it if you would subscribe leave me a comment below and let me know how this video helped you out but again like I said this video is basically a comprehensive blogging course I have over two hours of content that will walk you through from start to finish how to set up your very own self hosted lifestyle WordPress blog so with that being said let's take a closer look at what we're going to be making [Music] all right so I packed this tutorial with a ton of value but here are the main topics that we're going to cover in this video first you're going to learn how to set up your web hosting account using Bluehost web hosting next we're going to install the wordpress.org blogging software then we're going to install your free wordpress theme next you're going to learn how to set up your blog for success by installing plugins in creating a child theme for your blog then you're going to learn how to design a blog and create a truly unique experience for your users you're also going to learn how to use CSS to customize your blog's overall look and feel and I'm going to show you how to install an opt-in form and grow your audience with email marketing you're also going to create an online store and an e-commerce store front while implementing multiple revenue streams and then finally you're going to learn how to secure your blog and keep it safe from outside threats Plus as an added bonus you're also going to learn how to monetize your blog so you can start earning a passive income with your digital platform this is important because lifestyle blogging has become a billion-dollar industry and the sooner that you can get your foot in the door the quicker you'll be able to start generating revenue with your blog next let's take a closer look at what we're going to be creating in this tutorial what you're looking right now this is Olson and this is a free wordpress theme that we'll be using to build your lifestyle blog now it has some pretty amazing features out of the box plus it gives you a ton of flexibility whenever it comes to customization but we fast forward to the end of this video you can see what I'm talking about this is the final product and this is what your lifestyle blog is going to look like whenever we're done with this tutorial this is a fully functional website with blogging capability it also comes standard with some pretty amazing features for starters the home page allows you to present your content with a minimalist yet attractive feel the logo colors sidebar and footer are all easily customizable and can be built to match your particular brand now the blogging features include a two column layout that allows you to publish great-looking content and earn money at the same time this free theme lets you easily implement affiliate marketing campaigns Google Adsense promotions and you can even sell your own products from your blog I'm also going to show you how to set up an e-commerce store front so that you can develop another channel to sell display and market your products or the products of your affiliate from your blog the sky's the limit in this blog really gives you the opportunity to earn a passive income online now another bonus feature of this tutorial is that I'm going to show you three separate ways to easily change the entire look and feel this blog are using CSS and WordPress is new custom CSS module you'll be able to easily change the color of this beam whereas if you didn't use CSS you would have to pay for the premium version in order to change the color additionally I'm going to give you access to my CSS cheat sheet which saves you the headache of having to manually code everything yourself my cheat sheet lets you easily copy and paste the ready-made code and gives you the ability to customize every aspect of the scheme so that it fits your style and overall brand finally no blog is complete without having a way to build your following this theme allows lead generation capabilities and it can help you build and grow your email list and I'm going to show you how to set up your very own email marketing campaigns and install an opt-in form within your blog and this is the perfect launchpad for any digital business and it's 100% free plus I'm going to show you how to build everything you've seen so far step-by-step and one final note people nowadays are spending an increased amount of time on their mobile devices which means will expect your site to be mobile responsive and having a responsive design not only helps you meet and exceed these expectations but as of 2015 Google search expanded excuse of mobile friendliness as a ranking signal so if you want to get down on Google your blog needs to be responsive and as you can see this free theme is 100% responsive and it looks great too the user experience on the desktop is mimicked on any mobile device or tablet and the responsiveness of the these can assure you that you're meeting the mobile requirements of Google's search algorithm that's the great thing about WordPress they offer some pretty substantial layouts whenever you compare them to the premium themes on the market for example this premium theme is going for about $130 and that's just for the theme alone that doesn't even include the professional services to install the themes as you can see this company is charging you nearly $400 to do what I'm going to show you how to do in this very video plus this tutorial includes some web design and development aspects and many WordPress designers will charge thousands of dollars for custom design and development so if you think about it that's a savings of nearly $1000 if you follow my video and just do it yourself so with that being said let's get started all right now in this portion of the tutorial I'm going to show you step-by-step how to set up your very own self hosted wordpress blog using Bluehost web hosting I personally use both of these services for the majority of my web properties and just know that after this tutorial you're going to have an extremely powerful digital platform that will allow you to scale and monetize your blog very quickly now this tutorial will be taking you through my Bluehost affiliate link and all that means is that if you decide to make a purchase I'll earn a small commission but by doing so you're helping me keep my blog up and running and you're helping me provide for my family so for that I truly thank you Plus this link is an exclusive offer for WordPress users Bluehost has partnered with WordPress and as you'll see in a few moments this exclusive offer is packed with some amazing features for WordPress bloggers it really is a phenomenal partnership that they've been able to develop now one final note this offer comes with a 30-day money back guarantee so rest assured that you can get a full refund if you need to so with that being said let's start building your blog alright now in order to take advantage of Bluehost exclusive offer for WordPress users you have a couple options if you're watching this video on youtube just simply click on the blue host link within the show notes below and again that's an affiliate link or if you're watching this video on blog with been calm simply click on the resources tab in the menu at the top of the screen and this will take you to my resources page and as you can see I list all the tools and resources that I use on a daily basis that have helped me find success online now whenever you have some extra time I really encourage you to take a closer look at everything on this page but in this tutorial we're going to be setting up your web hosting account so to get started simply click on the try Bluehost button and as you can see this is a special offer for WordPress users by using my affiliate link you'll get a free domain name a free SSL certificate access to the one-click wordpress install feature and 24/7 technical support all for only 395 per month plus because this package is optimized for WordPress your web host servers come with proven performance reliability and functionality that will give your blog a strong foundation for long-term success Bluehost web hosting coupled with WordPress blogging software is by far one of the strongest blogging platforms available so to get started simply click on the green get started now button and that's going to take us to the select your plan page and as you can see you have three separate options here you have the basic plus and a prime plan and again this is all personal preference and your choice really depends on how you're running your blog or online business but for this tutorial we're going to be using the basic plan which allows us to host one domain I should also mention again that Bluehost gives us this domain for free which is pretty cool but if you plan on having multiple domains and websites then I highly recommend going with the Plus plan this allows you to host unlimited domains but again for this tutorial we're going to be going with the basic plan so once you've decide on what plan you're going to use go ahead and click on the green select button and that'll take us to the signup page where as you can see you have a couple of different options again on the left hand side of the screen is where you'll sign up if you don't have a domain name and then on the right hand side of the screen is where you'll sign up if you do have an existing domain now I should mention that if you're signing up with an existing domain there are a couple of extra steps that you'll need to do in order to transfer that domain to Bluehost however for this tutorial we'll be signing up with our brand new free domain name so if you have an existing domain you'll still follow along in this video but after you're done with the tutorial there are still a few extra steps that you'll need to do in order for your blog to be hosted with Bluehost luckily I've made a separate video that walks you through that entire process it's titled how to transfer a domain the Bluehost and you can access it in the show notes below this video all right so for this particular video we're going to be using our brand new free domain so on the left hand side of the screen under new domain just type in your desired domain name and as you're typing this in you'll also be able to find out if it's available by clicking the next button looks like it is available because it let us go through and this is going to bring you to the account information page and it's a pretty self-explanatory set up but this is where you'll enter your account package and credit card information now if you have a gmail or Google account you can bypass this part and just sign in with Google but for this tutorial I'm going to create a new account through Bluehost so I'm going to blur it out while I enter in my personal information but I wanted to take a second to reiterate why Bluehost is so helpful to the WordPress community and their users for starters Bluehost has a 24/7 WordPress support system in place so if you ever need any additional help or have any questions they're there for you they also have a one-click WordPress installation feature which we're going to be going over in a couple of minutes but this makes getting your blog up and running a cinch and they also offer a 30-day money-back guarantee so there are no questions asked if for any reason you're unsatisfied with the service you can get your money back and finally Bluehost is actually recommended by WordPress Bluehost and WordPress have worked closely together since 2005 to create a hosting platform that is ideal for running WordPress websites so honestly you cannot go wrong now the next thing you're going to do is select your package information and as you can see from the drop down menu you have a couple of different options here one thing to keep in mind about the pricing is that the longer the subscription the lower the monthly price so if you opt to purchase the 36 month plan your monthly rate will be cheaper than the 12-month plan but for this tutorial we're going to be going with the starter 12-month plan which is only 5:45 per month and once you've selected your plan you have the option of adding some additional features to your plan now these are 100% optional but I highly recommend that you at least select the domain privacy protection add-on reason being any time you purchase a domain your personal information is viewable on the Whois directory meaning anyone can find your personal information however with the domain privacy protection add-on that will keep your personal information safe and secure and will make it undetectable so it's totally worth the 99 cents per month in my opinion next I also recommend the Komodo positive SSL bundle now you already get the free SSL certificate by signing up with my affiliate link in this video but the Komodo positive SSL bundle gives you additional protection it's really a peace of mind thing and if you have the budget for it I highly recommend getting it but if you don't want to purchase any of the add-ons you can get your 12-month hosting plan for about sixty-five dollars per year that's an amazing deal and if you set your lifestyle blog up the way that I show you in this video you can easily make that sixty-five dollars back in less than a week your blog can literally pay for itself but for this blog I'm going to purchase the domain privacy protection and the Komodo positive SSL bundle with my hosting plan that's going to put me a little over $100 for the year but again my blog can easily make that back if I monetize it now another thing I want to point out is that Bluehost is extremely transparent with their pricing which is why I use and recommend them as you can see they display your price as you're deciding on which package to purchase this also gives you peace of mind and the upfront pricing assures you that there will be no surprises with your bill alright next you're going to select your payment option and enter your billing information you can either pay by credit card or PayPal which is pretty convenient but one thing I should mention is that you'll be billed annually and all that means is that you'll be billed once a year for your hosting plan and as you can see from my Bluehost email receipt let me pull it up real quick I purchased the basic 12-month starter plan that comes with the free SSL certificate and free domain name but I purchased the domain privacy protection add-on and my total cost was seventy seven dollars and twenty eight cents per year which comes out to six dollars and forty four cents per month that's less than 100 dollars to have your own website there are designed companies and freelancers that charge anywhere from 400 to $10,000 just to build a WordPress website we're going to be doing it for less than $100 that is unreal alright so once you've entered all the required information just go ahead and click the small box confirming that you've read and agree to the Terms of Service and then click on the green submit button next you'll see some special offers available from Bluehost now you do have the option to add these features to your hosting plan but for this tutorial we're just going to select no thanks the next page is the account confirmation section one thing to note is that Bluehost conveniently emails you all this information and as you can see from my confirmation email Bluehost provides all the specifics of my hosting account within this email so be sure to keep an eye out for it and always keep this information in a safe and secure location now the next thing you'll want to do is create a password for your account so go ahead and click the create your password button and then you'll be taken to a page where you'll manage your password and again you have a couple options whenever it comes to selecting a password you can either create your own or you can have Bluehost generate a password for you I recommend letting Bluehost generate your password so go ahead and click the suggest password button and as you can see Bluehost will generate a very strong password for you now again I highly recommend that you copy and paste this password in a safe and secure location like an Excel spreadsheet or separate file it's just a good idea to always have a backup of your passwords now I'm going to click suggest your password again so that I can create the password and blur it out that way thousands of people watching this video won't have my password alright and then once you have your password go ahead and check the small box confirming that you've read and agree to the Terms of Service and then click the blue Next button and once we've created our password let's go ahead and log into our account so go ahead and click the blue login button and we're in now what you're looking at is your Bluehost cPanel I like to think of this is home base for your website and as you can see there are a lot of great resources and features that come with your cPanel but for this tutorial we're going to be focusing on installing WordPress so in order to get started with WordPress simply click on the website tab at the top of the screen and then on the next page you'll see some of the other content management systems available however from my experience in the digital marketing space I always recommend WordPress if you're implementing a blogging platform so let's go ahead and click on the Install Now link in the WordPress section next you may see an intro to the Bluehost marketplace Bluehost has a partnership with mojo which is a wordpress theme and template company but we're not going to be using any of those products for this tutorial so go ahead and click the continue installation button next we're going like the domain for installation but before we install WordPress I want to point something out as you can see you have a few options whenever it comes to installing WordPress you can either do it yourself for free or you can pay them to do it for you I just want to reiterate that what you're learning from this free blog within blogging course other companies are charging $400 for the exact same information so hopefully by seeing this you can appreciate the value that I'm trying to provide to future bloggers all right so now that my public service announcement is out of the way let's install WordPress so next we're going to select a domain that we're going to install so go ahead and click on where it says domain and a drop down menu should appear now I should mention that you have a few options here the first is a temporary domain that Bluehost gives you this will look a little funky and I'll have different letters and numbers and it contains my username so I'm going to go ahead and blur it out but you can go ahead and ignore that domain directly below that you'll have the option of installing the WW or the non WWV version of your domain this is a personal preference but I'm going to select the dub dub dub version we want to create our file directory and since this domain is our primary domain go ahead and leave this field blank and then click the green Next button give it a couple of seconds to load alright last step we're almost there next we want to create our WordPress admin information now each field is required in order to move forward so let's go ahead and fill each one of them out so the first one is your blog's title so simply enter the name or title of your blog on a side note you can change this once you've installed WordPress so if you decide you want to change the title in the future you can easily do that next you'll create your WordPress admin username and this is going to be the username you'll use to log in to your WordPress dashboard quick tip make sure it's unique and try not to include the word admin within your admin username then into your admin email and this is where you'll receive emails regarding your WordPress account next you'll want to create your admin password now you'll have the ability to create a much stronger password once you fully install WordPress but for now I recommend creating a unique admin password finally check all three of the boxes and then click the green next button and give it a few more seconds to load and we're on our way now on the next screen you'll see that your WordPress installs begun at the top of your screen you have the ability to monitor the progress of the installation now this could take a few seconds all the way up to a few minutes but as soon as the blue bar at the top of the screen turns green you'll know that your install is complete now one thing I also want to mention is that Bluehost has an overall site progress bar showing you a percentage of where you're at in the overall building process you can ignore this because even whenever we're done installing WordPress it's still going to say that you're only 50% finished and that's because they would like you to use their WordPress themes now there's nothing wrong with their themes but we're going to be using our own theme for this tutorial so don't think that we're forgetting a step whenever it says that you're only 50% finished with your blog I can assure you that we're going to complete everything in this video so we'll give it a few more seconds and voila it's green and our installation is complete now in order to access your wordpress login information click on the view credentials link at the top of the screen and you'll be able to see your WordPress username and password now as you can see your WordPress installation is complete your login information is listed below all of this information will be emailed to you but it's a good idea to copy and paste it to a separate spreadsheet or file just to be safe now in a few seconds I'm going to show you how to login to your WordPress admin account this is the first step in actually creating your blog but before we do anything I highly recommend that you verify your email address with Bluehost and activate your domain you have 15 days to do this but if you forget for some reason your domain will be deactivated not cool so let's go ahead and take care of this before we go any further so Bluehost will send you an email after you've set everything up titled who is verification for your domain simply click on the green verify your email button and within a few seconds you should receive a notification that your email has been verified now if you haven't received this email within 24 hours just reach out to Bluehost customer service and they'll happily activate your domain alright so in order to login to our WordPress dashboard you'll want to click on the install location URL and this will take you to your WordPress admin login page now you'll notice that the URL of this page is a little different than your regular URL and that's because this page is what you're going to use whenever you log into WordPress now a quick way to access your WordPress login page is to simply add WP dash admin after your domain so anytime you need to make a change or update your blog you'll want to use this WP admin URL using this URL will redirect you to the login page and allow you to access the backend of your blog so with that being said let's login to WordPress so we're just going to use the username and password that was just given to us and click the login button give it a few seconds boom congratulations you are in you now have one of the most powerful and robust blogging platforms available what you're looking at right now is your WordPress dashboard and I like to think of this as being home based for your blog so anytime you want to make a change update or publish a blog post you'll do so through the WordPress dashboard now we're going to cover all this in the next section but for now you should be proud and excited that your blog is built on such a solid foundation now before we start making changes go ahead and click the I don't need help link because we're going to be doing it ourselves in this video and you'll get a much better view of the dashboard now it might look a little cluttered but you can easily customize this and move things around so with that being said let's move on to the next section of the video and make some adjustments to your blog so that you can set yourself up for success in this section of the tutorial I'm going to show you how to set up your WordPress blog for success not only will you be getting some hands-on experience with your WordPress dashboard but you'll also be laying the foundation for a successful blog now before we get into the nitty-gritty of building your blog there are a few house cleaning tips that I always recommend doing prior to publishing your first blog post these tips are merely recommendations and by no means do you have to set up your blog exactly like I do but for my experience these tips have been very beneficial to my blog's overall growth strategy and they've helped me achieve a much stronger blogging foundation in the process now in this video I'm going to walk you through those tips and show you the 7 things that I always do before I start a blog so let's take a closer look at what those seven things are number one change permalink settings this is where we'll change the permalink structure to something that's more attractive and more SEO friendly this will improve the aesthetics usability and forward compatibility of your links if you're shaking your head right now no worries we're going to cover it all in the video number two disable comments this tip is pretty self-explanatory and it's definitely a personal preference but I choose not to have to comment to my blog for a few different reasons and this tip will show you how to disable comments altogether however if you want to give people the opportunity to comment on your blog you can go ahead and skip this tip number three update Gravatar this is where we'll update the profile and image that will be used for your Gravatar account I'll get into the specifics of why it's important to have later on the video but your Gravatar is a key component to your WordPress platform number four delete unnecessary plugins WordPress pre-installed some pretty unnecessary plugins for example the Hello Dolly plug-in displays Hello Dolly song lyrics in the top right-hand side of your screen it's virtually useless and eats up space so this tip will show you how to get rid of those plugins that you're not going to use number 5 install recommended plugins now I always try to stay away from adding too many plugins to my blogs but there are a few plugins that I always recommend adding to your blog's infrastructure this tip will cover those plugins and show you what I always use before I start a blog number 6 update site title once again by default WordPress pre names your site and pre determines your tag this tip will show you how to personalize your site title and tagline so they coincides with your blog's content then finally change display name I'll show you how to change the way that your name is displayed whenever you author a blog post this gives you some flexibility whenever it comes to how your name is publicly displayed online so with that being said let's start with number one and change the permalink structure of your blog all right now in this portion of the tutorial we're going to actually learn our way around the WordPress dashboard and set up a strong foundation before we start putting content online now it's easy to get excited once you finally get your web hosting set up but a lot of people jump a gun and start publishing content without getting their digital foundation set up properly it's extremely important that we set ourselves up for success before we publish our first blog post so before we start publishing content online let's take a closer look at the WordPress dashboard and set a strong foundation for our blog so the first thing that we're going to do is reconfigure our permalink settings now if you're brand new to blogging you're probably unfamiliar with what a permalink is so let me give you a quick rundown of what permalinks are and why they're important by definition a permalink is a static hyperlink to a particular web page or blog post all it really is though is it's the URL of the content that you're publishing on your WordPress blog these are the links that you're going to be sharing with the world whenever you want to share your content and these are the URLs that people will enter into their browsers whenever they want to view one of your pages that's why it's very important for these links to be set up properly now the WordPress default permalink setting looks like this this is not very user friendly and it's horrible for SEO you want your links to be clean and optimized for search engines and the best way to do that is to have a URL structure that contains keywords so in order to change the permalink settings simply hover your mouse over settings and click on permalinks and this will bring you to the permalink settings menu now as you can see WordPress offers you the ability to create a custom URL structure for your permalinks now the permalink setting I highly recommend you use is post name this generates a short memorable and SEO friendly URL that's based off the title of each of your blog posts for example if your blog post is called learn to cook in five minutes the URL for that post would be Ben's blog video comm forward slash learn to cook in five minutes much better than the default setting that WordPress starts you out with so to change the permalink settings simply click on the post name circle and then click on the Save Changes button and that is change our criminally exciting let's take a look at it really quickly show you a quick example if we go to a sample post you can see here the post title hello world is now in the permalink structure so the link is now pings blog video comm forward slash hello world now if you take a look at this before and after example you can see the new permalink is a lot cleaner more user friendly and it's optimized for search engines next we're going to turn the comments off now I know a lot of people may disagree with me on this one and that's fine but I personally choose not to allow comments on my blog now if you want to give people the opportunity to comment on your blog that's totally fine just go ahead and skip this step but like I said I prefer to turn the comments off so in order to do that you're gonna have to go to your dashboard and click the turn comments on or off link and that will bring you to the discussion settings and this is where you can configure various aspects of the comments settings but for this tutorial we're simply going to be turning them off so uncheck all the boxes and click this bottom of the screen give it a few seconds and we're good to go perfect moving on let's update your Gravatar so real quick I'm going to go back to the dashboards just go ahead and click on the dashboard and that will bring you back to kind of the home base of everything all right perfect now updating and Gravatar if you're new to a Gravatar it's basically a globally recognized avatar it's an image that follows you from site to site appearing beside your name whenever you do things like comment on a post on a blog even if you've turned your comments off it's always a good idea to have a Gravatar to enhance your online presence and increase your brand recognition now real quick here's an example of my Gravatar and as you can see the Gravatar displays my image next to my comment Gravatar to help identify your comments on blogs and web forms here's how it works you basically upload an image and create your profile just once then whenever you participate in any Gravatar enabled site your Gravatar image will automatically follow you there Gravatar is a free service for site owners developers and users and is automatically included in every WordPress account so to see if you already have a Gravatar within your dashboard just go ahead and click on users and then click on your profile and then if you scroll down to where it says profile picture if a picture is showing then you have a Gravatar but chances are that you don't especially if this is your first WordPress blog but setting up gravitas on your site are very easy to do and like I said once you sign up once upload a picture any time you comment on any Gravatar supported blogs or websites your Gravatar comes along for the ride it's pretty cool so real quick to get started you're going to want to head over to gravatar.com and this is their home page for the service but again it's free go ahead and click on create your own Gravatar and this will bring you to the signup process now you are going to need to sign up for a free wordpress.com account but again it's free and I'm not going to walk you through the entire signup process because it's pretty self-explanatory but once you've created an account within a few minutes you'll have your WordPress Gravatar set up and ready to represent you across the web next we want to delete some of the quote unquote unnecessary plugins like I'm pre-installed with your WordPress blog now that's not to say that they aren't useful but for a lifestyle blog these plugins will just take up valuable space that could be better utilized for other aspects of your blog so on the left hand side of the screen and the dashboard click on where it says plugins and this will bring you to your plugin manager and this is where you can add delete and deactivate plugins on your WordPress blog now like I previously mentioned WordPress starts you off with some pretty unnecessary plugins so to get rid of these plugins and free up some space simply click on the deactivate link under each plug-in you want to get rid of check the boxes next to the plugins that you just deactivated and then from the bulk actions drop-down menu select delete and then click the apply button and you may see a final notification asking if you're sure that you want to delete them click OK and as you can see the plugins start to disappear one by one so long see ya and we're good next let's install the recommended plugins now like I mentioned in the intro I always try to stay away from adding too many plugins to my blogs but there are a few plugins that I always recommend adding now if you're new to the idea of plugins WordPress plugins are bits of software that can be uploaded to your blog their purpose is to extend and expand the functionality of your WordPress site and there are literally thousands of plugins to choose from but if you visit my resources page on blog with been calm which is what we're looking at right now you can get a much better idea of the plugins that I recommend for starting a digital business but for this video I'm going to walk you through the process of adding a few plugins so that you'll know how to install the plugins that you feel are best for your blog now before we start the installation process I recommend that you either follow along step by step or write the names of these plugins down so you can install them all at once at a later date before you start customizing a blog alright just start adding plugins simply click on the plug-in link within the WordPress dashboard and this will bring us to the plug-in management menu and to add a new plug-in just go ahead and click on that add new button at the top of the screen and this will bring us to where we can search through the available plugins now I'm going to walk you through the process of installing and activating the recommended plugins and then once they're all activated I'll show you how to configure them now as you can see we have the option of filtering our search by featured popular recommended and favorites and if you have some extra time I recommend browsing through those different plugins to get a better idea of what's available but again for this tutorial I already know the plugins that we're going to install so in the upper right hand side of the screen where it says search plugins let's type in the name of the first plug-in we're going to install so go ahead and type in contact form 7 and once the search results populate we'll see the plug-in now the contact form 7 plug-in allows you to display a clean and effective contact form on your blog it's an essential component to building trust with your audience and it's another effective way to grow your email list and again this is a free plugin so to install and activate this plugin simply click on the Install Now button and once it's installed you'll be able to activate it from the same screen so go ahead and click the activate button and then you'll be taken back to your plug-in management menu where you can see that the plug-in has been successfully added to your list and is activated alright let's add another plugin so go ahead and click the add new button again at the top of the screen and then once again in the search bar go ahead and type in huge IT catalog and this is the plugin that we're going to be using for our digital storefront and there it is so go ahead and click on the Install Now button and you're just going to follow the same steps as before and once it's installed click the activate button and we're good to go alright let's add another plugin click the add new button again and in the search bar this time we're going to type in jQuery pin and there it is this plug-in this is going to allow us to add Pinterest buttons to our images so that people can easily share our content on Pinterest perfect and activate it now once this plug-in is activated it's going to take you to the Welcome settings page feel free to check it out if you want but I use the default settings for this tutorial so we're all set with this plug-in for now so let's go back to the plugins click plugins same another plug-in click the add new button and this one we're going to type in the simple image widget in this widget this is going to allow us to easily add and configure the images within our sidebar now make sure that you install the simple digit image widget by sodaro I think that's how you say his name there are a lot of image widgets out there that are named the same thing but we're going to be using the one that's created by sodaro for this tutorial so go ahead and activate it perfect and let's add another plugin this time it's going the WP Instagram widget and again there are a lot of Instagram widgets out there they're named the same so be sure to install the WP Instagram widget by Scott Evans this plugin is going to give you the ability to easily present and showcase your latest Instagram pics within your sidebar perfect we're going to add another one add new there we go and in the search plugins type in Yoast SEO and this plug-in is probably one of my favorite plugins because it is a true all-in-one SEO solution for WordPress and it's going to help you build a blog that's optimized for the search engines I highly highly recommend this plug-in all right last one child theme configurator you can just start start typing in child theme config and there it is install activate this is going to allow us to build a child theme if you're new to the the idea of a child theme don't worry I'm going to walk you through the process in this tutorial but just know that this plug-in is a need to have all right we're all set moving on let's update the site title now again this is pretty self-explanatory the site title that is the title of your blog and WordPress starts you off with a pretty generic site title as you'll see in a couple seconds but let me show you what I'm talking about so if we go back to the dashboard and click on settings in general that's going to bring us to our general settings page and if you look at the top of the page you can see the site title and tagline default settings yours are going to say my site in just another WordPress site this is their very generic settings and you're going to want to change this so to do so go ahead and click on the text box and change your site title and tagline to something that coincides with your blog and then once you've created that site title and tagline go ahead and click the Save Changes bottom of the screen and you'll be good to go now again the site title is it's important because it's displayed in the title bar the web browser and it's also displayed in the header for most of the themes so always recommend changing the site title and tagline all right next we're going to change how our name is displayed on our blog and what I mean by this is whenever we first installed WordPress we were given the option of creating a user name now this user name is also used for our display name which is the name that's shown whenever we author a blog post not cool if you want the world to see your user name so whenever I say that we're changing the display name we're just essentially changing the way our name is displayed on our blog so the first thing you want to do is hover your mouse over users and then click on your profile and this will bring you to your profile settings where you have the ability to customize certain aspects of your profile one of them being how your name is publicly displayed so there are two things that I always change first I change the nickname and then the display name so on the left hand side of the screen next to where it says nickname I'm going to enter in the name that I want to use for my display name and then directly below that where it says display name publicly as simply select the nickname you just created from the drop-down menu then go ahead and scroll to the bottom of the screen and click the update profile button and as you can see the display name has been changed and now every time you author a blog post this name will be used instead of your user name alright the blog is now set up for success moving on in this section of the tutorial we're going to go over how to install a free wordpress theme to your blog now the right WordPress theme can go a long way in your blog success and this portion of the video will show you how to turn a boring layout into a sleek innovative in mobile responsive design so anytime you need to make a change to your blog you're going to do so through your WordPress dashboard and that's what you're looking at right now I like to think of this as being home base for your blog now in this video we're going to be installing a free theme so the first thing you want to do is hover your mouse over appearance and then click on themes and this will bring you to your theme management menu and this is where you can add new themes change your current theme and search for additional themes all from this menu now we're going to be adding a new theme so to get started simply click on the add new theme icon and this is going to bring us to the WordPress theme directory and basically this is where we can browse through the thousands of different themes that WordPress has to offer now if you look in the upper left hand side of the screen you can see that WordPress offers some filters to help you find that perfect theme this lets you break the themes down by featured popular latest and then there's also a feature filter section this is where you can get even more specific if you have a particular feature or requirement of your theme in mind it's a great way to filter through those themes and find exactly what you're looking for now another way to find a theme is to use their search function this works the same as any search bar and it's a great way to find a theme if you already know the name of it like we do so in the upper right hand side of the screen in the search bar where it says search themes just type in the word Olsen that's OLS en and that will bring up the search results and as you can see our theme is the first one but before you install any theme I highly recommend that you preview the theme just so that you can get a better idea of how it functions so to check out the demo simply hover your mouse over the theme and where it says detail and preview click on that and that's going to bring you to the demo of the theme now keep in mind that this is just a basic demo of what the theme can do and some of its capabilities but again this gives you a good idea of how the theme behaves and it gives you a good feel for the user experience as well now if you look in the upper left-hand side of the screen you'll see that each theme displays their user ratings in a short description which can help in the decision making process and as you can see this theme has about a five-star rating which is nearly perfect and good for us so let's go ahead and install this theme so simply click on the install button at the top of the screen and once it's installed that install button will turn into an activate button so go ahead and click the activate button and this will officially activate the theme and make it visible on your blog next let's go ahead and check it out so in the upper left hand side of your screen hover your mouse over your blog's name and then click on visit site and as you can see the new theme is ready to go congratulations you now have a theme that will allow you to harness the full potential of the wordpress blogging platform but we still have a lot of work to do next let's customize this theme and turn it into a digital work of art all right so the first part of the design process is configuring the plugins we just installed reason being is that they play a big part in how our blog is presented online plus by configuring your plugins it will allow you to have a much more efficient and secure digital platform for starting a blog so the first plug-in we're going to configure is the Akismet anti-spam plugin this plug-in checks your comments and contact form submissions against their global database of spam to prevent your site from malicious content simply put the Akismet anti-spam plug-in block spammers from commenting on your blog so to get started simply go to the plugins menu click plugins on the left hand side of your screen and activate the Akismet plug-in so under where it says a kismat anti-spam go ahead and click the activate link next you'll need an api key in order for the plug-in to connect to your blog so go ahead and click on the Akismet setting page link and you should see it towards the end of the description there you go and this will take you to the equipment account settings then you get your API key click on the get your API key button and you'll be taken to the Akismet home page next click on the get and API key button again and then you may see a pricing table but don't freak out you can get the free version so to do so simply click on the get basic button and then in order to access the API key you'll need a wordpress.com account again this is a free account so go ahead and sign up I'm not going to walk you through the process it's pretty intuitive but if you already have an account just go ahead and sign in so we're going to login then at the subscription page you'll have the option to donate to the creators of the plug-in now if you do have the means to do so go ahead but for now I'm just going to slide this all the way to the left so that it says $0 and we'll get it for free and then click the blue continue button there we go and then on the account overview page click the activate this site link and within a few seconds our API key should be updated and ready to go perfect so go ahead and click the blue Save Changes button and the Akismet plug-in is now protecting your site from spam moving on next let's set up the child theme configurator alright now we're going to create a child theme this is by far one of the most important aspects of building a wordpress blog because it can save you a ton of time and headaches due to the updates that are made to the parent theme now if you're new to the concept a child theme is a theme that inherits the functionality of the parent theme which is the initial theme we just installed a few moments ago and that's also in light now the reason that a child theme is so important is because it allows you to modify or add to the functionality of a parent theme it's hands down the best safest and easiest way to modify an existing theme because instead of modifying the parent themes directly you can create a child theme and override them within that child theme so here's a quick example of why you should have a child theme now if you don't have a child theme every change that you make could potentially be lost whenever there's an update to the parent theme by the developers but with a child theme your changes are safe and you'll still inherit the functionality of the parent theme basically if you're going to be customizing your theme which we are then you need to have a child theme now there are a few ways to go about creating a child theme but for this video we're going to go with our trusty plugin the child theme configurator the super light plug-in makes creating a child theme super simple all right so to get started go to tools and then click on child themes and this will bring you to the settings page and one thing I love about this plug-in is that they recently made an update that streamlines the process and makes it super easy to go through and understand all right so the plugin it does a really good job of visually walking you through the process as you can see they have numbered circles outlining each step so step one select in action so we're going to be creating a new child name so that's the action we're going to be taking so make sure that that first radio button create a child theme is selected next step number two you'll want to select the parent theme that you're going to be using to create the child theme so make sure that it says Olsen light and it does next click the analyze button and this new feature does a ton of the heavy lifting and sets up the theme settings for you now once the plug-in is done analyzing your theme you should get a notification and a green checkmark letting you know that the theme is okay to use as a child theme and there it is perfect next you'll see that a bunch of other steps have opened up below if you scroll down to step number seven and click on the child theme attributes button you'll have the ability to update how the attributes are shown in your theme menu and this is where you can change the name author a theme description etc of that child theme if you want to next step number eight copies any menus widgets and other customized settings that the parent theme has now we haven't made any changes but I'm going to check the box just to be safe next I want to create the child theme so click the Create new child theme button and voila we now have a child theme super simple you should see a couple of green check marks underneath step number two they're both there that means all as well then before we activate the child theme we'll want to preview it to make sure everything looks normal so at the top of the screen click on the preview your child theme link and then you'll be able to view the new theme in action and everything looks great now obviously we need to add stuff and we're going to do that later but let's save this so go ahead and click on the save and activate button at the top of the screen perfect and then once it's saved click the X to X out now before we do anything a little further on the tutorial we're going to make a change to the code within the single post of the blog so if we want our changes to be permanent we're going to need to add those files to the child theme so the next thing you need to do is to click on the file tab at the top of the screen and under the parent template section check the box next to the single dot php' section and that's just the single post PHP file this means that you're going to be including the file within the child theme and any changes you make to this file will be permanent so check the box and the copy selected to child theme button and we're good perfect and we're all set file has been copied now you do have the option to change the child theme files or upload a new child theme image if you want but for this tutorial we're just adding the functions and the single dot PHP files to the child theme so let's do a quick audit go ahead and go over to appearance and click on themes and there it is perfect the child theme has been activated instead of the parent theme that's what we want next let's double double check and make sure that the correct files have been transferred to the child theme so hover your mouse over appearance and click on editor and this will bring you to the theme file editor and as you can see the correct files have been transferred to the child theme and are currently activated we have our functions single in our stylesheet perfect our child theme is activated and ready to go moving on alright so the next two plugins on the list of the contact form 7 and the huge IT product catalog and we're actually going to configure those plugins as we use them later on in the video so we can skip setting them up for now and move on to the jQuery pin it button for images plug-in that's a mouthful alright so this plug-in lets us create a Pinterest share button that displays in the images within our blog it's a great way to expand your blog's reach and it allows your content to be much more shareable which is always a good thing so I recommend leaving everything as is but you do have the ability to configure the plug-in so if you click on the Settings link underneath the name of the plug-in you should see the option screen now it looks like a lot but we're only going to be concerned with the visual features for now but if you have some more time check it out so go ahead and click on the visual tab at the top of the screen and if you scroll down to the pin image section you can see that you have the ability to change how the button looks on your images you also have the ability to change the padding and the transparency of the hover effect but I'm going to go ahead like I said and leave everything as is but let's take a closer look at what it looks like and as you can see the Pinterest share button appears on our blog post images and it gives our readers the ability to share our content across a very powerful social network love this plug-in all right moving on alright so let's go back to our plugins management page so go ahead and click on plugins on the sidebar and the next two plugins on the list are the simple image widget and the WP Instagram widget now their default settings are good as is so we can leave them alone and move on to our final plug in the Yoast SEO plugin so the Yoast SEO plug-in is one of my most highly recommended plugins and it's helped my blog rank in the search engines best of all it 100% free so first things first we need to configure it so go ahead and click on the Settings link underneath the Yoast SEO and if this is your first time using the plug-in you should see a few notifications the first one we're going to worry about is the configuration notification so go ahead and click on the plug-in link under the notification section and it should say since you're new the us SEO you can configure the plug-in that should be a link and this will bring you to the Yoast SEO configuration wizard now the following steps will help you configure your SEO settings to match your blog's needs now Yoast does offer a paid configuration service that does this for you but I'm going to walk you through the process step-by-step save you some time and money alright so the first thing that they're going to ask you to do is to sign up for their newsletter obviously this isn't required but I got to say that after being a subscriber for the past few years their newsletter is pretty helpful so if you think that it's something that you may use or even enjoy go ahead and sign up for it here if not go ahead and click the next button next is the environment section and this particular phase of the configuration process is determining which quote-unquote stage your blog is in so since we're running a live site with real traffic go ahead and select production and click the next button next is site type and this is pretty obvious you'll want to select blog and click the next button next Yoast is trying to determine whether or not you're a company or person so if you're a person obviously select person and type in your name and if you're a company so the company and type in the name of your company and add your logo and click the next button profile so go ahead and add all of your relevant social profiles so that Yoast can let the search engines know about your social networks and enhance your social metadata and click Next when you're done with that next is post type visibility and unless you have specific requirements I recommend leaving this as is and click the next button next is the multiple authors section pretty self-explanatory make your selection and click the next button right next is the Google search console section and this is where you can connect your search console account with the Yoast SEO plugin this is a very powerful option and if you have a search console account setup I highly recommend doing this step but since we're just getting set up with a plug-in go ahead and skip this one you can always come back and connect your accounts later on so go ahead and click the next button again and now we're at the title settings and this is where you can change the website name that Yoast will display to the search engines and the symbol it will use as your title separator I like it as is so I'm going to click the next button but again you can adjust it there and Congrats success our Yoast SEO plug-in has been configured but there is one more advanced setting that I want to go through before you start bragging to your friends so go ahead and click the close button all right so the last thing we want to configure is the site title for the home page and that's because we're going to be making some adjustments to the blog later on in the video that affect the site title and the u.s. SEO plug-in will override those settings and keep them consistent throughout the site so in the Yoast main menu click on the features tab at the top of the screen and then under Advanced Settings pages check excuse me click the enable button and then click the Save Changes button and then you should see some additional options up here in the sidebar to the left of the screen next click on the titles and metas link and click on the home page tab and this will bring us to the home page title and meta template and this is where we can set how the search engines present the title of our blog and the metadata and this is where we can determine how the title looks if the tabs are opened on various browsers so since we're going to be making some changes later on that will affect the title we'll go ahead and set our home page title template so that the search engines will display everything correctly so in the template field I'm going to type in the title my blog followed by a hash and then the tagline and then I'm not going to waste your time and type in the meta description but I do recommend doing that perfect then go ahead and click the Save Changes button and our title and tagline we created and just plug in our showing up on the browser tabs and we're good to go all right now the fun begins this is where we get to customize your blog and make it a unique work of digital art now I know I say that a lot but this is one of the main reasons why I recommend WordPress over other companies like Squarespace and Wix is you actually get to customize the theme now WordPress gives you the freedom to customize and manipulate the site so that you can literally make it anything you want so for starters let's begin by updating the logo to something that fits our brand so what if you wanted to have a more custom logo something that stood out and drew attention to your site now if we fast forward real quick you can see the custom logo that I made for this blog has unique feel and it looks a lot different than the standard site title of this theme now you can either pay someone to create a logo for you or you can do it yourself for free I like saving money so let's make it ourselves and I'll show you how right now so one way to make a great-looking logo is to use creative font if you go to dafont.com you can access literally thousands of creative fonts for free now keep in mind if you plan to use this font for commercial use you may need to contact the author of that font before doing so but like I said - font has a ton of awesome fonts to choose from so once we find the font you like simply click on the download button alright and once it is finished downloading go ahead and open up the downloaded file and then you're going to want to find the TTF file and it's this font is called return to sender so I'm going to open up the return to sender TTFN and font is ready to go so once it's open go ahead and click the install font button to install the font and now any application that uses text will have this specific font as an option like Microsoft Office or some sort of graphic design software and speaking of design in order to make a logo using this new font you'll need to have some sort of graphic design software a lot of people use Photoshop but I use Pixelmator which is what you're looking at right now basically does the same thing and it's a lot cheaper now I'm not going to walk you through the process of making a logo but I wanted to give you an idea of how to get resourceful whenever it comes to designing a logo for your blog alright now that we have our new logo let's add it to our blog and I want to show you how easy this is to do now this particular theme has a spot for your logo at the top of the page and at the bottom if we scroll down you can see it right there so the first thing we want to do is to click on customize at the top of the screen and this is going to start the process of changing the logo and this will bring up your theme customization menu and any time we need to make some tweaks to our theme we're going to do so through this menu now to change the logo go ahead and click on site identity and this will give us the ability to change a few things within our blog for now we're just going to be focusing on changing the logo so as you can see this theme starts you out with the default image of the themes name now we definitely want to change that so go ahead and click on change image button and this will bring us to our media library this is where we're going to upload and store the images that we're going to be using on the blog so to add an image simply click on the select files button and find the logo that we just created go ahead and open that file and that's going to add it to your media library then make sure that it's selected you can see the blue checkmark and then go ahead and click the choose image button and there we go the logo is now uploaded looks great other cool feature this theme is that it offers the ability to adjust the logo padding you can easily add some white space below or above the logo if you think it needs some additional spacing I like it how it is so I'm just going to leave it now before you publish it there are a few other tweaks you can make for starters the tagline is still showing beneath our logo now this is just a personal preference but I don't like the tagline showing below this logo so let's go ahead and delete it there we go and the tagline has disappeared and don't worry about the tagline not showing up in your browser's tabs or the search engines after we just deleted it if you remember we've already adjusted that within the Yoast SEO plugin so deleting the tagline for now is it's totally fine next to the footer if we scroll down you can see that the Olson logo is still being displayed at the bottom of the screen you can either replace it with a new logo or delete it I'm just going to remove it for now so go ahead and click the remove button and there we go the default logo is disappeared and it's been replaced with the site title all right so everything looks good we got our logo in the top of the page and in the footer so go ahead and click the save and publish button and that's going to push our changes live and then we'll go ahead and exit the menu so click on the X in the upper left-hand side of the screen there we go now there's one more thing I want to change and if you notice this theme displays its own credits below the footer we scroll down you can see what I'm talking about again there's nothing wrong with this but for branding purposes I want to remove it so to remove those credits in the footer we're going to go back to the customize menu so click on the customize link the upper left-hand side of the screen and then click on footer options there we go and then go ahead and uncheck the box that says show credits text that's going to remove that those credits in the footer voila the credits are gone so to make our changes live just like before go ahead and click the save and publish button and we're good to go let's X out of this get on the menu alright moving on next let's add a favicon or as WordPress calls it now a site icon to your blog now if you're unfamiliar with what a favicon or a site icon is a favicon is the tiny image that web browsers use to help distinguish between webpages and if we take a look at the top of the screen you can see what I'm talking about these images in the tabs are favicons they're great for branding efforts and they help people navigate online initially some browsers and mobile devices will display a larger image like the Safari browser which is what we're looking at right now this site icon that we're going to be creating will also be used as a browser and app icon for your blog so that's why it's important to have a site icon for your branding efforts so to add our icon once again we're going to go ahead and click on customize to open up the customization menu and then go ahead and click on site identity and towards the bottom you'll see the site icons section and this is where you'll add your image for the icon but before you choose your icon image keep in mind that WordPress recommends that you use an image that's at least 512 pixels wide and tall that's because the image will be used for your favicon and app icon now if you're wondering how you're going to create this image yourself don't sweat it just head on over to canva.com and you'll be able to easily create a custom favicon very quickly this website can help you create sending graphics with their free design software and I use them all the time but for the sake of time I'm not going to walk you through the entire process of creating a favicon but canva com is definitely an awesome resource that will help you with some design for your blog plus it's free and I'll put a link to the site below the video all right so to add the image you're going to use for your site icon simply click on the select image button and again this will bring us to the media library and click on the upload files link and then click on the select files button and once we find the image and open it there it is again make sure that it's selected with the blue checkmark and click the blue select button and then go ahead and click the Save & publish button to push our changes live and as you can see the image I just uploaded is now being used for the favicon looks great looks a lot more professional alright moving on the next thing we want to do is configure our blog by adding additional pages in creating a primary menu if we fast forward to the end of this video you can see what I'm talking about having a primary navigation menu with separate pages allows you to diversify your content and it helps your visitors to navigate through your blog sound like good for the user experience but it's also good for SEO so the first thing we want to do is to delete the sample page and then create new pages that we're going to be using for our primary menu and as you can see WordPress starts you off with the sample page to help you visualize what content will look like but we want to get rid of that so to delete it in the upper left hand side of the screen I'll be your mouse over the site title and click on dashboard and this will bring you to the backend of your WordPress dashboard and then go ahead and click on where it says pages and this will bring us to our pages menu so to delete the sample page simply hover your mouse over where says sample page and click on the red trash link and this will move that page to the trash and remove it from the primary nav all right so you should get a little notification saying that's been moved to the trash perfect and let's go ahead and view our changes so hover your mouse over the site title in the upper left-hand side of the screen in click on the visit site link that will bring you back to the blog and looks good as you can tell the sample page has been removed and it's no longer in the primary nav all right next we're going to add new pages to the blog and there are a couple ways to go about doing that the first way is at the top of your screen if you hover your mouse over the plus new icon and then select page from that drop down menu that's going to let you create a new page or if we go back to our WordPress dashboard click on dashboard you can hover your mouse over pages and click on add new and that will allow you to create a new page as well all right so right now what you're looking at is WordPress is visual editor this is the same editor that you'll use for your blog posts and it's commonly referred to as a WYSIWYG editor which stands for what you see is what you get and thinking behind the acronym is that whatever you type in the content area will be what you see on your blog but we'll cover that in a few minutes now the concept is fairly straightforward you have a title section where you enter the title a Content section where you'll enter the content below you'll see vos SEO plug-in if you've installed it then we have our publishing options page attributes and a section for a featured image so now that you know your way around the visual editor let's create our about page so the first thing we want to do is we want to give our page a title and since this is our about page we'll just go ahead and type about in the title section at the top of the screen there we go and as you can see the Yoast SEO plug-in has already begun to take care of our Google's snippet for us and keep in mind this is the snippet that will show up whenever people search for your page in the search engines and whenever you have some more time I encourage you to edit the snippet and add specific descriptions for each page but for this tutorial we're just going to focus on creating the pages now we're not going to be adding content to the pages just yet we're simply creating them so that we can add them to our primary menu once we have all of our pages then we'll worry about adding content all right so one you name the page let's go ahead and publish the page and like I said we'll add content to the page once we've set up our nav menu so just go ahead and click the publish button and our page is now live so next we're just going to follow the exact same steps to add additional pages so our next page that we want to add is the shop page so we'll go to pages and click on add new and again add the title since this is our online storefront I'm going to call it shop and click the publish button and the next page I'm going to add is a contact page so again under pages click add new and for the title I'm going to call this contact I'm go ahead and publish it and once we've added our pages let's go ahead and go back to the home page so hover your mouse over the site title and click visit site and as you can see the Olson theme conveniently adds the pages to our primary nav menu now if you're ok with the layout you can skip the next part of this tutorial but I don't like the order of this menu so with the help of WordPress a little CSS magic I'm going to show you how to reconfigure this menu so the next thing we want to do is we want to create our primary nav menu so the first thing we want to do is access the menu management page so at the top of the screen go ahead and hover your mouse over your blog site title and then click on menus from the drop down menu it should be the last one there we go and this will bring you to your menu management page and this is where we can add pages to a menu change menu structure settings location do a lot of cool things so this is home base for building out your different menus so let's create our new primary nav menu so where it says menu name we're just going to type in a name for this menu I'm going to call this primary menu and then click the Create menu button and now we can start to really configure the settings so the next thing we want to do to start building the menu if you look on the left hand side of the screen where it says pages go ahead and check the boxes next to the three pages that we just created to add it to the primary nav menu all right so we got our three pages but what about a home page option I like to get my visitors away back to the home page within the nav bar and due to how this blog stream is set up the home page is our main page so we're not going to create another home page we're just going to create a link to the home page and add that to our menu so to do so click on the custom links tab and then where it says link text go ahead and type in home and this will be what appears in the primary nav menu then type in the URL of where you want this part of the menu to take the visitor and we want the we want this to take the visitor back to the home page just simply type in your primary domain name so that URL is going to be the domain that you got from Bluehost for free so let's it's all set up go ahead and click the Add to menu button and there we go we now have our four pages perfect next be sure to check both the main menu and the footer menu display boxes this ensures that your menu will be shown on both places of the page then once it's all set up go ahead and click the Save menu button and if we visit the blog over your mouse over the site title click the visit site link and then as you can see our primary menu is up and running but like I said a little earlier I don't like the order or the location of the menu so let's keep working on this menu and let's go back to our menu management page so in order to do that in the left-hand side of the screen hover your mouse over site name and then click on menus from the drop-down menu and then to change the order we can easily drag and drop the pages within the menu structure keep in mind that the page at the top of the list of the menu will be the first option on your blog's primary nav menu so we're just going to move these around a little there we go move the shop up one all right and once we have our pages in order just go ahead and click the Save menu button and again let's visit the site so hover your mouse over the site title and click visit site and as you can see the pages within our primary nav menu are now in the order that we want we have the home page on the Left followed by about shopping contact looks good right next let's add a little bit of CSS magic and adjust the menu with CSS so what if you want to actually Center the menu and that's where CSS will come into play and I'm going to introduce you to CSS in a few minutes but with the help of the code we can easily manipulate different aspects of our blog one of those being how the menu is displayed the only caveat to this step is that we have to put the menu back to its original order before we do anything with CSS so before we customize the CSS we need to put them in you back as it was so if you want to Center the menu just go ahead and revisit the menu management page so again click on menu and we're going to drag and drop those menu items back to their original order and again we're just revisiting what where we were earlier and reversing that order so that the homepage will be on the bottom and so on so home about shop contact perfect so once you place the pages back in order go ahead and click the Save menu button and if we visit the site again the order of the menu should be reversed all right perfect so next we want to add our custom CSS to magically move and display our menu to the center of the page now if you're new to CSS CSS stands for cascading style sheets and it's a style sheet language that's used for describing the presentation of a document RIT in markup language yikes nerd alert simply CSS is computer language or code that allows more flexibility and control over things like layout colors fonts and things like that for your blog and one of the great things about WordPress is that they've included a CSS module in the most recent update that allows you to easily add customize and just really play around with CSS right from your blogs customize menu now if you have zero experience with CSS no worries I've created a CSS cheat sheet that will allow you to make some pretty cool changes to this blog all you have to do is copy and paste this ready-made code within the Google Doc and add it to the additional CSS module in WordPress and you'll be good to go so to access my cheat sheet if you're watching this on YouTube just simply click on link below the video let's marked CSS cheat sheet and if you're watching this on my blog you can access the link within the content either way the link will take you to a Google Doc that outlines all of the different CSS cheat sheets that you can use on this blog either way the link will take you to a Google Doc that outlines all the different CSS cheats that you can use on this blog so the first thing we're going to use is the primary nav menu CSS so to get started simply copy the first few lines of code on the cheat sheet so once we've copied that code we're going to go back to our customization menu so in the upper left hand side of the screen hover your mouse over customize click on that and again that's going to open the customization menu and then we're going to be adding that CSS to the additional CSS module so the bottom of the menu go ahead and click on that additional CSS link and that's going to open up the module and this is where we're going to copy and paste that CSS code from the cheat sheet within this module so go ahead and you can remove this text that's already in there and paste the code and as you paste it you should see the CSS changes take effect and as you can see the menu has magically moved to the center of the page looks great now I also added some CSS within this section that will allow you to change the font size so if we look at the code that we just added by default the font size starts out at 11 pixels but with CSS we can easily adjust that to make it larger or smaller so as you can see we change it from 11 go 20 pixels and you can see that the menu size will change with what we input within the code so it's a very powerful tool and a very very cool thing that we can do to change the entire look and feel of our menu and again just to reiterate the fact of how powerful CSS is if we move just a few lines of the code you can see that that menu shifts all the way back to the left and if we add it it goes back to the center CSS is a very powerful tool on a very powerful skill set to have and adding CSS to the CSS module WordPress gives you that flexibility to really do some cool things with your theme all right so let's push these changes live so in the left hand side of the screen go ahead and click on the Save & publish button and this will save those CSS changes and make the changes live and once it's saved go ahead and click the X to X out of the customization menu alright and looks good our menu is now centered and also in the footer looks great all right one more thing that I want to point out if you go back to the CSS cheat sheet Google Doc you can see that I have some things that are highlighted in red now these things are things that you can change such as the font size and the colors of certain aspects but everything else within the code should remain untouched and we'll cover this in greater detail in a few moments but I just wanted to let you know why some things were read within the cheat sheet all right moving on next let's configure the sidebar now one of the many reasons why I recommend the Olsen theme is because of the sleek and minimalist design plus each page has a two column layout that can be easily customized to your liking on the left side is where you add the content on the right side is our sidebar this is where we can add various widgets links and images and keep in mind that the content on each page will be different but the sidebar remains the same throughout the entire blog so first things first let's start customizing our sidebar so to do so click on the customize link and again this will bring up our customization menu and click on widgets and then from the next menu click on blog and then this is where we can adjust the layout of our sidebar now as you can see WordPress pre-configured our sidebar but we can easily change that so to change the actual elements of the sidebar just go ahead and click on the tab of the widget that we want to remove and that will open up a drop down menu and then go ahead and click on the red remove link and voila as you can see on the right-hand side of the screen we've removed that widget from the sidebar so next let's remove a few more widgets and again this is personal preference but I'm going to remove the recent comments widget so open that up and click remove I'm also going to remove the archives widget so I'm going to click on it and click remove there we go and we'll leave those two for now but again this is personal preference and if you want to remove every single widget go ahead and open up the tab click remove and you'll be good to go alright next let's add a widget so I want to add a specific widget and customize the sidebar so to do that go ahead and click on the add a widget button and then select the widget from the menu that you want to add so we're going to be adding the about Me section so we'll select the theme about me widget and I'm left hand side of the screen it should open up the customization settings so first thing we want to do we want to give it a title so I'm going to call this hello and then below that we want to add an image this is going to be the image that pops up typically like a profile image or a picture nice picture of your face so again let's add the image so click the upload files link and then click files the select files button and once we find our image go and open that up and click the use the file use this file button on the right hand side of the screen that's going to add the image to the widget perfect and then right below that there's a check box too that will actually change how the image is viewed to a round circle so I'm going to keep that selected so it looks circular and round looks good then below that there is a text box where we can add some text I'm not going to type something out I'm just going to add some dummy text but again this will be where you'll give a brief introduction of yourself and I'll just show up right below the image so I'm just going to paste that you can see what it looks like there you go you get the idea and then right below that there's a field that lets you add a little sign-off so I'm just going to say Cheers but you could say something like love xoxo whatever there we go and then finally we can add a signature but one really cool feature is that instead of just text we can add an image now I've already created a signature using dafont.com and then I turned it into an image so I highly recommend that you do that or you can you know there are some software tools that you can use actually write out your signature but this is a quick quick and easy win so I'm going to find that image right there that I made using the font calm upload that file boom there you go we have our signature image looks good we have a professional and unique looking signature so once we're happy with it go ahead and click the save and publish button just to to push those changes live and it looks pretty good but what if we want to change the location of the about me blurb well first thing we need to do is click the close link below the widget and then drag and drop the widget to where we want it to be located within the sidebar and I want it to be the first thing that people see on the sidebar so I'm going to drag it to the top and once you place it where you want looks good go ahead and click the Save & publish button in the upper left hand side of the screen and this will push our changes live and perfect looks good sidebar looks great so far alright next let's create a way to create email addresses on our blog by implementing an opt-in form next let's create a way to collect email addresses on our blog this is commonly referred to as building your list and it's probably the most effective way to build an audience and earn revenue with your blog and we'll get into the details of earning money later but for now let's add an email opt-in form to the sidebar of the blog so the first thing you need to do is sign up with an email marketing company now if you're on a budget I recommend using MailChimp they're free to get started and they let you create a free opt-in form for your blog now I'm not going to walk you through the entire process of signing up for a MailChimp account it's fairly simple to do and pretty straightforward but once you've set up your free account this is how you'll add an opt-in form to your blog and I'm going to go ahead and login to my mail chip account and then let me show you one of my lists so to start the name for your list go ahead and click on list within the primary nav menu and as you can see MailChimp is a pretty effective solution to building and growing your audience if you present your audience with value and give them a way to submit their email address the sky's the limit as you can see MailChimp has helped me build a pretty substantial list with their opt-in forms so the first thing we want to do is to create a new list and the list is simply the list of email addresses that sign up for a particular offer lead magnet magnet or newsletter this lets you easily manage and keep track your subscribers so to create a new list at the top of screen again you're going to want to click on the list tab and then click on the create list button and then once again click on the create list button that appears towards the middle of the screen so now we're going to fill out the list details so first we want to give our list a name and we'll just name it after our blog so I'm going to call it the glam list next we want to set up the default from email address and this is the email address that people will reply to so be sure it's not your personal email address next you'll enter a default from name and this is who your emails will come from for the sake of time I'm just entering my name but you'll want to use something people will instantly recognize like your blog's name next you'll want to remind people how they signed up for your list so just write a short reminder of how they signed up you're receiving this email because you signed up for my list and your awesome and then once you filled out the list details go ahead and click the Save button at the bottom of the screen in a few seconds and perfect to your list is ready to go next we want to create a sign-up form that will send emails to the list so anytime anyone submits their email address through this opt-in form that email address will become part of this particular list so to create a signup form click on the signup forms tab and since we're going to be generating HTML code to embed within our sidebar you want to select the embedded forms option and this will bring us to the embedded forms options and mail chips offers some pretty standard yet effective opt-in forms and as you can see they have the classic form which is what you're looking at right now they also have the super slim form the horizontal form the naked form and the advanced form and this is where you can add custom CSS and hidden fields but for our blog we're just going to be using the classic form by default MailChimp's classic form includes the email addresses in the first and last name fields but what if we don't want that well if you look on the left hand side of the screen there are some form options that give the ability to customize your form this is a pretty powerful tool for a free service so for this form I'm only going to require people to submit their email addresses so to change the form fields I'm going to select show only required fields so that all someone has to enter in is their email address and next I want to get rid of this form title since I'll be adding my own title to the sidebar so go ahead and uncheck the box next to include form title and finally we want to add the HTML code to our blog now don't let the code intimidate you all we're doing is copying and pasting this HTML code into our sidebar so simply click on the code and hit command C on your keyboard to copy the code and once we've copied the code we want to go back to the blog and adding a text widget since our code is technically text so to do that in the left hand side of the screen we're going to add a widget so go ahead and click on the add a widget button and from the menu go ahead and select the text widget since again the code the HTML code is actually text and you should see that the widget opens up we'll be able to give it a title so here you can add any type of title I'm going to say subscribe and never miss a post but again you can make it anything you want and then below that in the content section that's where we're going to add the HTML code that we just copied so simply paste it to the content section of the widget and the form should appear in the sidebar if we scroll down you can see that a fully functional opt-in form is now on the sidebar so I'm gonna go ahead and save and publish this but I want to show you how easy it is to change the location so let's say we want to move to opt-in form a little bit higher in our sidebar so on the left hand side of the screen it's a drag and drop go ahead and click that widget and drag it to the location of the sidebar that you wanted to display and boom there we go go ahead and save and publish that and as you can see we have a fully functional opt-in form and a prime location within our sidebar again I can't emphasize enough how important it is to build your email list the first step in doing that is to have a way to collect email addresses and this form gives you the ability to build and grow your subscribers for free all right moving on next let's install the Instagram widget so this widget is going to let you share the images from your Instagram account directly to your sidebar as an influencer and lifestyle blogger I'm sure you're aware of the power of Instagram this is just another great way to build your audience and extend your social media reach so just like before we're going to be adding a new widget so on the left hand side of the screen go ahead and click the add a widget button and we're going to add the Instagram plug-in so go ahead and select Instagram and now we can begin to customize it so you have a couple of different options when it comes to the title the number of photos the size of the photos and how Instagram opens once you click on it now I'm going to go ahead and leave the title as Instagram so I'm going to leave it as it is but you can always change it down the road next you're going to want to add your Instagram username this way the plug-in will pull your Instagram feed and display it within your sidebar next is the number of photos I'm going to leave this nine but again you can always change it then the photo size I'm going to leave it at large then you have the option to control where Instagram opens whenever user clicks on one of the photos so I want this to open in a new window so go ahead and select new window from that drop-down menu target blank so open links in new window and then next is the link text again I'm just going to leave this as is and then I'm going to close it because I want to change the location of where this shows up in the sidebar so just like before go ahead and click on it and drag and drop it to the location that you want to display in the sidebar and if we scroll down right below our opt-in form perfect location looks good love it so let's go ahead and save this and then let's test out the experience so click the save and publish button and then I'm going to X out of this so we get a full screen view there we go scroll down and if we click on one of the images perfect open up in a new window and take us to that particular Instagram post and looks good other great this is just another great way to like I said extend your social media reach and it just looks cool in the sidebar so really liked it all right moving on next let's add some social media icons now if we fast forward to the end of the video real quick you can see what the social icons will look like once we set them up and if you look at the top of the screen this theme places the social icons within the header and I think it's a really clean and modern design so let's go ahead an add those to be blog so to add the social icons we're going to click on the customize link again and then we're going to click on the social networks tab and this will bring you to the section where you and entering the various social media URLs that you want to link to and as you can see they have all the popular social media networks listed so let's start with Twitter now you're going to want to put the full URL of the site that you want to link to within each field so I'm going to go ahead and enter my Twitter URL and just to give you an idea of how this works I'm going to go ahead and save and publish and as you can see there's now a Twitter icon with our primary navigation menu if we click on it it'll take you to my Twitter page perfect right now for the sake of time I'm just going to use a hashtag for all the other social networks but again you're going to want to put the full URLs of the site that you want to link to whenever you're filling this out so again go back to the customization menu click on the social network tab and again I'm just adding in the hashtags but this is where you're going to enter in the URLs of those social networks that you want to have links to and that you want to have the icons for within the header of this blog alright so once you've entered all the URLs go ahead and click the Save & publish button and I go ahead and X out of this swing at a full-screen view and there we go we now have some clean in modern looking social icons within our primary Nass and footer of our blog if we scroll down to the bottom of the screen you can see that our social icons are on the foot of the blog looks great now you also have the option of removing the icons from the primary nav and having them only display in the footer if you want this is just another example of the flexibility of this theme so let's say you don't like the social icons in the header simply go to customize again and then click on header options and then from that menu go ahead and uncheck the box next to show social icons and voila simple enough the social icons disappear and if we scroll down to the bottom you can see that they are still displaying in the footer but they have been removed from the header now I like them in the header so I'm going to go ahead and check the box to show the social icons and bring them back perfect voila so be sure to save and publish your changes made me changes and let's move on next let's add some affiliate campaigns within the sidebar so what we're going to do now is we're going to implement a monetization strategy with the sidebar and if we fast forward real quick you can see what we're going to be making so if we scroll down on the right-hand side of the screen those images what you're looking at right now is display advertising using affiliate campaigns this is one of the most profitable marketing strategies and this themed sidebar offers some premier advertising space within your blog now I should mention that I'm going to be showing you how to implement affiliate marketing campaigns and anytime you have affiliate offers on your blog you need to disclose your audience that they're clicking on an affiliate link here's how it works at its core affiliate marketing is a monetization strategy that lets you market other company's products for a cut of the profits and you can start it in four easy steps step one is you need to sign up for an affiliate network like shop collective rewards style or recruit marketing step two is you need to join an affiliate program within one of those networks that makes products that align with your audience's interests step three is you'll need to promote those affiliate offers on your blog through display advertising affiliate links or email campaigns and then finally step four is you need to get paid so anytime someone clicks on your affiliate link and makes a purchase you get some money and remember to always let your audience know that they're clicking on an affiliate link be sure to have an affiliate disclaimer somewhere on your blog letting people know that there are affiliate links on your blog transparency is key and it's the law and like I said affiliate marketing is a very lucrative strategy whenever it's done right and lifestyle blogging offers some of the most reliable and high converting affiliate networks around for example the shopstyle collective which is what we're looking at right now is the network of elite publishers and influencers that give you the tools data opportunities and guidance to grow your brand and extend your reach across a variety of different platforms they are an extremely extremely helpful resource for affiliates and they offer a premium platform for you to earn money by promoting products on your blog as well another great affiliate network is reward style and with over 100 million dollars in retail sales this ready to shop inspiration hails followers from top global influencers and is an other great revenue stream for lifestyle bloggers and finally there is Rakuten marketing this is more of a mainstream affiliate network but they've been voted the number one affiliate marketing Network five years in a row and they're just another great resource for developing an additional revenue stream within your blog alright so I'm going to show you two separate ways to use your sidebar as an affiliate marketing tool first I'm going to show you how to embed affiliate HTML within your sidebar and then I'll show you how to add affiliate links within your content now the reason I'm showing you both is because some affiliate networks will give you HTML code to add to your blog and some will give you straight-up affiliate links now both do the same thing but it's important to understand how to implement each type so first let's cover how to embed affiliate HTML so a good example of this is from SHOP style collectives project excuse me product widget and if you visit their blog they walk you through the process of creating product widgets and give you a much more detailed introduction to the tool now I'm not going to walk you through the entire process of creating a product widget but once you sign up for a free account it's a very easy process where you simply pick the products you want to use within your widget and then the SHOP style collective will give you the embed code to use within your blog which is what you're looking at right now so for this example let's say that I've created my widget and they've given me the embed code so all that we have to do now is copy that embed code and then put it back in the blog so if we go back to the blog and click on the customize link and open up the customization menu and then we'll click on widgets and then blog and then we're going to want to add a text widget so click the add a widget button and select the text widget and now I'm not going to give this a title because I want it to stand alone without any distractions so I'll leave the title blank but right below that in the text field that's going to where I'm going to paste the embed code that I just copied from the shop style collective and if we scroll down you can see that the embed code within the text widget displays a clean and elegant looking image that is linked to our affiliate offer so let's go ahead and close this widget and then we'll save and publish and X out of it and we scroll down as you can see whenever we click on it it directs the user to the affiliate offer awesome it's a clean and professional promotion that links directly to our affiliate offer perfect next let's go over how to add an affiliate link to an image within the sidebar this is another effective way to promote affiliate offers on your blog so instead of embedding HTML on the sidebar we're just going to add an image that's linked to an affiliate offer and SHOP style collective gives you the ability to build your own affiliate links which is great because this allows you to monitor and track the success of your affiliate campaigns so let's say you found a product that you want to promote great you can then build an affiliate link that you can use to direct traffic to that particular affiliate offer so once you've created the link and the collective platform go ahead and copy it then head back to your blog and open up the customization menu so click on the customize link and once again you're going to click on the widgets tab and click on blog and then you're going to want to add a new widget so click the add a widget button and then we're going to add the image widget and just like before I'm going to leave the title blank but instead of adding code we're going to add an image so click the choose an image button and this is just like before we're going to select the image that we want to use so go ahead and select the image or if you need to upload it upload it click the Update button now that our image has been added make sure that the size is full-size and then the most important section is the link section and this is where we're going to paste that affiliate link that we just got from shop stock collective and then right below that click the open in new window check box make sure that that box is checked so that when they click on the link it's going to open in a new window and go ahead and close this I like right set and let's click the save and publish button and once it's saved let's X added us really quickly check the behavior of it and if we scroll down we have our two images in the side bar now let's go ahead and test it and make sure that the image links to our affiliate offers so if we click on it perfect it should open our affiliate offer in a new window looks great alright you've now set up your very first revenue stream for your blog congratulations next let's start adding content to our pages so the first page that we're going to configure is the about page and if we actually click on that page from the primary nav menu you can see that the content section is completely blank so in order to change that you're going to click on edit page at the top of the screen and this will bring us to our WYSIWYG editor and this is where we can begin to add content to this page now the first thing that I want to do is add some images and if you need some professional-looking free images for your blog there are a few sites that I always recommend first is pick jumbo which is what you're looking at right now they offer some great stock photos that can be used for a variety of different projects and as you can see they have some really high-quality images you can select by category you could also filter through the images so that your blog can remain consistent and it can showcase appealing media throughout the site and I know I'm going pretty quick to this but just want to show you some examples of the sites I use for images alright next is pixabay.com and again they offer some great looking photos but they also have some good graphics as well this can come in handy when you need some quick artwork for a blog post or a video and then finally there's unsplash.com this site offers high resolution photos that are great for feature images or hero images on your blog they're high quality and they can give your blog a really clean and professional look so to get started let's go back to our about page and start adding content now for the sake of time instead of typing a full page worth of content I'm just going to add some pre-made images and copy and paste some dummy text but you'll get the idea as we go along so first thing I'm going to do is I'm going to place my cursor inside the visual editor and then I'll click on the add Media button and I'll follow the same steps as before to upload and add an image so once we find our image go ahead and open it and make sure that it's selected perfect and I know we briefly covered this a little earlier but one thing to keep in mind are the attachment display settings and you can see them on the right-hand side of the screen so once you've uploaded the photo you can have some options when it comes to how you display the image this gives you some flexibility in terms of the placement and size of your original image now for some reason the image has uploaded to the medium side so let me show you what that looks like real quick I'm going to go ahead and insert the image into the post as is so that you can see what it looks like whenever it's just the medium size so once you have your image go ahead and click the insert into page button and as you can see it looks pretty small but let's preview the content and one feature that I love about WordPress is that it allows you to preview your changes before you publish them so I'm just going to go ahead and click the preview changes button and this will allow us to preview the page and see what it will look like in a live environment and yeah the image and it's just super small we want it to be a little bit bigger than that so let's go ahead and go back to the original edit window and click on that image there we go and once you do that you should see some alignment options pop up but within those options there's also a pencil icon that gives you some more editing options and we want to change the size so go ahead and click on that pencil image and then from the drop down menu where it says size go ahead and select full size and then we want to update this so click the Update button looks a lot better but again let's preview it so go ahead and click the preview Changes button and perfect much much better looks so much better okay now let's add some text and again like I said I'm not going to write out an entire page so we're just going to copy and paste some dummy text so I'll move my cursor to where I want the text to start and I'm just going to copy and paste this test this text there we go but you get the idea add a little bit more next I want to add a heading within the content and having different headings within your content is good for SEO content structure and readability headings help people skim through your content and quickly find what they want so let's go ahead and add a heading after the third paragraph and let's call it my mission so I'm going to go ahead and type in my mission and then to change the size of this text and turn it into a heading just simply highlight it and then click on the arrow next to the paragraph to get the drop down menu and this lets you select the different sizes of headings we have heading 1 through 6 one being the biggest and then obviously 6 being the smallest and you can select whichever one you want but I'm going to go with heading 2 so I'm just going to select h2 and as you can see my mission has changed in text size and we'll preview it a little bit let's continue building the page so I want to add another image so click the add Media button and we'll just follow the same steps as before to upload a new image and I'm going to go ahead and select my new image and then once I find it go ahead and click the insert into page button make sure that there's a blue checkmark next to the image that you want to use and be sure to double check the attachment display settings so again we're going to set this to full size because it's uploading a medium for some reason and click the insert into Page button if we scroll down perfect we have our second image under the my mission heading and once again I'm just going to copy and paste this dummy text but again you get the idea this is where you would actually add your content there we go so we have the kind of the featured image and some text now let's go ahead and preview this so click the preview changes button and looks great I like it I like it a lot got a clean layout clean professional look looks good alright let's go back to the visual editor and when I add one more heading and a little more content in another image I'm going to show you a cool thing that you could do with this editor so once again below this content just going to put my cursor where I want the new heading to be and I'm going to type it out there we go h2 then I'm going to copy and paste this text alright then I want to put my I want to position this image to the right so I'm going to put the cursor next to that heading and then click the add Media button and I'm going to upload my new image once we have the image and the attachment display settings make sure that the alignment is set to the right and I'm going to shrink this a little bit so instead of full size let's go medium and then insert into page and then as you can see it pushes that image over to the right now you notice that some things look a little different in the WYSIWYG editor compared to the live site and that's why it's important to preview your changes before you publish them and if we scroll down our image is now positioned to the right of the content looks pretty good let's let's adjust it a little bit more I want to make it a little bigger and I want it to move down a little so we'll go back to our visual editor and I'll simply add some space between my heading in the image so that it drops a little bit then I want to adjust the size so last time we clicked on the image and we use the pencil icon but this time I'm just going to use the drag option within this photo you can easily change the size within the editor by clicking on the corner and dragging the image to the size you prefer alright so once we have the image set we'll go ahead and preview it so click the preview changes button and there we go if we scroll down looks great we now have a professional-looking page that outlines what we're all about so once we're satisfied with the page we'll go back to the visual editor and click the Update button to push our changes live there we go and if we go back to our home page so if we go to the upper left hand side of the screen click on the visit site link and then if we click on the About tab and the primary nav menu we can see that the changes are now 100% live and they look great I shout all right moving on next let's create our online storefront with our online shop all right so you have a lot of options whenever it comes to how you structure your e-commerce business however selling products directly from your blog gives you the ability to add an additional revenue stream and it can help you grow a much larger customer pool as well now for this tutorial I'm going to show you how to build an e-commerce store front without having to deal with things like payment processing dealing with decline credit cards issuing refunds and things like that that's because we're going to be using a plugin that displays your products sales and advertisements in a beautifully styled catalog setting that you can easily connect to Etsy eBay Amazon or various affiliate products and as you can see if we fast forward to the end of the video you can see this online storefront that we have within the blog and we're using a online catalog plugin that I'm going to show you how to configure here in a few moments but I just want to show you really quickly what the plugin will look like in kind of the functionality of this online storefront and again you're not going to be processing payments or dealing with any type of customer service or anything like that this is just presenting an online storefront that you can connect to your e-commerce platform it's a great way to generate traffic and direct people from your blog directly to your sales page all right so let's implement this plugin so if we go to our shop page if you click on the shop tab within the primary nav you can see that it's completely blank and this is where we're going to add the new online storefront with that plug-in so the first thing we need to do is we need to configure the plug-in so we want to go back to our WordPress dashboard so left hand side of the screen click on dashboard and then again on the left hand side of the screen go ahead and click on huge IT catalog that's the plugin that we installed a little bit earlier in this video and you should see a default watches catalog show up or some sort of default catalog obviously we're not selling any watches on our blog so we're just going to create a separate catalog for our projects but let's go ahead and click on this so you can get idea how the plug-in works so as you can see it's pretty robust it gives you a ton of flex when it comes to displaying your products and there are quite a few options that will help you create the foundation for a high quality ecommerce storefront and far too often product catalog plugins drop the ball on the user experience and the reason I recommend this plugin is because it really delivers on the aesthetics of an online store and it's free all right so let's create your online store now before I do anything I'm going to add all of my product images I always recommend you add your images first so that you're not having to go back and forth from the plug-in to your media gallery it's just easier and it saves you a ton of time so like I did a couple seconds ago just go back to your media library and add the images just take a couple more seconds for all these images to load and once you've uploaded all the product images it's time to create the catalogue so go ahead and click on the huge IT catalog on the left hand side of the screen of your dashboard and then click on the add new catalog button and this will bring us to the catalog management page and this is where we can design and configure our product catalog that will act as our online shop of our blog a lot of different aspects to this plug-in when you have some extra time I recommend checking them out but for this we're just going to focus on a few things so the first thing I'm going to do is configure it so the right-hand side of the screen where it says catalog name give it a quick name then select the view we're going to select full-width blocks display content keep it as show all keep everything else as is next we want to add a new product so click the add new product button and then select the image of the product that we want to add go ahead and insert into post and some fields should pop up and for the most part these fields are pretty self-explanatory you have your title price sales price link and description and one thing to keep in mind as you're filling out each field make sure that the two boxes product page new tab and show product are checkmark this will ensure that your product images are displayed and that your visitor won't be taken away from your blog if they click on the product all right so let's give this product a title and since it's a high-heel let's call it silky red heels then we'll give it a price and a discount price so we'll make it one $49.99 in the discount price we're slashing prices $79.99 right next is the product page custom link and this is where we have the option to link to an external ecommerce source and again this is helpful because it takes care of the heavy lifting whenever it comes to selling a product online so I'm going to link to my Etsy store and again you can link to any eBay product Amazon page affiliate campaign and so on this plugin gives you the ability to link to a product page and a custom link alright so I'm going to copy that link and now that we have our link it's time to add it to that product page custom link session so I'm just going to paste it there and then next let's add a description I'm going to grab some dummy text but again this is where you would add a short description of the product there we go everything looks good alright next let's add a few more images to help entice buyers and showcase our product so I'll just go ahead and click on that huge plus icon and this will bring you to your media library again and we're just going to select the additional images that we want to use for the catalog and then just repeat the process until you have an adequate amount of images for that product and I recommend about three or four images nice we have our very first product all right now let's add another one so we'll just follow the exact same steps as before so click the add new product button and again add your featured product image so let's do the handbag for this one and again we'll fill in the blanks so obviously it's a title we'll give it a price and a discount price so my feeling here nice little handbag let's go one 29.99 then let's slash the price 99.99 a pretty good deal alright again we're going to select our custom link again this is what the product will be linking to from our blog so I'm going to select the Etsy page and go ahead and copy and paste it in that product page custom link section and then again I'm just copying pasting some dummy text for the description but this is where you would add a description of the product and then let's add a couple more images so click the plus icon and just like before we're going to be adding different images of the product it looks good we have our first two products and let's add one more product this will be a necklace so we'll select our featured image for the product and again these are the exact same steps so once the fields appear let's give it the title the price discount price we'll get our product page custom link and then a short description and then we'll add a couple more images and again I'm going to snag the link to my Etsy store and paste that and the product page custom link section make sure those boxes are checked and then give it a short description and then we're going to add a couple more images make sure that box is checked there we go and when I said make sure that box is checked you want to make sure the show product box is checked and also the product page new tab alright we have our products now let's say we want to change the order of how they're displayed this is that other great feature of this plugin so if you want to change the order of how the products are displayed if you hover your mouse down over a product and where you see those kind of the cross marks cross bar marks you can click on the image and drag and drop it to the location of where you want it to be displayed within your online storefront pretty cool feature you can just drag and drop and move the products around if you want to change the order move these move these guys around a little bit all right so once you're happy with the order move the handbag down I want to put the heels first handbag and then necklace looks good all right so once you have the order of the products and you're happy with it go ahead and click on the Save catalog button and that saves the catalog and now the catalog is ready to be added to the blog so next comes the process of actually adding the shops shortcode to your blog this is a quick and easy step that lets you easily display your shop by adding a small snippet of code to the WYSIWYG editor so to set up your shop under usage the right-hand side of the screen simply copy that shortcode and this is what you're going to paste on the actual shop page of your blog so once you've copied the code just revisit the shop page so we'll go back to our home page and then click on the shop tab then click on the edit button at the top of the screen to access the editor then all we're going to do is we're going to paste that short code that we just copied and paste it into the visual editor so put your cursor in the visual editor there you go and paste it and you should see the shortcode and let's go ahead and preview this so preview changes and it looks pretty good but we still need to change the color of the shop so that it matches our overall theme and as you can see we're still done with some some blue buttons so if we fast forward a little bit in the video I'm going to show you how we can change the color so that it matches the overall color of your theme and we want it to remain consistent with the rest of your blog and have a clean and consistent design so let's go ahead and publish this page so that the changes will be saved and we'll have our online storefront so we'll go back to the visual editor and then go ahead and click the Update button and again that will push our changes live and then let's use the little CSS magic to change the colors of our shop so to change the color of the online store I've created a CSS cheat sheet which we went over a little bit in the beginning of this video but again you can access it by clicking on the CSS cheat sheet link below this video and inside you'll gain access to the exact CSS code that you'll need to copy and paste and use in word presses additional CSS widget in order to change the color of the online store so the first step is to open the customize menu so go ahead and click on the customize link and then within that customization menu you're going to click on the additional CSS tab and again this is where you're going to paste that CSS code from the cheat sheet that I provided for you and then if you go back to the cheat sheet all you need to do is copy the code beneath the huge IT product catalog CSS section and you'll be able to change the color of the shop so that it matches the current theme color of black and gold now there are a few things to keep in mind whenever you paste this code to the CSS module first you need to make sure that the red fourteens on the cheat sheet match the ID of the shop catalog on your blog and this is because the CSS won't work if the element number within the CSS code doesn't match the ID of the number of the shops shortcode which we just looked at right there so before you save and publish the CSS make sure that all the red fourteens match your shops ID within the shortcode so if your shop ID is seven simply replace all the red fourteens with the number seven then once you have the correct ID number within the CSS you can easily manipulate the layout and make it your own so we're going to go ahead and copy this code so copy the huge IT product product catalog CSS code and then we'll go back to be additional CSS module and then go ahead and paste that CSS within the additional CSS module and as you can see the changes are immediate the button in the text has changed as well as the color behind the sales price so the color matches the overall theme looks good now another thing I just want to stress one more time is make sure that that shop ID within the shortcode matches the element number within that CSS so my shop ID was 14 so I want to make sure that all the elements are 14 now at the shop ID within the shortcode is the number 6 then you're going to change all these 4 teens to the number 6 which you can easily do within the additional CSS module and again I want to show you how strong and how powerful CSS is we're just going to remove it and automatically goes back and revert back to the blue then we paste it and add it again and the colors again the changes are immediate very powerful powerful piece of code and a pretty cool feature that you're able to do this within the additional CSS module all right so once we've added the code go ahead and click the Save & publish button to push our changes live then we'll X out of this and voila we now have a theme where the excuse me we now have an online store that matches the color of our theme looks a lot better than those blue buttons that's the default setting so again this just gives it a more consistent feel and looks a lot more professional alright moving on next let's add a contact form to our blog so if you visit the contact page go ahead and click on contact in the primary nav you'll see that we have the two column layout but we're going to be adding a contact form within the left side of that page and having a contact form is a great way to keep a line of communication open between you and your audience and it's also a great way to build your email list so to add a contact form let's go back to our dashboard and we're going to be using the contact form 7 plug-in that we installed previously in the video to add to contact form so on the left hand side click on contact and this will bring you to your contact form admin page and just like the other plugins this is where you can configure the different aspects of the plug-in now I'm not going to go into detail and the advanced features but for this tutorial we're just going to use the default contact form that comes with this plug-in so to add the default form go ahead and click on the contact form one link and this will bring you to the form details and as you can see it presents you with the actual HTML the form now the great thing about this plug-in is that it creates the shortcode of the HTML so all you have to do is just copy and paste the shortcode to your blog and you'll have a fully functional contact form that allows your visitors to send you messages so let's go ahead and copy the shortcode at the top of the screen and then once it's copied we'll go back to the home page so visit site and then click on the contact tab to open up a contact page and then at the top of the screen we're going to edit the page so click Edit and just like before we're just going to paste that shortcode within the content section of the visual editor there we go and then if we preview the page click the preview button you'll see that the shortcode is pushing out the full contact form and it looks awesome we have a clean and elegantly designed form that's ready to use next let's add a little text to the page to give it some depth and you know this is completely optional but you know adding a little welcome greeting or a brief explanation of your contact page could be more enticing and help people fill it out there we go looks great looks professional so let's go ahead and update those changes so that we can push them live let's go back to the visual editor and click the Update button and that'll push those changes live and it'll be on the blog so we'll click the view page link to check it out perfect looks good moving on next let's publish a blog post so now that we've configured and customized our blog we can start adding content but first we need to get rid of that default hello world post that WordPress starts you out with so as to get rid of it we're going to go back to our dashboard and then on the left hand side of the screen of your mouths of our posts and click all posts and then you should see that hello world post there go ahead and check the box next to that post and then click the red trash link and I'll send it to the trash and the post is now then deleted now we can start adding real posts to the blog and this is where you start publishing your own original content and it's when you officially become a blogger it's very exciting so let's add your very first blog post now there are a couple of different ways to add a new blog post and I'm going to show you both ways but they each do the exact same thing really comes down to what you're most comfortable with so the first way to add a new blog post is the hover your mouse over new at the top of the screen and click post and the second way is if you go back to the dashboard on the left hand side of the screen if you hover your mouse over posts and click add new you'll be able to add a new post that way as well but again both of these options will get you to your visual editor and allow you to create edit and publish a blog post so again this will bring us to our visual editor commonly referred to as the WYSIWYG editor which stands for what you see is what you get and the thinking behind that title is that whatever content you add to the visual editor is what you're going to see on your blog and we'll get into that a little later on but just know that whenever I say WYSIWYG I'm referring to the visual editor now if you've been following along with my previous blogging videos and if you've been following along in this video you'll notice that the visual editor is basically the same as when you add a page to your blog the concept is fairly straightforward you have a title section where you'll enter the title a Content section where you'll enter the content then below you'll see the Yoast SEO plug-in if you installed it then on the right hand side we have our publishing options formatting options categories tags and a section for a featured image and again the concept is pretty much the same as adding a page we're going to use the WYSIWYG visual editor to add upload and publish content to our blog and I'll talk you through each one as we go but again it's basically the same process as creating a page so now that you know your way around the visual editor let's create your first blog post so the first thing that we want to do is we want to give our post a title so at the top of the screen where it says enter title here go ahead and type in the desired tile title of your blog post and remember your title is going to be your blog's headline and crafting an attention-grabbing headline can be challenging at times but try to keep it under 70 characters and always implement keywords within each title or try to at least so now that we have our headline there are a couple things I want to point out before we start adding content first if you look right below the title you'll see that the permalink has been automatically generated for you and it's using keywords within the blog post title for the URL and that's because if you remember we set up our permalink structure so that it was going to use the post title to generate those permalinks next if you look below the post the Yoast SEO plug-in has begun to create our snippet that will show up in the search engines and again that's just another reason why I love this plug-in next let's start adding some content all right so the first thing I'm going to add to this post is an image so just like before with our pages we'll click the add Media button to upload and add an image so it's going to be the same process as before I'm going to click the upload files link and then select files button and then I'm just going to select the files and one thing I should point out I'm going to be uploading to do a bulk upload so I'm going to upload more than one file so I'm going to select the four images that I'm going to use within this post and as you can see WordPress can do a bulk upload and will upload all four of those images now again they are all selected and I don't want to add every single image within the post at the same time so on the left hand side of the screen towards the bottom you can see that you can clear the selections and then if you click and select the image that you want to use for the blog posts that will allow you to select just one image at a time instead of all for those images that we uploaded alright so now that we've selected the image that we want to use within the post another thing I want to draw your attention to is the attachment display settings I know we've gone over this a couple times but again it's always a good thing to remember so I'm going to change the alignment so instead of just normal we're going to Center this image link to this is where if you want to link to an external custom URL or a different page we're just going to keep this edit as is so when they click on it it's just going to be the image and then again we can adjust the size but again I'm going to keep it as is to the full size alright so once we have selected the image the attachment display settings are set up in the way we want to keep them let's take a closer look at setting up the title and then the alt text and I'll just do a brief description of of the title in the alt text these are these are good for SEO so the title is whenever someone hovers their mouse over the image and they they keep it there for a couple seconds the title is what will show up the alt text that's what the Google BOTS or the search engine BOTS whenever they crawl the image that's how they determine what's in the image so the alt text again is good for SEO I try to be as descriptive as possible I use some some keywords within there but the alt text again is very important whenever you're using images within the blog all right so once we've set up our image in the alt text and title in the alignment go ahead and click the insert into post button and this will insert our image and at the post perfect looks good next let's add some text so again I'm going to place my cursor within the visual editor and then for the sake of time instead of typing out a full blog post I'm just going to copy and paste some dummy text but again this is where you would add the content of your blog post and I'm going to add some more media so I just add another picture again you're going to click the add Media button take you to the media library then we're going to select those images I'm going to change the title again that's whenever you hover your mouse over the image that's what's going to show up and then the alt text is what the searchings and BOTS will use whenever they're crawling the image and then insert into post perfect and then I'm going to add some more content below this image and once again click the add Media button in the upper left hand side of the screen and then select the image that you want to use and again adjust the title and the alt text make sure that the attachment display settings are what you want and then click the insert into post button perfect and last set I'm gonna add some text and then I'm going to add another image so click the add Media button find your image same thing as before title alt text attachment display settings and then click the insert into post button there we go looks great at least it looks great within the WYSIWYG editor before we do anything let's go ahead and preview this post so click the preview button and boom liked it so we have our image we have our content we have another image content image content and so on looks good I like the layout clean professional we have a very vivid and very very media driven blog post looks good so we'll go back to our visual editor and the next thing we want to do is create a category to add to this post now a category is a group of related blog posts that are about similar subjects and whenever you create a category it makes it easier for people to find your content plus in a few minutes I'm going to show you a cool menu feature for categories as well so the next thing we want to do is again we want to create a category so to create a category on the right-hand side of the screen where it says categories go ahead and click on the add new category link in that field below go ahead and type in the category so we're going to call this a fashion category obviously since this blog post is dog fashion then click the add new category button and as you can see the new category is check marked it's added and it's ready to go next we're going to add a tag the next let's add some tags to this blog post so think of tags as being keywords that relate to the content of the specific blog post and this is another way for your users to group the content so to add a tag go to the tag section and enter in some keywords that relate to the content and be sure to separate those keywords with commas and once you have your tags go ahead and click the add tag button and then let's take a look at what our changes will look like in the preview post so again let's preview this post so in the upper right hand side of the screen go ahead and click the preview button and this will bring you to the preview page so we can check out our changes and as you can see the category is conveniently placed above the title the blog post and then if we scroll down to the bottom of the screen you can see that our tags are conveniently placed as hyperlinks below the posts and again this just creates a more user friendly environment and makes it easier for your blog's visitors to find what they're looking for awesome all right so now we have our tags we have our categories we have images within our posts we have the content let's add our featured image so to add a featured image obviously we want to go back to our WYSIWYG editor which is what you're looking at right now and then to add that featured image on the right-hand side of the screen you're going to click on the set featured image link and again this is the same process as adding any other image to a page or a blog post you're going to simply select the image or you're going to upload an image and go ahead and click that set each featured image button and as you can see on the right-hand side of the screen you now have a featured image for that blog post so let's go ahead and preview it and check it out and see what it looks like so click the preview button whoa but wait why is the featured image showing up within the post and all the other images that's a great question well unfortunately a lot of WordPress themes are hard-coded to show the featured image within the content of each post which is what you're looking at right now I'm not sure about the thinking behind it but I believe the developers just figured that the author would want the featured image to be a part of the content now I get it but I don't necessarily like it especially if we're creating a blog that uses a variety of images to display our content so in order to get around this we're going to have to make a slight adjustment to the PHP code within the themes template don't worry I'm going to walk you through the entire process step by step but before we do anything first things first let's go ahead and save this post as a draft so that we're not publishing a post that has a featured image followed by another image so go ahead and click the save draft button again that way we can publish it once we've adjusted the code next let's take a look at the cheat sheet and if you scroll to the very bottom of the cheat sheet you'll see a copy of the PHP code that you'll need to remove from the theme now it might look complicated but trust me it isn't all we're doing is we're removing this snippet of code from the folder within the blog theme now we're about to do a somewhat advanced procedure and if you haven't installed a child theme I highly recommend that you do that before making any changes to the code now if you aren't using a child theme and you're mean you make a mistake then you could potentially crash your site that's that's no bueno that's no good so make sure that you're using a child theme before you proceed with this step so now that we know we need to remove the featured image from the content of the blog post it's time to actually put that into action and we're going to do that by adjusting the PHP code within the theme so simply hover your mouse over appearance and then click on editor and this will bring you to the theme editor and if this is your first time to the editor let me give you a quick rundown now the built in theme editor allows you to view or change the code within your theme the particular file contents are displayed in the large text or edit box on the left hand side of the screen which is what you're looking at right now next the name of the theme that's being edited will be displayed at the top of the text box as well as the select theme to edit drop down menu so make sure you're editing the correct theme before you make any changes next listed to the right of the large text box is a list of the theme template or stylesheet files that can be edited and if you want to edit a file simply click on the file and make your changes within the text box on the left now before we do anything a word of caution though you'll want to be very careful while you're editing PHP files on your current theme the editor does not make backup copies so if you introduce an error that crashes your site unfortunately you cannot use the editor to fix the problem so again please make sure that you're using a child theme and make a backup of your site before making any changes to the PHP files alright now that the disclaimer is out of the way let me show you how to edit the PHP so that the featured image won't show up within your blog posts so the first thing we want to do is access the file that the code lives in so this particular change is going to happen within the single post file so on the right-hand side of the screen go ahead and click on where it says single post and then you'll see the code up here within the text box on the left and then we want to find the code that we want to remove and remember please review the cheat sheet before making any edits to the single Post file you'll want to make sure that you're removing the exact snippet of code that's shown within the cheat sheet now be aware that the layout of the code might look a little different due to the resolution and the size of the text box but make sure that you're removing the exact snippet of code that is within the cheat sheet on this video so once you are 100% certain that you have the correct snippet highlighted which is what we're highlighting right now go ahead and delete it and then clean up any white space within the text just simply delete until there is a break between the closing and opening div tags and finally once the code has been deleted and cleaned up click the update file button to save the changes you made to the code so after clicking this button you should see a splash message at the top of the screen saying that the file edited successfully if you don't see the message and your changes are not saved and please note that if a file is not writable the update file button will not be available next let's see what our changes did so in order to access the post hover your mouse over posts and click on all posts and you should see the save draft of the post we were previously working on there it is so go ahead and hover your mouse over the post and click on the Edit link and this will take us back to our visual editor and once we're back let's preview the post to make sure that the changes we made to the PHP translate to the theme so go ahead and click on the preview button and boom the featured image is no longer showing within our post content looks much better in my opinion and by editing just a small snippet of the code we've been able to make a major adjustment you should be proud of yourself you just edited some PHP code nice work alright so once you're done patting yourself on the back go ahead and go back to the visual editor and let's publish this post so that the changes will be live so go ahead and click on the publish button and there we go you have successfully published your first blog post high-five nice work now before you start celebrating there's just one more adjustment we need to make I know I keep saying that and as you can see if you visit the home page you go ahead and go back to the home page this is what people will see when they go to the blog you'll see that the themes default settings show the entire blog post in the feed this causes the featured image to show within the other images and that's because this isn't the blog post but the blog posts feed so to change this we just need to make a simple tweak to the customization menu so click on customize to bring up that menu and then select the layouts option tab and then you'll see that you have a couple options of some things that you can edit but we're just going to focus on the display so simply check the box next to where it says display the excerpt instead of the content and then you should see the blog display change right before your eyes perfectly instead of that full blog posts we now have an excerpt and the image awesome so go ahead and click the Save & publish button and then let's X out of this beautiful looks a lot more professional a lot more clean like it so if we click on the post you can see that our featured image has been removed looks good beautiful images got some content there that we have a place where people can leave their comments and it looks amazing love the way it turned out alright so now let's add a couple more blog posts to the blog so we're basically just going to be doing the exact same thing that we did for the initial post but I'm not going to walk you through each and every step and describe it step by step but we are going to be doing the exact same process that we just did so if you need to revisit it go ahead and do that but I'm going to kind of go a little bit quicker through the next steps here to add these two new blog posts all right so to add a new blog post at the top of the screen where it says new and a hover I mount my mouse over that and click on post and then again this is going to bring up our WYSIWYG editor this is where we'll enter in the title the content the images all the good stuff the categories the tags and adjust our search engine snippet below with the Yoast SEO plug-in if we need to so once I have my title and the permalink pops up I'm going to add an image so to do so click the add Media button and I'm going to upload some images again I'm going to do a bulk upload here because I'm going to be using more than one image for this blog post once my images give them a second to load there we go and remember they are all selected so I'm go ahead and clear them and then just select the first image that I want to use and again you can give it a title on alt text and and mess with the display settings but we're going to skip that I'm just going to insert this into the post there we go then I'm going to add some text and again for the sake of time I'm not going to be typing out a post I'm just going to be copying and pasting some dummy text there we go and then I'm going to add another image so select the image that you want to use and let's switch it up yeah let's use this one click the insert and a post button and some text and I'm going to add another image insert into post add a little more text and one more image there we go once again let's add a new category so since this one is about makeup we're just going to call this category makeup so type in your category name click add new category make sure that that box is selected then once again we're going to add the tags and remember to separate these with the comma click the Add button once you have all your desired tags next let's add our featured image so scroll down and click the set featured image link and then select the image that you want to use for the featured image once you find it going to click that blue button on the right hand side of the screen and let's preview this so click the preview button looks good like the images like the layout so we'll go back to the visual editor and let's publish this everything looks good so let's visit the site to see how it looks within the blog feed and awesome we have our featured images a little teaser of the blog social icons good titles awesome looks amazing so we're moving along alright now let's add one more post so again hover your mouse over new click add post and put in our title and this one I'm going to really fly through so get our images all set up select the image I'm going to insert that into post add a little content add some more images you've been here before you know what you're doing now but again you know while I'm doing this this is just a great example of how easy it is to use WordPress I mean it's it really is a phenomenal tool for for any type of blogger and again it's the reason why I always recommend WordPress so let's see so we got our category we're adding our tags once again let's set the featured image there we go got the featured image let's publish this looks great then we'll go back to the site and let's see what it looks like boom awesome we now have three professional-looking blog posts to go along with our sleek and clean design of a lifestyle blog looks good if you click that continue reading button you can see that we have a nice-looking post with also the related posts would you below that with a comment section got our nice-looking sidebar with our affiliate marketing campaigns love it and then finally as promised I'm going to show you how to change the themes overall color with the magic of CSS once again and WordPress is edition of the CSS module is by far one of my favorite updates and we're going to use it again to make some pretty cool changes to this theme so the first thing we want to do is we want to open the additional CSS module so we can start making our edits so once again on the left hand side of the screen click on the customize link and then select the additional CSS tab and then we've been here before but this time we want to change the code so if you remember we added some CSS that adjusted the color of our online storefront which our online shop but it mimicked our theme so we want to change that color again and we're going to change it to pink and blue so you'll want to highlight all that CSS that starts with period element and delete it and once it's deleted go ahead and visit the CSS cheat sheet and simply copy all the CSS that is listed under the change theme color CSS - pink section so if you scroll down where it says change theme color CSS - pink go ahead and copy that section of the CSS cheat sheet and once is highlighted and copied go ahead and go back to the additional CSS module place your cursor within it and paste it and boom look at that just like that the theme sidebar elements of change color the title and the text hover color has changed and the buttons color has changed and with the help of CSS we've been able to make some pretty significant changes to the theme plus you didn't have to buy the premium version of the theme CSS is it's a very helpful tool and the addition of this additional CSS module within the WordPress update makes making changes to the CSS code extremely convenient and streamlined alright so let's go ahead and push these changes live so let's say you want to change the color to pink so go ahead and click the save and publish button but one thing that we need to revisit is the shop so once you erase that code and added the new CSS pink code you still need to adjust the shop and remember our online shop it was a plugin so the CSS will need to be specific to the shop and again thankfully I have that code ready for you to copy and paste on the cheat sheet so go back to the cheat sheet in the section that says the huge IT product catalog CSS - pink you're just going to want to highlight that copy and paste it there we go and remember to make sure that the red four teams match the number of the catalog ID that you made within WordPress go ahead and paste that within the additional CSS module and voila as you can see the CSS code within my cheat sheet will make the colors match the rest of the theme if you delete it goes back to blue obviously so we'll just paste that back but again I just want to show you the the power of CSS so awesome looks good let's go ahead and save and publish this so click the Save & publish button so next let's change the logo so that it's more in tune with the rest of the blog now I'm not going to walk you through the entire process of creating a logo but again you can use the font calm to create a pretty cool logo so to change our logo visit the custom excuse me the customize menu again so click customize and then click on the site identity tab and once again click on the change image button and we'll just go through the same process as before to add our image so I'm going to go ahead and upload my new pink logo but again something that's going to match the overall look and feel of the theme there we go once we have our logo image uploaded insert that into post awesome and I honestly I used the font calm to make that logo alright next I'm going to change the site icon again I want to make it something that is in tune with the brand and the overall look and feel and once I have that new site icon which I'm not going to do right now but you get the idea go ahead and click the save and publish button X out of it and voila I mean look at that with a little bit of CSS and then a change of a logo to me it looks like a just a brand new blog has a different look different feel and again just some some minor tweaks of the code and a new logo with with this blog layout the two column layout and that sidebar looks great minimalist clean good-looking design got our monetization strategy going and the sidebar the Philly marketing campaigns love it got that revenue stream looks great alright now the last thing I want to show you is just another quick tip on how to change the color with CSS now you've probably noticed that the only theme color on the cheat sheet is pink but what if you don't want a pink theme simple all you have to do is swap out the hex color code within the CSS and you can change the color to anything you want here's how it works if you go to color hex comm you can literally choose from thousands of colors and their hex color codes once you decide on the color just copy that hex code and paste it within the CSS of the blog so once I've found the color that I want to use we go ahead and copy that color hex code at the top of the screen and then if we go back to the blog and we open up the additional CSS module this is where we'll be able to change the colors and all we're going to be doing is we're going to be replacing the pink hex code with that blue hex code that we just copied so anywhere in the CSS that has that f4 to c2 code just replace it with the blue hex code and the theme will change color now remember if you're having trouble finding all of the color codes to swap out within the CSS I've highlighted them all on the cheat sheet there in red and again if you revisit the cheat sheet it's a good way to see which parts of the CSS need to be switched out alright and next we need to adjust the color of the shop so if we keep the additional CSS module open and just go to the shop page you can see that the buttons are still pink so once again we need to swap out that color hex code within the shop CSS and as you can see changes happen instantaneously change from pink to blue one more there we go looks good side bar looks good the buttons in the shop look good so let's go ahead and save and publish these button these changes so click the Save & publish button then let's X out of this and then the last thing we want to do is we want to change the logo so obviously we want it to match the rest of the theme so we'll this is the customization menu and then click on the site identity tab and once again we're going to change the image and I've already uploaded the image so I'm just going to select it choose image that'll throw it into the theme looks good matches everything and remember to update the site icon if you need to do that and again I'm just going to save and publish this and congratulations you now have a fully functional lifestyle blog that is ready for the world this theme coupled with the power of WordPress and Bluehost web hosting is a digital launch pad for multiple types of lifestyle verticals it's a great way to start an online business and building a blog is your first step towards becoming an online success so that's going to do it for this video if you found it helpful I'd greatly appreciate it if you would like share and subscribe to the blog within YouTube channel as always your support means a great deal to me and my family and for that I thank you so with that being said I'll see in the next video thanks for watching [Music]

Channel: Blog With Ben

Views: 80,116

Keywords: how to start a blog, how to make a blog, how to start a lifestyle blog, lifestyle blog, wordpress blog, how to start a wordpress blog, blogging tutorial, how to make a wordpress blog, wordpress, fashion blog, start a blog, make a blog

Id: 6MJN4oFKUkw

Length: 179min 28sec (10768 seconds)

Published: Mon Jul 24 2017