Build wordpress website portfolio

  Hello andwelcome to an Anujpr course. I'm Anujpr and today you'll learn how to built a WordPress portfolio site in under one hour. For this, we'll be using the Adios WordPress themethat's available on Envato elements. It's a great theme, it definitely hasa unique design and lots of features that will allow us to quickly andeffortlessly build our portfolio. In this course, we'll be downloading and installing the Adios theme alongwith any necessary plugins. And then proceed to customize it to our liking. So without further ado, let's begin. Before installing the Adios theme, youneed a working installation of WordPress. Now, I recommend that you developyour website first, locally. And then once everything is done,deploy it to a live server. So in this lesson, you're going tolearn how to install WordPress locally. For that, we need a piece ofsoftware that will install PHP, because WordPress is based on PHP. And we also need a MySQL databasethat WordPress needs to connect to. Now, we have such a software,and it's in fact free, available for both MacOS andWindows, and it's called MAMP. There is also a MAMP Pro version,which offers some additional features. But for just starting out, setting up a really basicWordPress environment locally, the free version is everything you need. So go ahead and download it foryour operating system. And once the app is downloaded, we're gonna open it, andit currently looks something like this. Now this is currently not started,once you install it, you might need to open the settings andconfigure. So all the settings that you see here,for example, when starting MAMP, you can choose to startservice automatically. You can configurethe various ports MAMP uses. I left mine at default because Ididn't see a problem with that. And then you can choose the versionof PHP that it can use, again, I left mine at default. I chose the web server as Apache, andI changed my document root to Local WP. Of course, this is entirely optional,the default installation for you might look something like yourusername, MAMP, and then HTDocs. That's where you have to copy all of theWordPress files in order for this to work. So I changed mine to Local WordPress,and I'm gonna keep it that way. Now once you configure everything,you just hit Start Servers. And this will start the Apache andMySQL Server, and you're all set now. The next step is to install WordPress,so for that, we need to go to wordpress.org,not .com, be careful, .org. Then we hit download WordPress, andthe latest version at the time of this recording is WordPress 4.9.1,so we're gonna download that. I'm gonna save mine inthe sub course folder, you can save yours whereever you want. And that downloaded WordPress,now we just need to install. Now, to install WordPress,there are two steps you need to follow. One, you need to create a databasethat WordPress will connect to and will store all of the websiteinformation into. And two, you need to copythe WordPress files that we just downloaded into a specificfolder on your hard drive, in order forus to be able to work with it locally. So the first thing we'll do is createthe database, that's very simple. From the MAMP application,you hit Open WebStart page, then go to Tools, PHP MyAdmin. And then on the left side here, you'regoing to see the available databases. And I already havea database called WordPress, because I have another installationof WordPress on my computer. But in your case,you would need to create a new database. So go to databases tab, andchoose a database name. In my case,I'm gonna simply say tutsplus, but you can name this whatever you want,and then you would hit Create. So right now we have a brandnew database called tutsplus. Now we need to copythe WordPress installation files into our working folder. Going back to my folder here, I'm gonnadouble-click this and extract the archive. And then copy everything insidethe WordPress directory. And then I'm gonna navigateto my local WP folder. It's the same folder that I showedyou right here in the preferences. And actually I can just hit this button,And it takes me there directly. Now I have another WordPress installation,just like I said, it's called wp491. But we're gonna create a newfolder we're gonna call tutsplus. And inside tutsplus, I'm simplygoing to copy and paste those files. In order to access those files,I'm simply going to open localhost:8888/tutsplus, which isthe new folder that I just created. So this will prompt the WordPressinstallation screen. Choose your language, hit Continue. Then WordPress tells usthat there are a couple of details that we need toknow before installation, so we'll hit Let's go. The database name that we created iscalled tutsplus, if you remember. Let me show you that again, right, so this right here is the databasethat we'll be connecting to. The username will be root,password will also be root. Database host, just leave it at localhost. And you have the optionto add a table prefix. In my case, I'm gonna saywp_tutsplus_ this is optional, you can just leave the wp_that's there by default. Hit Submit, and then run the installation,It's gonna ask us for a site title,I'm gonna say Tuts+ WordPress. Username, I'm gonna say admin or adi orwhatever you wanna put in there. Password, because we're working locally, we don't need a really complicatedpassword, so I'm just gonna say 1234. If you're worried about security,maybe you're sharing your computer or other people have access to your computer,then go ahead and use a different password. I'm gonna hit this check mark and then I'm gonna hit, Discourage searchengines from indexing this site. Because there is no point it doing that,since we're working locally. Then I'm gonna hit Install WordPress,and that's it. WordPress has been installed,now we just have to log in. I entered my credentials there,and we're in. This is the WordPress back end,this is where we're gonna control the entire WordPress installation. And if we hit this link rightthere that says Visit Site, yeah, this is our actual front end,this is what the visitors will see. Now that our WordPressenvironment is all set up, it's time to install the Adios theme, and we're gonna be doing that inthe next lesson, see you there. Let's start our portfolioside by first downloading and installing the Adios theme. Now the theme is availableon Envato Elements. So once you log in and you search forAdios, you're gonna find this page. And from here you simplyclick on download and you choose whether ornot you'll use it for project or trial. It doesn't really matter. If you're using for a real project,then go ahead and type that project name because you are going to get a dedicatedlicense for that specific project. So once you download it, you are gonnahave an archive, something like this and I'm gonna extract it. Let's have a look at what's inside. So first you have some demo content. We're gonna have a lookat this a bit later. Then you have the documentationin the form of an HTML file. Really handy if you don'tknow how to get started. Then you have some licensing information,plugins, and then this is what we'remostly interested in, this is the actual themethat you see right here. So to install it, really, really simple, we're gonna heard back to ourWordPress Dashboard right here. We're gonna go to Appearance > Themes. We're gonna hit Add New andwe're gonna click upload theme. Now you can either choosethe file from your hard drive or you can simply drag and drop. And once that's loaded,you hit install now, and as you can see,the theme has been installed successfully. Now, a couple of options, we can eitheruse a live preview, or we can activate it. So let's go ahead and activate it, becausethat's the theme that we want to use. And right now we can see thatthe Adios theme is active, but there are a couple of extraplugins that the theme requires, and some additional onesthat the theme recommends. So let's go ahead andinstall those plugins. We're gonna hit this link, And then you can see all the pluginsthat we need to install. Simply select all of them,select install and then apply. This is gonna take a little bitbecause there are seven plugins the theme needs to install. All right,all the plugins have now been installed. So we're gonna go back here,and we can see the plugins are installed in fact butwe also need to activate them. So we're gonna select all ofthem again and hit activate, apply, andthis will activate all seven plugins. Now after activating those plugins, you're gonna see a couple of moreoptions here in the main side bar. So this is before, and if I do a refresh, you're gonnasee the extra options we have. Pages, four, social sites, team,portfolio, contact, testimonials. These weren't here before,they were added by the theme. We also have access to WooCommercealthough we're not gonna be using it in this tutorial. And we also have access tothe WPBakery Page Builder. This is the former Visual Composer. If you're familiar with it, it'sbasically a visual interface that allows us to build WordPress pagesmuch faster and much easier. So we have successfully installedthe Adios theme, and all it's plugins. Now if we're gonna do a refresh,on our homepage here, and we're gonna see it changing fromthe default WordPress theme to Adios. Now currently it displays the blog page,but we don't want that. We want to customize it. And we also want to add our own content. Now for customizing and adding our owncontent we have two options basically. One, start from scratch, ortwo load the demo content, and the demo content is the stuff that you seeon the official theme demo, right here. So because I saw a lot of pages anda lot of elements that are suited, or are suitable forwhat I need from this portfolio, I'm going to load the democontent because that is much, much faster than creatingour content from scratch. And then we're gonna take that democontent and adjust it, customize it and change it to our liking. So in the next lesson we're going to learn how to load that demo content,see you there. With the theme installed,it's now time to add our own content. Now to do that we have two options, one,build all of our content from scratch. Or two, use the demo contentthat's provided by the author, and customize that one. The second option is much faster, sothat's exactly what we're going to do. Now the demo content, just in caseyou missed it in the previous lesson. Is the exact content that yousee on the official theme demo. And here we actually can see all of thepages, right, all of the home page styles. All of the block styles, all of the portfolio styles,we can have a look at them. See which one would fit the best,and then you use that one. Now to load the demo content,we're gonna go back to our Dashboard. We're gonna go Appearance, Theme Options. The theme provides a very handyTheme Options panel that will control a lot of the settings forthe theme. We're gonna go to Demo Importer,and we're gonna hit Import Demo. And as you can see,importing a demo will create pages, posts, add images, theme options,widgets, and others. So, basically, by doing this, you get an exact copy of the officialdemo that you saw right here. So we're gonna Import Demo,hit OK, this might take a while. Well I think that took abouttwo minutes in my case, and the demo content has been imported. Now if we're gonna take a look at post,for example, we're gonna see a bunch of poststhat were not here before. By default Word Press just comeswith this Hello World post. Pages, we're gonna see a tonof pages already made. All we have to do is rename the page,and add our own content. We have a bunch of images thatwere added to the media library. And you'll definitely recognize the images that are being usedhere on the official demo. So the demo content hasbeen properly loaded. Now it's time to customize it to fitthe portfolio side that we want to create. And we're gonna start thiswhole customization process in the next lesson bycreating the navigation. See you there. Our portfolio will havea pretty simple page structure. Apart from the homepage we'll haveof course the portfolio page. We'll also have the blog page,and a contact page. Now of course fell free to customizethese in any way you want, and in any way that you see fit foryour own project. But forthis particular demo that's quite enough. So how do we create a navigation? Well let's have a look at our homepageright after we imported demo content. If we do a refresh. You'll see that we alreadyhave a working page, right? The Homepage was set to this bit. We have pretty much everything yousaw in the official demo home page. But what about the navigation? Well the navigation is actually here, youcan't see the whole navigation because we have this admin top bar over it,but that's not a problem. We can still click it right here, and thenavigation should actually look like this. We hit that button andwe have all of the menu items right here. But in our case it doesn't show anything,that's because we haven't defined a menu. Now lets go ahead and do that,first we'll go to pages and we'll determine what pages we'llbe using for our navigation. The home will be our home page,this is already set to the front page. This was already done when we importedthe demo content so no change needed here. We need the portfolio. Now for the portfolio we actually have twooptions, 1, 3, or 4 columns or a Masonary. And we can actually go to the officialdemo and we can check out. Those options. So this is portfolio 1,this is portfolio 2, this is with 3 columns. And then portfolio 3 is with 4 columns,and portfolio 4 is with a masonry layout, and I quite like this layout,I think that's what I am gonna be using. So we'll go back here toPortfolio Masonry, we'll hit Edit, and I'm gonna change it's name to My Work. Again feel free to edit thisin any way you see fit. I'm also going to edit the page name here in the address bar to my work. As you can see that usesthe portfolio template. We have a couple of options here but we'renot gonna tamper with these just yet. And then move onto the nextpage which is the blog. For the blog we have four or actually three options, blog list,blog masonry and blog list with sidebar. Since we used the masonry template for the portfolio I think we're gonnabe using the same one for our blog. So we're gonna go back here to All Pages,and under Blog Masonry I'm gonna hit Edit. I'm just gonna rename this to Blog. And blog here as well, make surethe template is blog masonry, and I'm gonna hit Update. Finally we need a contact page. For contact we have a single templatewhich looks something like this. We have a contact form and an addresswhich is of course totally optional. So we're gonna go back to all pages and where it says Contact I'm actually gonna rename this page to get,oops, Get in Touch. Also gonna Edit the promo link here. Get in Touch, and the template isactually the default template. And this is what I was telling youabout the page builder from WP Bakery, the former visual composer, right. This is how the contentlooks like inside this page, so this is like a simplifiedrepresentation of what we actually see on ourcontact page right here. So this right here is the contactform which is generated by a plug in called contact form 7,all right. This is the text before it,and this is the title right, where it says Get In Touch. It's this title right here. And we can use this visualcomposer to edit or add elements, it's really really simple. So I'm gonna hit an Update, andthen we'll go to Appearance, Menus, andWordPress created a main menu for us, we can save this one or createa new one, it doesn't really matter. And we can go ahead andadd menu items from the left. This is a list of all available pages. So we're gonna start with this,Home, then we're gonna use Blog or yeah blog. Then My Work, which is the portfolio,and then contact which is Get in Touch. So I'm gonna hit add to menu. Now once we're here I canstart moving these around, I can create sub pages if that's what Iwant or I can create parent level pages. So we have Home, My Work which isthe portfolio, blog, and then contact. And you have options foreach of these pages, you can change the navigational label,title attribute. You can hide the navigationallabel if that's what you want but I'm gonna keep them, oops,just misclicked there. I'm gonna keep them just like this. So I'm gonna hit Save Menu. And then if we go toManage Locations we can see that the theme has a single menulocation which is called Main Menu, and we're assigning it the menuthat we created just now, great. So now we'll do a refresh. And if we open the navigation we'regonna see our brand new menu. This takes us to the home page. This takes us to the portfolio page,which he uses that masonry layout. This will take us to the blog pagewhich again uses a masonry layout. And finally. This leads to the contact page. And currently the contactform is not being displayed, probably just a small glitch here. But we'll be creating our own contactform and we'll add it afterwards. Right, so our navigation works. All of our pages are set. Now we'll take each individual page andcustomize it to our liking. We'll begin in the nextlesson with the homepage. See you there. In this lesson we'll be editingthe homepage structure. Now thankfully, the audio stringthat we're using here includes the WPBakery Page Builder whichis a plugin that allows us to visually edit a WordPress pagevery quickly and very easily. It's formerly known as Visual Composer. I'm sure a lot of you know about it. So if we take a lookat our print homepage, let's see what we're gonna keep actually. So we're gonna keep the slider. We're gonna keep this section, althoughwe're gonna be editing the contents. The services, I don't really needthe services here for a portfolio. We're going to go back to our dashboardand we're going to go to pages. We'll open our homepage. And then inside we're gonnasee all of the elements that have been added to thatpage using the page builder. So we're gonna scroll down. This is the second sectionright below our slider. Yeah, sothis row right here with the services and the block quotes,I don't really need this. So I'm just gonna delete it. I'm gonna hit this x, and then okay. And let's see what else. These content boxes Idon't need them either. So I'm gonna delete that entire rowas well, and I'm gonna hit Update. And then, when I do a simple refresh, you're gonna see that thatsection has disappeared entirely. Now this is the case study weare going to be using this for our actual portfolio,so we will keep that. I will go back here, then the team. This is a portfolio for an individual soI don't really need the team section. And then stories, this is forblog entires, I'm gonna keep them. Pricing table, no, I don't need these soI'm gonna delete them. The pricing table, yeah,delete these as well. And then what else is afterlet's see those pricing tables. We have these clients andthen we have these section with the statistics which I don't need andI also do not want this tract here. So we're aiming fora very simple home page. We're gonna delete this row And then,this row with the testimonials, and then, this one with the counter box,and also this one, okay? So all we're left with in our homepage,is the hero slider, and then, we have that section,which can be used as an about section. And then we have portfolioentries then blog entries. And that's about it. We'll have the footer at the very end. So we'll hit Update. And then we'll do a refresh. And you'll see we're only leftwith the stuff that we need. Currently, the portfolio andblog section does not work. We need to tweak thingsa little bit there. Then we have the footer, that'sthe final structure of our home page. The next step is now to changethe content on the site's home page and on the rest of the pages with our. And we'll start in the nextlesson with the content for the home page slider, see you there. The homepage slider is the veryfirst thing we'll customize. And because this a portfolio, we'll be using this area to showour most important projects. Now, for this particular demo, I assumed that the person building theportfolio is interested in photography, he occasionally does backgrounds, andhe also dabbles with mobile design. So the portfolio will revolvearound these three main categories. I went ahead andgrabbed some assets from Envato elements just to use as demo images, basically. And I uploaded those images inthe media library right here. If you don't know how to do that, well,you go to Media > Library and Add New. And then, you can upload whatever imageyou want to use in your portfolio. So starting from here,we have 13 images that I added, and these are the ones we'll be using forour portfolio. So coming back to our slider,the slider currently has three slides. Of course,you can add more if that's what you want. But since our portfoliohas three main categories, that's what I'm going to be using forthis slide. So we're gonna go back to our Pages. And I'm gonna open my Home page. And the page builder showsme three hero slider items. Now, I can go to each one andedit that slider. I can choose the image, simply goingto select a file from my media library. Let's say I'm going to putthe photography first, and I'm quite fond of this winter background. So I'm gonna set that. And then, the Smart Heading is thisone right here where it says Intro. I'm going to say Photography. And then, the Heading,I'm simply gonna say Winter Landscape. And depending on style forthis hero slider, you can have the option to add twoimages or to set a Button Text. But in my case, all I can changehere are the Images or the Image, the Small Heading and the actual Heading. So I'm gonna save the changes, andthen I'm gonna Update this page. And then, if I do a refresh, you'll see the first slide beingreplaced by the one that I just added. So let's go ahead andadd edit the next two slides. I'm gonna hover overthe second slider item. I'm gonna hit Edit, I'm gonna usea different image from my media library. Let's say this one,I want it to be about the background. So I'm gonna use thisnice galaxy background. I'm gonna say Background,I'm simply gonna say Galaxy. And then, for the third one,I'm going to be using one of these slides from Mobile Design,maybe this one. I'm going to say Mobile Design andDemo Mobile App. Save changes, andthen I'm going to update this page, and then do a refresh on the front end. And now,we'll be able to see Our finished slider. Now, of course maybe these are notthe best images to display here. But again, this is a demo, so I justwanted to show you the technical part of how to edit this slider. Now, the slider itselfhas a few more options. If you were gonna click on this littleicon here that says Hero Slider settings, you can choose which style to use, and youcan see those styles in the official demo. You can choose whether or not toautoplay it, you can choose the speed, the pagination style. So it's quite configurable. In my case,I'm gonna be sticking with this one right here because it looks very,very good. Now that the slider is done, let'smove on to the rest of the Home page. That's coming up in the next lesson. Our portfolio home pageis not ready just yet. We still have four sections to deal with. So let's start customizing the sectionthat's right below our main slider. And this is what I'mtalking about right here. So we're gonna go back to the main page. In the back end, of course. And here we can seethe four columns of content represented by thesecolumns in the front end. So the first thing I'm gonna dois get rid of this fourth column, because I don't want that. Instead, we're gonnafocus on three columns. So I'm gonna delete thatimage block right there. And then I'm gonna hoverthis custom text here. I'm gonna select the numberof columns that I want. And in my case,I want three columns of equal size. So I'm gonna hit that. Let's hit Update. Now if we refresh. And we're gonna see the updated layout. Awesome. Now going back. I'm gonna edit this text block and insteadof bonjour, I'm gonna simply say, Hello. And I'm gonna edit this text block, and instead of this text, andI'm gonna use this text. Now I wanna link my portfolioto the portfolio page, so I'm simply gonna hit this. And I do a search my work andit finds the page automatically. I'm gonna apply that. And then get in touch, I'm gonna createa link to the contact page, which is this. All right, perfect. Save changes there as well. And then forthis third section I'm gonna edit. And I'm gonna paste a quote bySteve Jobs that I really, really like. So I'm gonna hit Blockquote. And the quote says, Design is not justwhat it looks like and feels like. Design is how it works. Really nice quote there from Steve Jobs. And, let's see. I'm gonna edit this manuallybecause I want to add a site. Yeah, let's save changes,let's update the page. I think I want a littlebit more space here. For some reason it doesn'tgive me the space that I need. I try it in visual mode, save changes,update, and there we go. All right, and that's how this aboutsection, or the hello section, should look like. Now let's move on to the case study,and this will be used for the portfolio mostly. As you can see from the demo here, thecase study basically displays a list of portfolio entries and also filtering. So I'm gonna go back here to Latest Works. I'm gonna hit this edit button. I can choose the style. I can choose to show the headingif that's what I want. So I'm gonna simply say, Portfolio. And here I can edit the categories thatI wanna bring portfolio posts from. So from now I'm gonna save the changes. I'm gonna hit update. And we're gonna go ahead andcreate some portfolio entries. All right, currently it grabs all of thecategories that I have in the portfolio, but maybe I don't want that. So let's see,let's open the portfolio here. And these are all of the projects forthe portfolio, but I think I'm gonna add some of my own. So Add New. We're gonna enter the title. And for the title, I'm actuallygonna start with these, like for example Winter landscape. Yeah, this should becategorized as photography. And I can choose to add or to createa gallery for it, if that's what I want. But because this is about photography,I think I'm just gonna set it to a Lightbox, sothe image will open in a Lightbox. And the only image thatI'm gonna add is this. And also,I'm gonna set it as a featured image. That's very important. If you don't set it as a featured image,it will not show up in the portfolio. So I'm gonna publish that. And then we're gonna go back to ourpage and right here, for Latest Works, I'm gonna choose the categories thatI want, photography to start with. And then we go back here andwe scroll down to the portfolio, we're gonna see all of the postsfrom the photography category. If I decide to add another category, let's add a new portfolio item,for example, for mobile design. All right, let's say Demo mobile app. And we're gonna choose Add New Category. I'm gonna call it Mobile Design. And let's create a slide show for this. So I'm gonna select this. As one slide, I can give ita title if that's what I want. And then I'm gonna add another slide,maybe this. And yet another slide, maybe this. Let's actually give these a title. Let's say Slide 1. Again, this is just fordemo purposes, Slide 2, and Slide 3. All right, sothis will link to a single portfolio page. And also, I'm gonna set a featured image. Let's say this, for example. All right, let's publish that and then we're gonna go back. To our main page here. And we're gonna do a quick refresh. And in the Latest Works,I'm simply going to add another category here, Mobile Design,and I'm gonna save changes. So hit Update, and now if I do a refresh, you'll see that the portfolio displays theitems from mobile design and photography. And I can filter these. Like this. And of course, if I click on this image, which I set to open in a Lightbox,it's just gonna open in a Lightbox. If I click this image it's gonnaopen in a single portfolio page. And right here, you can actually see the slider for that portfolio item. And right here,it's the title that we set previously. So this section is pretty much done. Let's move on to the blog stories. For the blog stories,we have a couple of blog posts that were added as partof the demo content. So let's go back to my main page,scroll down. Where it says Blog News. Or actually, instead of stories here,I'm gonna say, From the blog. Save changes. For the blog news, I'm gonna select the categoriesthat I want to display posts from. In my case, let's say forexample, from design. We have a couple more optionshere like how to order these, or how many posts per page do we want. But I'm gonna stick with the defaults. And for the Twitter stream,I'm gonna to enter my own username here. Hit Update. So now we go from thissection to this section, which has a different title. It displays blog entriesfrom my chosen category, and also displays my ownpersonal Twitter stream. Finally, lets turn ourattention to the footer. Now the footer can be controlledfrom two different places. It can be controlled oneach individual page, and you can select different template. You can choose whether ornot to display the footer. You can choose a different logo for it. You can choose whether ornot to show the social icons and also to modify the copyright text. So this is locally,this will only work for the home page. If you want to effect the footer globally,then you need to go to Appearance, Theme Options, and then go to Footer andedit pretty much the same options. But the difference is,this will be applied to all pages. So the changes that I wantedto make are very small here. Simply wanna say,copyright 2017, my own name or your own name, or whatever it is,and I'm gonna save the changes. And then,I want to display the social icons but I don't want as many socialicons as we're seeing here. Currently there are five social icons butI only want three. I want Twitter, Facebook, andmay be Dribble or LinkedIn. So to edit those,you would go to Social Sites. And here, you can see the fivesocial sites that are defined for this particular demo. So what you can do is trashthe ones that you don't need. For example, RSS, I don't want RSS soI'm gonna trash that. And I don't want Pinterest, soI'm gonna delete that as well. So what you do in order to get the correctlink, you just edit these entries. And instead of the hash sign, you justput, for example, this is for Twitter, so twitter.com/adipurdila. And then you can select whatever icon youwant for that particular social site. All right, so I'm gonna hit Update. And then I'll do a quick refresh. And apparently I didn't choose an icon. I said I would choose an icon,but I didn't. So let's choose Twitter here. Update. And now we go back. And now we have just three social sites. And the Twitter link, or the Twitter icon,links to the correct page that we set in the back end. And as we can see,the copyright text was also changed. And with that, we've actually finishedcustomizing the home page, of course, for this particular demo. In your own project,you will probably do way more than this. But again, I wanted to focus onthe technical side of this and show you exactly where and how you can customizethe various aspects of the Adios theme. So as I was saying, home page is now done, let's move on to the portfolio page,that's coming up. The portfolio page will present all ofour projects from all of the various categories that we'll be creating. It's super easy to use, solet's see how we can customize that. So we'll go to our portfoliopage from our navigation. And the first thing I wanna dois get rid of this Intro text. So we'll go to page, we'll find My Work, which is our portfolio page, andwe'll go to Portfolio Options right here. We can choose the portfolio style. Currently it's set to Masonry, butwe can change it to whatever we want. Whether or not we enable the filter, andthe filter being this one right here, we can choose to only displayposts from select categories. So let's display postsfrom Mobile Design and Photography because these are thecategories that I added personally. I can also exclude certain categories. And then, on the header,I said I wanted to get rid of this Intro. Well, that's actually very easy to do. We just go to, let's see, Title Wrapper. And we'll simply deletethis Subtitle text. Then we'll hit Update andthat text is now gone. And that's pretty much it,really, for this portfolio. There are not a lot ofthings that we can do to it. For example,this project opens in its own page. And I've actually shown you this before, how it creates a nice slide, or a slider. And then you also haveaccess to previous projects that you can open right here,or to next projects. So just by choosing the type of layout that we want for our portfolio,all of our work was done, basically, because everything was configuredin advance by the demo content. Now, of course,you can go in here and you can change all of these options to configurethe footer page as you see fit. But for me personally,the way it looks right now is perfect. And just to go over itonce again very quickly, here's how you add a portfolio item. You go to Portfolio > Add New,you give it a title, let's say Background. You add the new category,if that's what you want. Or you can simple use an existing one,like for example, Graphic Design. And then you add one or more slides. In my case, I'm gonna add a single one. Let's call this Abstract Background. And then you choose where thatportfolio project will link to. A Single Page will open in a dedicatedpage where it shows details. Lightbox, it opens in a lightbox. External URL just goes to an external URL. Now if you were gonna openthis in a single page, you have access to the project details. You can add your client name andyour designer name. So let's say your client nameis Envato and your designer, this is the Designer Title,let's say Adi Purdila here, it's my name. I'm gonna set a featured image. And I'm gonna publish it. So now if I refresh my portfolio page, Now let's also show that category My Work. All right, so I wanna showthe Graphic Design category as well. So I'm gonna hit Update and then refresh. And I have the Graphic Design category. So when I click this,it goes into a dedicated page. It shows me my clients, it showsme the designer, and the category. And of course, if I have multiple slides, they will create a nice slider right here. And with that,the portfolio page is complete. Let's move onto the blog page. That's coming up next. The next page on our to-dolist is the blog page. There are a couple of options tocustomize it so, let's have a look. So, well I'll go to ourBlog page right here. And this is currently what it looks like. Now, to start things off,I want to get rid of this title here, that's very easily done. We'll go to edit pages, Blog, and if you remember from the previous lesson, all I have to do is blankthe Title Wrapper > Subtitle field here. So, when I make that blank, we're gonna hit Update andnow that title is gone. Also, I would like to add a sidebar. So, to add a sidebar, we're gonnascroll down to the options, Sidebar. And I'm gonna select a layout. One column is the current layout,which doesn't show a sidebar. But, I have the option to display iteither on the left or on the right. So I'm gonna choose columns right andI'm gonna select the default sidebar. So I'm gonna hit Update. And I'll do a refresh, and you'll noticenow we have a sidebar on the right side. And on the left, of course, we have the list of postsdisplayed in a masonry format. Now, if you want to edit the sidebar, and just in case you're not very familiarwith WordPress, you will need to go to Appearance > Widgets. And in here, you'll find all the sidebar locations thatare defined for this particular theme. Here we have three locations,a Main Sidebar, a Footer Sidebar 1 and a Footer Sidebar 2. And the widgets that you see hereare actually the ones being displayed on the right side here. So if, for example, I want to get rid ofthe meta, I would simply delete that. And I will do a refresh,and now that is gone. Maybe I just want to display the search,right? So, I'm gonna deletethe rest of the widgets. And maybe grab one of the customwidgets made by the authors of Adios, like for example, the latest tweets,and those might come in handy. And I can say follow me on Twitter, and I'm gonna put my Twitter username here. Save that and then refresh. And now we have a brand new sidebar. And that's it for the blog, really. Of course you would go andhave your own posts. I didn't in this casebecause it's just demo. But having you post is really simple. You just go to Posts > Add New. The theme offers four different formats,Standard, Video, Gallery and Audio. So you would enter the title, you wouldchoose the post format, the categories. Set a featured image maybe,and you're all set. Now, we're almost donecustomizing our portfolio site. The last thing we need to dois tackle the contact page. So that's coming up in the next lesson. The final page that needscustomizing is the contact page. So let's begin by havinga look at its current state. I'll go to Get In Touch, and we can seethat we have two sections, basically. We have a contact form,and we have an address. Now since this is a portfolio, and I do not have a physical business address,I'm gonna remove this section, and I'm gonna add my owncontact form right here. So let's go back to our pages,Get in Touch. And the first thing I'm gonnado is remove this entire row. Let's delete that,let's hit Update, and have a look. There we go. And let's see about creatinga new contact form. Now for most cases, the one thatyou see here is more than enough, but I just want to go through the processof adding a different form, so you can see how it's done. So the theme uses a plugin called ContactForm 7 that handles all of our forms. And currently, if we click on Edit, we'regonna see that it uses the Adios Form, and we can also give this search a title. Now, if we go to Contact, this iswhere all of the contact forms reside. So if we click on Adios Form,now we're gonna see a simplified version ofthe form from the front-end. And for each form,you have access to its main structure, to the email address that the form contents will be sent to, andall sorts of meta information, like From, Subject, Additional Headers,and the Message Body. You can edit all of these here,and Contact Form 7 will configure everything automatically,it's really, really fast. You also have access to the messages thatwill be displayed in various situations, for example when the sender message wassent successfully, we can display this. Of course, all of these are editable. When the message failed to send,when the validation error occurred, and so on, you have access to all of these,you can customize them as you wish. So let's add our own form. Let's go to Add New,let's say Tutsplus Form. Here we can see a default structure forour form, we have name, email, subject and message. Maybe I want to add, just forthe sake of it, a URL, right? Just here. So I'm gonna say URL, and this is,let's say it's a required field. Let's say the name is website,no default value, and you can set an additional id orClass attribute. So I'm gonna insert that tag, but also I'm gonna wrap it in a label,just like we can see right here. So I'm actually going to copy this,paste that in. And I'm gonna say, Website. I'm gonna copy this bit, andI replace this short code with my URL short code, and I'm gonna hit Save. Of course, go through Mail, Messages, or additional settings to customizethis form to your liking. So now I'm gonna go back to my Get InTouch page, I'm gonna do a quick refresh, and I'm gonna edit this section and I'm gonna choose Tutsplus form,Save changes, Update. And now if we go back to the front end,now I don't see any border around those inputs, so we need to adda special class called input field, and that's defined in the actual theme. So we'll go back to the theme, and we'regonna add the class right here at the end, we're gonna say class input-field. So let's go ahead and copy that,we're gonna paste that everywhere, on the website and on the message. Let's go ahead and save that, all right. So now we have good lookinginputs on all of these. Now if you want your form to look like theprevious or the default one that you saw, you simply remove the label anduse a place holder, instead. But in my case,I think this will be just fine. Also i do know that the sendbutton has a special class, although I cannot remember it right now. So I'm gonna refer back tothe original Adios form. And let's see, Submit, it has a class ofinput-send and also a class of submit. So let's actually copy these. I'm gonna paste those in. And something else that Isaw here is the response. This is an element that will beused to display the response, or the form response in casesomething goes wrong, or any kind of notification, basically. So I'm gonna save that,refresh, and there it is, Send. You probably can align this to the left, you just have to searchthe Contact Form 7 documentation or the theme documentation, andsee what classes it can use for that. But now if we hit Send,it's gonna show up the response here and also these error messages, telling us that we did notcomplete a required field. Now, of course, for your own project, you would need to customize this a bitfurther, add your own email address, customize how the emails are being sent, their structure, also the metainformation, all of that stuff. But from a technical point of view,this is how you would add a new form for contact andcustomize the contact page. Now with that, our portfoliowebsite is pretty much complete. You saw just how easy that was, right? As long as you're using the right tools,this becomes a very easy task. This was the final lesson of the course. Please join me in the next video forthe conclusion. Hey, thank you so much forwatching this course. You saw just how easy it was to builda WordPress portfolio if you're using the right tools. In our case it was the Adios themewhich provided all the templates, all the options, andall the tools for us to be able to create this portfolio as fast as we did. Now, you should take everything you sawas a technical demonstration, really. The images that I used, the text,they were just thrown out there for demonstration purposes. When you're creating your own portfolio,you need to pay more attention to what images you include,how you phrase your copy and so on. You should spend as much time as needed tomake everything look as good as it can. Now, I also didn't cover how to deployyour portfolio to a live server so it's available for everyone. That's beyond the scope of this course. But because we're dealing with WordPress here, it's actually quite simple. All you have to do is export your content,your settings from WordPress, from your local WordPressserver basically, WordPress installation, and then import. So export from local andthen import it on your live server and, basically, you are good to go.