How to Create a Travel Blog With the Backpack Traveler WordPress Theme

Published by Darron Toy on



in this video we're going to show you how to work with the backpack traveller theme so this theme was released by our Mikado profile here on theme forest the theme was designed specifically for travel bloggers it comes packed with options there are many different elements and layouts that you can use to showcase your adventures the theme also comes with these beautiful pre-designed pages that you can import into your own site and use them as a starting point so let's get started this year is my local site and I now have backpack traveler installed and activated I'm going to navigate to plugins and here we can see that backpack traveler comes with several bundled plugins here we have backpack traveler chord this plug-in is absolutely necessary for you to install and activate in order to use our theme we also offer an Instagram and Twitter plugin these plugins are optional slider revolution in WordPress bakery page builder these are premium plugins that come bundled with our theme you do not need to purchase them separately in order to use them with backpack traveler slider evolution is optional and as for vert press bakery page builder we recommend using this page builder in order to have the layouts that are showcased on our demo site so now that I've installed backpack traveler and activated that backpack traveler core plugin I now have our themes options here in the admin panel so I'm going to navigate to backpack traveler options imports this is the section where you can import demo content the demo import process is beyond the scope of this tutorial however we will link another tutorial under the video description so you can go ahead and refer to that tutorial if you would like to import the demo so in this video I'm going to assume that you have the demo imported let's take a look at my site now so this is my homepage with the imported demo content in the following section we're going to talk about how various aspects of this page were created first of all we're going to talk about the header we're going to then talk about posts we're going to talk about various elements on the page and finally we're going to talk about the footer all right so let's take a look at the header backpack traveler comes with several different header layouts that you can use for your site on this page here we have a header that has a menu at the top and there is a logo in the center underneath the menu now let's open up a different page on this page here we see that the logo is in the upper left corner and it's smaller than the logo on our previous page so you might be wondering how did we set up these two different headers on two different pages so let's take a look at our theme options we previously mentioned backpack traveler options so these are themes global options over here in the sidebar you will see various sections such as general fonts header and more the settings that you apply here will affect all pages of our site so here I'm going to click on header and now we see the header options for our site here it says choose header type and as we can see there are several different header layouts that you can choose currently I have a standard header selected so it adds this header here now how did we have a different header on this page now let's open up this page I'm going to scroll down the page and here we see these boxes that say Mikado general Mikado blog Mikado logo so these boxes here these are local page settings and the settings that you apply here they will affect this page only so here if I expand the mikado header options it says choose header type and here we see that on this particular page we've selected a different header type it says centered with down logo so the options that you see here on the page many of them are the same options that you will find in global options what happens is if you set a certain option globally and you said a different option in your page the page option will take proceedings so that's because local page settings override global settings in order to learn more about how local and global settings work together you can check out our video on how global and local page settings in the bridge theme work we will leave that link under the video description Bridge is a different theme so the options and settings you see might be different than on your own theme but the logic behind global and local page settings is the same all right so let's take a look at our header a bit more closely we can see that it's comprised of several different elements we have a logo we have a menu and then we also have widgets in the following section we're going to take a look at each of these elements individually so let's start with the menu I'm going to navigate to appearance menus I'm going to click on manage locations so back-back traveler comes with several different menu locations and as we've previously seen there are several different header layouts that you can choose for your site and the menu location seen here they correspond to the different header layout so depending on the header layout that you're using you will want to use the corresponding menu location so this header here this header uses the main navigation area so this is where you can edit this particular menu you can also assign a new menu to this menu location now if you'll take a look at our demo site we see that here next to travel there's a little star so currently on my local site I don't have a star so let's see how can I add that so I'm going to go ahead and edit this main menu I'm going to expand this menu item and here it says featured icon so I'm going to set star and let's save this menu I'm going to refresh my page and now I also have this star next to my menu item now let's take a look at these visit areas next to the logo I'm going to navigate to appearance widgets backpack traveler comes with several different widget areas and some of these visit areas belong to the header now similar to the menu locations the various widget areas belong to various header layouts so these areas here that we are looking at they belong to these two widget areas here so let's open them up to see what's contained inside so here in the center in red logo down header left widget area we see a text widget I'm going to expand this widget so that we can take a better look and inside it we've copied and pasted to icon with text short codes so this is the first shortcode that's this element here and this here is the second short code now let's take a closer look at the short codes here it says custom icon and it's followed by a number now this number here this is the ID of my image that's this image here and when you import your demo content the images in your media library might have different ID if you want to change this image you can simply enter a different image ID let's go to the media library you click on your image here in the URL bar at the very end after the equal sign you'll find the image ID so you can simply copy this number and then go back here and replace the existing number and when you save this budget the image will be replaced so I'm going to refresh my page and indeed the image is now replaced looking at this icon with text shortcode you can also change the text so here it says get inspired so you can enter something different if you'd like you can also replace the link that this element leads to all right and now we also have another image with text shortcode and it's pretty much the same as the previous one so once again here you can enter a different image ID if you want to change this image here you can also change the text and you can also enter a different link all right so that covers this widget area now these widgets here they're very similar so you will want to edit this budget area here once again we have a text widget and inside this text widget we also have two icon with text shortcodes so you can edit them in the same way that I've previously explained now let's take a look at these budget areas next to the menu these widgets are added through these two widget areas here however when I open up these vision areas we can see that they don't contain anything so let's go into the page back-end to see what's happening so here I am on the page under the section mikado header and when I scroll down there's a section here that's called widget areas and in these two fields it says choose custom header widget area one and two now if I was to set this as default then the visit areas that my header would be using are these two widget areas however for this particular page were actually linking to custom widget areas so custom widget areas you can create them here at the bottom of the visits page these here widget areas that have an X mark next to them these are all custom widget areas you can also delete them by clicking on the X icon so let's see which custom budget area this page is using it says header widget top left so let's find this custom widget area so here it is let's expand this widget area and here we have a custom HTML widget so in this custom HTML widget we added a menu that's this menu here and you can change this menu by editing some bits of the code here first of all we see it says source and we have a link this link here it's pulling this little globe icon here so if you want to change this image next to destinations you can simply enter the link to one of your own images here here we have text that says destinations so you can modify this text if you want to name the menu something differently now over here we have these anchor tags and this is where you can edit the actual menu items so here you can change the link of the item and you can also change the name of the links so for example this is for UK that's the first link item so in this fashion you can change all of the links they're all within anchor tags you can change the link and then you can change the name of the link all right so let's take a look at our page again let's take a look at these social icons here on my page under the custom header widget area – we see it at its utilizing the header widget top right widget area so that's this visit area here let's expand it and inside this widget area we can see that we've added some backpack travellers social icons budgets this widget is located here so you can simply drag this widget and add it here if you want to add more social icons you can also expand the current widgets and you can add your own information here so we've covered the budget areas that are seen here on page loads now when it starts scrolling down the page the sticky header appears and once again we see some widgets here now let's go back to widgets the visits in the sticky header are added through the sticky header widget area but when I expand this widget area once again we see that it contains nothing so let's take a look at our page again over here under Mikado header we have a feel that says choose custom widget area in sticky header menu area so once again we're using a custom widget area here and it's the divided header widgets so let's look for this custom widget area here it is let's expand this visit area and in this widget area we also have some social icon widgets so this is where you can edit your budgets for the sticky header all right now let's take a look at the logo I'm going to navigate to our theme options general and this is where you can upload your theme logo so the logo that we uploaded here it can be seen here on this page however on my home page I have a much larger logo with some text underneath so this page is using a different logo than the logo that we uploaded in global options so let's take a look at the page again let's open up the mikado logo box so we can see that on this particular page we uploaded some different logo images so that's why on this page the logo is different than on some other pages of my site we can see here that the logo image that we uploaded is much larger than the logo as it appears on the site this is because logo images are being scaled down into a space that's half their size and this is done so that the logo will be crisp on High Definition displays so when you're uploading your logo images you should just make sure that you're uploading an image that's twice as big as you want it to display on your site and it will appear crispy clear on High Definition displays we also recommend uploading your image in all three of these fields for the default dark and light logo versions and we recommend that all three of your images are the exact same size and this is in order for the logo to align properly so if you upload a logo image and it doesn't appear to be centered or your experience some other alignment issues you should just make sure that all three of these fields are populated and that the logo image is the same size in all three now the logo image dark and light these are used when you're using one of the light or dark header skins we've now covered the header so let's take a look at some of the remaining elements on the page here we can see a blog slider backpack traveler comes with many different layouts that you can use to present your posts so this here is a slider that showcases your posts here we also have examples of blog listings so here we have a nice blog list with these square images now let's go into the backend of the page and take a closer look at the blog slider I've opened up the blog slider shortcode and down here it says image size so we have several different options for our blog image sizes this particular blog list is using orig all sizes but you can also have your images crop to square a landscape or some other sizes now on this list here this particular list is using square images when you're creating your posts we recommend uploading a blog list image that's at least 1300 pixels wide in 1300 pixels tall and the reason we recommend these image dimensions is so that they will crop properly so let's take a closer look at one of the blog posts so this year is our single post let's go ahead and edit this post down here on the page there's a field here that says blog list image so this is the image that will appear on your blog listing shortcodes so we recommend that for this image here you upload an image that is at least 1300 by 1300 pixels now over here we have an image under featured image and this is an image that will display on the blog single page so if I change this image let's see what happens I'm going to save this post and let's view this post so this here image this is the featured image so it's important to differentiate between the featured image and the blog list image the blog list image this is the image that will appear when you're using a shortcode that displays your blog posts for example the blog slider shortcode let's take a look at the remaining elements on this page if you want to display your Instagram posts like we have done here on our demo site you will need to make sure that the Instagram plug-in is installed and activated that's this plug-in here if you don't have this plug-in installed you can do so in appearance install plugins and once you activate the plug-in navigate to theme options social networks over here you can connect with your Instagram account if you're experiencing any difficulties with connecting to your account you can reset Instagram please follow the instructions from our article that explains how to reset Instagram we will leave a link to that article under the video description let's go back to our home page or here it says top categories now these categories here they are not post categories their destination categories let's take a look at the back end again when you install backpack traveler you will notice that it comes with two custom post types we have destinations and we also have testimonials so the destination this is one of our custom post types and this is where you can manage your destinations over here we have a link that says destination categories so this is where you can edit your destination categories here on my site I have these images over the category names but if you don't see an image and you would like to add one you can simply edit that category so I'm going to click on edit destination category and this is where you can add an image for this category now let's go back here on the destination category page we can see destinations that belong to this particular category so let's open up a destination here I'm going to click on India this is our destination page so in order to see how we built this destination page you can click on edit destination item on my destination page I see this text that looks like code and the reason for that is because WordPress bakery by default is enabled for pages only so let's go ahead and change that I'm going to click on WordPress bakery page builder role manager here under post types it says pages only I'm going to choose custom and here you can go ahead and check all the post types that you see and then click on Save Changes let's refresh my destination page we now have the nice visual page builder alright now let's go back to rural manager again I'm going to click on general settings under wordpress bakery you can also go ahead and check the box that disables the guttenberg editor because you will be using the wordpress bakery editor and then go ahead and save changes alright so let's take another look at our destination page so the body of the page was built using WordPress bakery and you can pretty much see how we created each section by exploring the page admin here it says suggested daily budget let's see how that section was created here we can see a short code that says suggested daily budget so that's how we created this particular section this section here with the books this was created using a product list so if you would like to have something similar on your destination page you will need to install and activate WooCommerce and add some products all right now let's take a look at this sidebar here here we see a map in previously when we view the destination category page we saw the same map so I'm going to quickly open that page again this is the map so now I'm going to show you how you can change this image so on your destination page down here it says mikado destination additional image this is the section where you can upload a different image so the map it's not a Google map it's a custom image let's go back to the destination category page here we can see that there is also a photograph at the top and the photograph it's the featured image so this is where you can change that image looking at the sidebar again there's a button here that says see articles and when I click on the button it takes me to a page that lists all the posts that belong to that destination in order for this to work properly you need to set a destination posts archive so I'm going to show you how to do that I'm going to go to global options destination and over here it says destination posts page and currently we have a page called destination posts archive set in this field so let's locate this page here it is and what's specific about this page is its using the destination posts page template it's very important that you have a destinations post page set here and that this page is using the destination posts page template because if you do not have this page set then the page that lists your posts here for the destination this will not work properly sometimes when users import demo content they accidentally delete this page here the destination posts archive page so if this happens to you that's fine you can simply add a new page set the page template to destination posts and then set that page here in global options so that's important in order for this button here to work properly all right now let's take a look at this menu here when I click on certain menu links it Scrolls down to certain sections of the page so this is a neat effect let's take a look at the destination page back-end to see how this section was created down here we have a section called Mikado additional destination sidebar items this is the section where you can add items for this menu here so for each menu item you can upload a item image you can enter your text and you can also enter a link for that item for our demo site we added links that points to certain sections of the page however you can add any link you want it doesn't have to take users to some place on that page now if you do want to create this one page scrolling effect I'm going to show you how that's achieved thanks to see it takes us here at the top so let's find that section on the page this is a rose so let's edit this row let's click on Mikado settings and over here there's a field called Mikado anchor ID and we entered an anchor called sightseeing all right now let's go back to our menu so here for the link you will want to enter the link of your destination page so when you go to your page this is the link here and then you'll want to make sure that it ends with a slash followed by a hash and then you have your anchor text so this is the text that we entered in the row which showed a few moments ago down here we have a custom class that says MK DF – anchor and this text is very important for you to enter if you want the scrolling effect to work so if you want the scrolling effect you need to make sure that this class name is entered otherwise the scrolling will not work so this is how we created the various items in our sidebar we pretty much covered destinations in a nutshell let's go back to our home page finally we're going to talk about the footer on this page here we can see that the footer is comprised of two different sections there is a top footer and there's also a bottom footer in order to add content to your footer you will need to add widgets so let's navigate to appearance widgets here we will find visit areas that belong to the footer let's take a look at the top footer here it says footer top column 1 let's open up this vision area inside we see that there is an image widget that contains the map so this section here this is just a regular image it's not a Google map and you can change this image by editing your image here alright so you can take a look at how we created these various widgets by exploring the footer widget areas for the menu here at the bottom let's find this visit area so this is the footer bottom column – and here we see that it contains a navigation menu widgets so here you can set your footer menu the available menus here are the ones that were created in appearance menus so in this video we covered the basics of working with backpack traveler I hope that you enjoyed the video and that you learned something new if you would like to be notified about upcoming videos very share helpful tips and tools for building your site you can subscribe to our channel if you have any questions about the video feel free to leave them in the comment section thank you for watching


Leave a Reply

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