WordPress Wednesday:: Header & Navigation Bar

If you are new to the blog, occasionally on Wednesdays I do a post all about WordPress. I’ve talked about hosting, securing a domain name, and explained the difference between WordPress.com vs. WordPress.org.

Wordpress Wednesday

Today we are finally getting into the fun stuff…design!

You’ll first want to select a theme. I use the Blissful Child Theme by Studiopress. Then decide what layout you prefer.

Theme-Wordpress

I went with a two column blog layout.

After you’ve decided the overall layout of your blog, you’ll want to create a header. Your header needs to be 960×120 pixels. If you don’t know how to design a header yourself, there are tons of fabulous designers out there that specifically create custom blog headers for a reasonable price. If you have a favorite blog and are curious who designed their blog header, etc. a lot of times you can find the designer’s logo somewhere on their site.

Header File-Wordpress

Once you {or a designer} designs your header, you’ll want to upload it. You’ll need to click on the Appearance Tab on the left hand side and then select Header.

Click on choose file and find your image on your computer then hit upload.

In addition to your header, you can also customize your background.

Blog Background-Wordpress

Under Appearance you’ll select Background. If you have a file or image you wish to use for your background, you would select choose file, then hit upload. If you just wish for your background to be a solid color, just hit ‘select a color’ and choose the color you like. WordPress will automatically enter in the html color code.

Now that you have your header and background all set up, you’ll then want to decide what you want to have in your menu bar {if you wish to have a menu bar at all}.

Here’s what my menu bar looks like.

Blog Header & Navigation Bar- Megan Brooke Handmade

I have seven tabs total.

To create a custom menu, under Appearance you will select Menus. Then hit ‘create menu.’

Menu-Wordpress

It will ask you to name your menu. Mine is just labeled, ‘Megan Brooke.’

Here’s what the back end of my custom menu page looks like {yours will obviously be blank at first}.

Custom Menu

There are two kinds of tabs you can add to your menu, custom tabs and pages.

Custom menu tabs are tabs that link out. For example, I have a ‘Home’ tab that links back to my blog home page. I also have a menu tab for ‘Shop’ that links to my {now nonexistent} Etsy shop.

Custom Menu-Wordpress

To create your own custom tabs, go to the ‘Custom Links’ section, type in the title you wish to appear under ‘label’ and then enter in the web address that it needs to link out to.

Besides my ‘Home’ tab and ‘Shop’ tab, the rest of my tabs are considered pages.

You’ll first need to create your pages in order to add them to your menu bar.

Click on ‘Pages’ on the left hand side and select add new. I have an About Me page, Contact Page, Features Page and Project Gallery. You can add any sort of page you like and edit the content within this section.

Pages-Wordpress

Once you have created pages, those pages will appear near the bottom on the left hand side when you go back and select ‘Menu’ under ‘Appearance.’

 Adding Pages to Menu-Wordpress

Select the pages you wish to add to your menu bar and hit /add to menu.’

When you have all the pages and custom tabs you would like in your menu, hit save menu. Your custom menu should now appear at the top of your blog! Pretty easy, right?

You are now one step closer to having your blog up and running! Until next time…

Check out these additional WordPress Wednesday posts::

-Setting up your header and navigation bar

-Setting up your sidebar

-Creating a favicon

-Sidebar Plugins

-Installing Facebook like box and Instagram widget

-Installing Social Sharing bar

-How to add a ‘Pin It’ button to posts

-How to generate related post thumbnails

You May Also Like:

Comments

  1. Lauryn says:

    Can you possibly cover how to customize the design of the navigation bar/tabs? Thanks for the tutorials – they are very helpful!

Trackbacks

  1. [...] week for WordPress Wednesday we started to dive into design. Now that you have your header and navigation bar set up, it’s time to start working on your [...]

  2. [...] -Setting up your header and navigation bar [...]

  3. [...] -Setting up your header and navigation bar [...]

  4. [...] -Setting up your header and navigation bar [...]

  5. [...] -Setting up your header and navigation bar [...]

  6. [...] -Setting up your header and navigation bar [...]

  7. [...] -Setting up your header and navigation bar [...]

Speak Your Mind

*