Menus and Headers

Lets get started with the menus, go to appearance>menus and click create a new menu. Give you menu a name and click create menu. It gives you 2 options, menu structure and menu settings. First structure will be how your menu is set up, add a few items from the left, Pages, links or categories. You probably haven’t created any pages or categories yet so lets go over that real quick. Pages will be where you may have a home page, about page, contact page or other pages most sites have in their menu or navigation bar (which we are creating right now). If you want to make a page or two go ahead and go to pages>add new then just give it a title and click publish over in the right sidebar. Next we are going to add some categories, these are “categories” your posts will go into to help better organize things as well as give you the functionality of putting these in your menu bar. Now go to Posts>categories , give your category a name and scroll down and add new category. With the pages and the categories I’m having you skip some unneeded items that you can go back and add in later.

Ok lets go back to our menu, your menu should be there that you created, select it in the drop down and lets add those new pages and categories. In the left sidebar open up pages and select one or more pages and click add to menu. You will see then appear now in the middle under menu structure. Now do the same for some categories, again they appear below the pages you added. If you hover over any item you can drag it up or down the list. They will appear from top to bottom here, and left to right in a horizontal menu bar, so your topmost item will be all the way left. This is also where you can make a sub-menu item, just drag it below the item you want it inside like the image.
You can see how some work and other work will now be sub menus of portfolio. So when you hover over portfolio on your actual site, some work and other work will open up below and be links to those categories or pages. Its kind of moody when it comes to dragging the item below the other item and indented just a hair like in the image. If you were to move other work over just a hair it would become a sub menu for some work and so on.

Now we are going to try a link menu item. Click on links to the left and type in a url of a link you would like to send someone to when they click that menu item. Be sure to put the http:// in front of the web address. Below that is link text, this is the text that will be in the menu bar, home, contact etc. and add to menu. Again place this item where you want it. Often if you use your front page as a blog posts page you should put in a “Home”menu item with a link to the url of http://yoursite.com because the static front page with posts will not have a page you can add to the menu. Now save your menu at the top and click manage locations. It will give you your themes available locations for a menu, find a location and click the assigned menu drop down and find the menu you created click on it and save changes. If you go to your website name at the top and hover over it and click visit site you will now see your new menu in your navigation bar of the location you chose. Here is a video with a couple different methods to do the same thing.

Now to move on to your header. Most headers allow you to put in a header image, background header image, site title and site tagline, colors, background colors, text colors and logos. We found most of these options either at appearance>customize or appearance>(your theme) options, I’m going to go over each one and show you what it affects. In the image below “WordPress Header Image” is the site title and below it “Just another wordpress.com” site is the tagline. So if you go to Appearance>customize and click site title and tagline this is where you put those in and where they show up.Now depending on your theme, background color would be the color that fills behind that top area. Text color would be the color of the text there. All themes are different, when i chose to put a logo in like my Elite Wolf Digital above it automatically got rid of the site title and tagline. If they prompt you to upload a logo it will go in the default spot. In the case of the background header image it spans the whole area. Now a header image spans the entire width but generally doesn’t have a logo or sitename or tagline superimposed on it. Play around with your header but if you upload images i would recommend they are the size the theme recommends or it may become distorted or cut off. In the next tutorial we are going to set up our page structure and put in some widgets.