March 29, 2020
😍 Make Your WordPress Theme Look Like the Demo

😍 Make Your WordPress Theme Look Like the Demo

– Hi, today I want to walk you through what it looks like to
customize your WordPress theme. (upbeat music) Okay, so one of the biggest
headaches I’ve found in dealing with WordPress is shopping for hours and hours and hours online for a really great WordPress theme, only to install it and
it looks nothing like that original preview
or that demo version, and it’s very frustrating
trying to figure out how to make your WordPress theme look like that amazing example. Today I’m gonna walk you
through how to do it. Here we go. Okay, this tutorial is going to be hopefully generic enough
that it’s going to apply to every one of your situations. The truth is, every theme
is totally different, so I’m gonna try to hit on the things that should be the same. Now, there are gonna be, every theme is gonna have
its own little variation, so the very first step I want to tell you to hopefully keep you
from spinning your wheels and wasting your time,
is you’ll want to find your theme’s documentation. Every theme out there, whether it’s free or premium, which means you paid for it, should have some sort of documentation that’s gonna help you
in this whole process. So if you’re using Themeforest, let’s say, so, this particular theme here, if you came over here and
looked at the Themes page to see kind of what all
this theme is about, there’s an area here
that has a Support area that you can go into, and find details on how to connect with this author. Especially, this is typically here if you’ve already purchased this theme. But the spot that you
really want to go to is, let’s scroll up here for a second and go to my downloads. Move me out of the way here. Go to my downloads. Well, it’s not gonna let
me go to my downloads. Go to my downloads. All right, I’m back. And right here in this spot, let’s say this particular one. If you go to this download area here, and you click on it, it allows you to download all the files
and documentation, okay? So when you click that,
it’s gonna take a while, it’s gonna download to your desktop. What typically is gonna happen is you’re gonna get a zipped file like this. You double click it, and it
creates a folder like this. When you double click that and open it up, you’re gonna see a folder
hopefully called Documentation or an html page called Documentation. When you open that up and click on it, it should be able to quickly and easily walk you through literally every step. How to set up your home
page, how to install it. So this is the very first
thing, how to install it. So if you’re struggling with
how to even get this theme active on your website,
here it is, step by step, and it literally will walk you through how to set up the
slideshow on the home page, what all your options are. And some authors even
have incredible videos that you can literally sit here, click and watch the whole
situation take place, unfold in front of you. Or they have great screen shots, just like what we’re seeing here. So really, really important to be sure to go search for your theme’s
documentation, okay? If you’re using a free theme, this particular theme, Spacious, has a support tab right here. So clicking on that, I’m able to go see an entire forum area type environment where I can ask questions and see what other people are struggling with and maybe get some questions answered if I’m having a problem
with getting this to work and to look like that amazing demo that they did for us. Another thing you want to do, you’re going to follow the instructions how to install and activate it, but the next thing you want to do is you literally want to walk through every single portion,
how they say to customize the theme, and some authors even give you another zipped file that’s their demo content, and they’ll walk you
through how to import that and plug it in. And then with that, your whole theme will begin to switch around and
look just like that demo. If you’re still struggling,
there are a couple of things that nobody typically tells you, and you only learn them
by trial and error. That’s what I want to walk
you through right now. So how to set up your home page. If you don’t want all your blog posts to be seen on your very
first page, your home page, you have to actually
tell WordPress to make it be a page that you’ve created, like a home page or a welcome page. So the way to do that is you actually go into your Settings area,
and you go into Reading, and right here, Front Page Displays, you want it to display your latest post, or do you want it to
display a static page, okay? You have to be sure to
make the page first, and then come to these settings. So if you do that, then in this dropdown, you’ll have the option of
that page that you made, and in this instance I
called my home page Home. I select that and I click Save Changes. Then that allows the website to know to present that page of content instead of all of my
posts dynamically listed. And remember, WordPress was
created for bloggers, right? Initially that was the concept. So by default, it puts all
your posts on that home page. How to set up your menus. This is another thing some people, some authors forget to walk you through, and you get totally turned around. So we know that the top
of your website up here, this area up here typically
that runs across the top or maybe down the side of your website is called, WordPress calls
those your menus, right? In order to get to those and to set those up appropriately, they’re hiding inside of Appearance. So if you go to Appearance, go to Menus, move myself over here. I’ll get myself out of the way here. So here you can set up and
create a brand new menu. Most of the time menus
aren’t even sitting here yet, so you have to click
this button right here to create a new menu. And you can name it Main Menu, Top Menu, whatever you want to call it, and click, this button will
actually say Create Menu. You’ll click that. And then now all of your content is sitting over here on the left side, so you can choose whatever pages you want and click Add to Menu. Whenever you click that, they’ll automatically put them over here and you can drag and drop these in whatever order you want these to appear inside that menu, all right? If you don’t see all of your content here, click this little button
that says View All, and it will list all of
your pages alphabetically here for your to choose from. You choose those again, click Add to Menu. They’ll drop over in a random order. You just grab, drag and drop them in whatever order you want them to be in. If you want them to be a dropdown, maybe you want Apply Today
underneath Contact Us, slide it just slightly to the right and see how it becomes a sub menu? And now you’ll have that dropdown effect. I don’t want to do that. I want these all to be all on one line. And just click Save Menu. And then down at the
bottom, check this out. Right here. Theme Locations. Now, some of your themes might offer different locations here. Your top menu is where I want this particular menu to appear. I want it to appear at
the top of my website. So I’m gonna check that
box and click Save Menus, and now it’ll overwrite
whatever default option was taking place up there. So super tricky, and a lot of authors forget to mention it to you. So let’s set a couple more things. You might have some page
templates that apply. This, again, should be documented in all of that amazing helpful resource of documentation that
your author gives you. But if not, and you say, but this page has a side bar, and I didn’t want a side bar on it, I want it to be full width, you’ll go into that page
that you want to manipulate. Let’s just say this one, About Us. And over here on the right side, there are page templates. Now, these are gonna
look a little different, again, depending upon theme
to theme to theme, right? But you, somewhere on this page, you should have the option to select your page template, and see I have one that says Full Width. That means that that
sidebar would disappear and my content would extend
the full width of my page. So super helpful option here. Some authors may have an area down here toward the bottom that would have a layout type of selection, so
you could choose that, and again, it would create that sort of full width page template. You’ll have all sorts of
really cool options in here. Sometimes they have an archive option, where if you wanted all of your posts from your blog to display on one page, it’ll give that sort of structure. So depending upon how
creative your author got. And then the last thing is you want to set up your footer area. A lot of people forget that you have the opportunity to create
a really dynamic footer that gives your user a
really great user experience. So in order to do that,
you’ll want to go to your Appearance and go to
your Widgets area, right? And this, again, is gonna
look a little different depending upon theme to theme, but you’re looking for something over here on the right side called Footer Areas. And you would have some opportunities to drop in content. Any of these, as you
know, on this column here, these are available widgets that you can drag and drop into these boxes and use them in that allotted space. Okay, so again, like I shared with you, it might be a variation of kind of these steps that I’ve
given you here today, but always, always look
for that documentation and look for that that
forum that that author might have for you, all right? If you have questions
though, specifically about your WordPress theme, we also want to be a resource for you, as well as your local Meetup group for WordPress. So be sure to Google around in your area or give us a Tweet. I’ll put our contact information in the description box below. We’ll see you next week
for WordPress Wednesday. Bye-bye, y’all. – Hey, everybody. Videos are a great resource for learning. But there’s nothing better
than learning in person from WordPress experts. We offer a beginner’s
course and an advanced track that can teach you everything you want to know about WordPress. Our classes start soon, so head over to
and register today.

60 thoughts on “😍 Make Your WordPress Theme Look Like the Demo

  1. freakin a! best tutorial ever. lol. just paid for an awesome site and it looked like crud with the pages I already had set up. I cant figure out how to select and use a certain demo over the others. I see every demo has its pages In the pages section do I place the demo versions I don't like on private or delete them? should I upload the child version and do this first?

  2. Short and to the point.

    Watching this video gave me a fresh perspective on what I was doing. (or lack there of)
    Guess what?! Someone spaced that there was even a tutorial file hidden someone and better yet, the need to unzip it! Thanks so much for posting this.

    Sometimes I think I was born a blonde.

  3. Here is my question…I purchased a theme for $80 to which there ended up being no documentation to it. The author said that he didn't have to list any due to copyright laws. I didn't know this at the time and I asked him for a refund. He never wrote me back, even multiple emails later. I hired a pro who said the theme had a lot of red flags. (this was after purchase). I even emailed theme forest and asked them to refund. It's been a battle for months and I am stuck with a theme that I can't use. Is this typical for purchasing a theme? The author looked fairly established and had good reviews. Is there a screening process for posting a theme in theme forest? Is there a way to check to see if documentation will be available before I purchase it?

  4. Thank you so much. i like the way you demonstrate the complex things in an easy way , but i want you to demonstrate it in detail that how we can edit the theme and get all the contents of a downloaded theme as in demo. 🙂

  5. thank you very very much this video worked for me i have one question what is a child theme and then should one use a child theme

  6. Really enjoyed the video. Is there a video available to help me with customizing the Allegiant theme? I really like the theme, it seems to have a lot of great features and plug-ins, even with the free version, but the documentation isn't too great.

  7. I just want to say hi and thank you so much for this video. About a month and a half ago I embarked on a blogging endeavour, completely from scratch. Fortunately your video came up as one of the first recommendations for me to watch on how to get my blog to look like the theme content, which I had meticulously chosen and purchased. I must say that your information was instrumental in getting me started and on the right track. I am so grateful! Cheers – Laura

  8. Hello, do you have a video on how to set up the footer – the way it is at the end of this video? Thank you. 🙂

  9. Super helpful! I went from total frustration to – I can do this! Thank you for your easy to follow tips. As a newbie to WordPress, this video gave me the boost I needed! AWESOMESAUCE!

  10. Ma'am… you ma'am… have saved my life…
    If there exists a Congressional Medal of Honor in IT Development… you have my nomination. THANK YOU.

    WordPress is doofus btw, thx for figuring this crap out.

  11. Great job! thank you… Can you make a video on how to add a YouTube video on a specific location, and what plug-in you would recommend.

  12. YOU ARE AN ANGELLLLLLLL!!!! If I was on my phone you would be getting LOTS and LOTS of happy emojis right now!! OMG! I am new to wordpress and never used a custom theme before and had no idea this is how it worked. LIFE.SAVER. If I believed in karma, I would predict you will live many lifetimes as the beloved queen of many nations! Thank you again! 😀

  13. How do I find the documentation for a theme that I have not purchased.. such as one of WordPress's standard themes. Since you down have to download these, and you only have to select and 'activate' them, I can't see a folder anywhere to access the documentation.

  14. This was SO helpful!! I've been sitting on my theme for months because I didn't know how to customize it. I have all my demo content up now, but only have one post to share (first post). How do I hide the rest of the demo content when I publish my first post? My theme documentation is not clear on this. Do I delete all the demo posts? If I delete them, will I be able to access them again? Thanks sooo much again for this video!!!

  15. i am facing an issue that i have downloaded a theme and they have not added documentation for the theme. then let me know how can i make it like demo. Actually i wanted to make the slider as like the demo slider but i cant find the option. Please help me, reply me quickly, i am loooking for quick response.

  16. I am taking a classs on how to build websites on free I was able to build one website and was able to active the theme just the way it was displayed.  Since then I have chosen several other themes for different website but I only get the blank portion of the theme.  Do I have to do all of those steps because on the free WordPress I do not see where I can follow you.  please help

  17. Thank you for putting this information out on the Internet! I wish I would’ve found this information on the Internet three days ago when I purchased my theme… Now I’ve been spending three days putting it all together to make it look like the demo with sample text and sample photos… And I have an even created one ounce of content because visually I need to see what this website is going to look like with placement texts and photos so then I can know which pages I want to make her what subjects with the natural flow of the website.

    This is how some of these websites get you… If you see this gorgeous theme and it’s not made very clear at all to individuals that are not web developers or web designers… They don’t make it very clear at all that your website is not going to look like the demo. And then you’re stuck paying the extra $100 + because you realize you have no idea what you’re doing and you can’t even comprehend half the features because you’re so new at this… That you end up having to pay the extra installation and then waiting 1 to 3 business days!

    Now that I know this… As a virtual assistant I have a set hourly rate… So I have advise my client to actually purchase the installation because it is way cheaper than paying me $19 an hour to make his download theme look like the demo.

    My client is already going to spend a good amount of money paying me to transfer content from his old website to his new website and also creating some additional blog post so why not help my client save time and money in general so that I can continue creating word press site/setting up WordPress sites for individuals that eventually want to keep up with their website on their own.

  18. Hi, I bought a theme from ThemeForest I just haven't downloaded it yet and installed it. I am new to this. I was wondering what"s the best way to change my current website theme to a different ThemeForest theme. I have content on the site and it's 11months old.. What the best way to change my theme? should I use a child theme? The new theme is nothing like the old layout? Or should I import and expert the content and after that erase the content plus erase the theme from my website and install the new theme that way. and if I have to erase the content and theme whats the bast way

  19. Very helpful thanks, I was wondering where this little sidebar was hidden :). On my side, I kinda have the opposite problem. I'd really like to see the side bar when I'm on the home page ! (This is not a static page, this is the «classic blog» home page thing you described). But I can't find how to make the side bar visible… I downloaded the free version of Cenote, and on the exemple in the pictures, the side bar vas visible on the main page. If you have any tips for this… thanks again for you video :).

  20. Thanks so much, this is an amazing into to the subject. Explained really well with good generic examples , yaaay from the UK 5*

  21. Thank you SO much for this video. I've been tinkering for hours trying to solve a problem and you have helped me greatly!!! <3

  22. Thank you so much for this video. You have saved me hours of frustration, as I blindly hunt around my WordPress website, trying to figure out how to change the look of it to match the examples. THANK YOU!

Leave a Reply

Your email address will not be published. Required fields are marked *