Responsive WordPress Theme Tutorial – Part 4 – Logo and Navigation Menu

Thanks! Share it with your friends!

Close

We bring in our logo and begin structuring our dynamic WordPress Navigation Menu. We enable wp_nav_menu for our theme and implement it within our header.

Check out the code and download the source files:
http://www.awfulmedia.com/wordpress-video-series

Music by Dano at Danosongs.com

What’s this series about?

In this series we are going to create a custom WordPress theme from scratch. We will learn how to create WordPress themes, use advanced features such as: custom post types, custom fields and meta data. We will be focusing our theme on a site based on a site like Kongregate.com or Armorgames.com.

Links
———
Skeleton: http://www.getskeleton.com/
WAMP: http://www.wampserver.com/en/
Wordpress: http://www.wordpress.org/

Website: http://www.awfulmedia.com
Twitter: https://www.twitter.com/AwfulMedia

Comments

Pieter Kruger says:

where can i find the url for the CSS bit?

BFJunkie says:

Too bad, I got lost somewhere on the way and it’s not working for me.
Please explain more! I had no idea what I was doing when I was copying you.

Abdools aZ says:

at 12:33. anyone can help me. why i can not find “menu” option in
appearance.

Thanks,
Az

aparna datta says:

I’m getting an error “are you sure you want to do this?” Is there something
wrong with the codes that I have put in? I followed what you did word to
word :(. Please help. 

Agah Nnaemeka says:

Please OP, I know my question is coming late but How can fix a text after
the logo. I tried but it keeps drifting. I want the text to align properly
with the logo. To perfectly match with the logo.

Thank you. Please help

James Lewis says:

I kept on getting a fatal error in the tittle but used the following and it
all works now…

< ?php wp_title(''); ?>

Subarata Talukder says:

you did not defined the blog_info(‘template_url’) function, also you just
descried in tutorial as similar way I written it. but do not work. please
solve the problem pls

René Lehmann says:

Great tutorial series!!!!!!
However, in the part where you explain the functions.php you should also
show the first two rows as well.
The bad display of the {} curly brackets is not your fault (my opinion).

The functions.php looks like this in my document:
*__________________________*
< ?php // Create Nav Menu if (function_exists ('register_nav_menus')) { register_nav_menus ( array( 'primary' => ‘Header Navigation’ ));
}

?>
*__________________________*
(hopefully the code is right. It is working in my template so far ;-D)

I am not a professional website creator and I understand a bit of php, html
and css.
I think that this helps me a bit ;-)

linkspecialproximity says:

Hey there, My logo image is not appearing 🙁 I have no idea why. I seem to
have typed everything correctly but its not showing up! Any ideas?

Great Tutorial by the way.

Nikola Novakovic says:

why the website does not work ? :)

Moamen Nabeel says:

I love your series, but I ran into a couple of problems while watching this
part.
First off, I can’t seem to understand what the wp_nav_menu array parameters
mean and do, the second problem is that I didn’t get what the code that you
wrote in the functions.php is supposed to do. All I know is that after I
wrote these lines, I was able to manipulate the menu from the dashboard.
Thank you kindly !

Sajgonek123 says:

Hello, my problem is that, my logo and menu doesn’t have any margin left
side. Is it normal with wordpress 3.9 or is it my mistake?

jkracing says:

Did you go to school to learn how to develop websites

Remote Work Resource says:

For anyone that experiences any errors after following the steps in the
video, a helpful way to fix any issues is to open up the same file that is
having a problem in one of the other themes.

I was having issues with the register_nav_menus line. I tried a few
different things and nothing worked. One thing to note is I”m using the
latest version of WordPress, so there will be some differences between
whats in this video and the new version.

Anyhow – I opened up functions.php from the twentytwelve them and sure
enough, it’s ‘register_nav_menu’ – not menus.

So, for instance, if you are having problems with header.php – try opening
header.php from one of the other pre-installed themes and that should help
you figure out what the problem is.

HTH.

Great videos btw!!!!

Bartłomiej Biedrończyk says:

As far as i’m concerned this method of registering menus is’t working any
more. I had to get the code straight from wordpress codex.

BenyamynB Beny says:

Very nice. thanks man.

Yogesh Lavania says:

i dont have menu option in appearance what should i do..??

Eilianna Cloudburst says:

On the functions.php section there are curly brackets yes? Cannot tell at
the uploaded resolution sorry!
(‘register_nav_menus’)) { < =Supposed to be curly bracket? }<=Curly bracket? ?>

Alexander McGee says:

Austin .. great tuts. I love them, i started with html (and btw thanks for
the 960 grid) .. now i’m enjoying this tuts about wp (thanks for the
skeleton). I love your rambling. 😛

But, please .. change the background theme for NotePad++, also you may give
more info about wp elements (as they appear on dashboard).

Thanks and keep up the good work.

redbobo100 says:

I have designed some wordpress themes in the past. I used different styling
formats. I started watching your videos because had some problems with
dynamic nav menu. I wanted a completely dynamic structure. I tried to build
a template to make designing wordpress themes more easier to build. I
design a template just like the one in your video, I do not want the
dynamic link to the logo but I put it in there any way. My logo shows up
1800 px because the orginal picture is this size. I have resized the
picture down to 70 px and refreshed and the picture still show up this way.
I have used the default resets and the skeleton.css. I put in a static
reference stylesheet with a name other than style and the shows in the
normal size. How can I fix this so I can continue using the dynamic link to
style.css?

KoljaMineralka says:

Sorry for spelling errors, it’s kind of late here… just like in your
tutorials.

KoljaMineralka says:

Hi, in your tutorial, you used in header.php
wp_nav_menu(array(‘container_class’=>’main-nav’,’container’=>’nav’))
while in functions.php you defined
if(function_exists(‘register_nav_menus’)){
register_nav_menus(array(‘primary’=>’Header Navigation’));
}

There is no actual coonection with those two. I’m workin with wordpress 3.7
Maybe there was an update on this. Who knows… Anyway If I use you code,
menus are not switching. It’s dead. So I search on codex. wordpress per
your advice and managed to solve this by using the following code:
in header.php
wp_nav_menu(array( ‘theme_location’=>’primary’, ‘container’=>’nav’));
in functions.php
register_nav_menus(array(‘primary’=>’Header Navigation’));
So now we can clearly see the connection between the primary menus. Now
everything works for me.

P.S. Thank you, your job.
P.S.
Thums up so others could see this !

thierbox says:

and i am working in local server in wp multisite. An over thing my css
sheet it is not recognize with your code. On the top it is not close
correctly too missing a slash. i need to use stylesheet_url to make it
working. if you can explain me.

TheWrecklez says:

The tutorials are great and very helpfull thanks a lot ! i subscribe to
thank you and like your videos !

AwfulMedia says:

I cannot completely understand what you’re saying, but yes, I am sure it is
working. If you are getting errors, I would assume its because your code is
nothing like mine. The code in the video is working as it is demonstrated
in the video. I would like to assist you but you seem to be blaming it on
my sleeping patterns? Also, look at register_nav_menus on the WordPress
Codex and you will see that the video is using the proper code. Mistakes
are perhaps due to the language barrier. Austin

AwfulMedia says:

Don’t worry, the container was changed to a div with the nav-bar class in
the next part since we were generating a nav tag from the code.

osasp says:

Hi, Do I have to have working knowledge of php to learn wordpress? I ask
because from following your tutorials and watching you talk about arrays
and all that php stuff is very confusing for someone coming from a regular
html,css background. I’m still ploughing through the tutorials though as
I’ve come to a point where I really need to learn wordpress but I come from
a design background and php for me, I feel, is just going off on a tangent
so it’ll be nice to know what you think. Thanks.

Simon Gomes says:

Another great video. Though was little bit confused about passing the
values in the wp_nav_menu() function. But after a little bit digging in the
codex it is clear now what exactly you did with the menu. Great tut Austin.
Keep going, I will punch you on nose if you fail to make me a WP pro 😀 .
just kidding.

Michael Kenji says:

Yo Austin! You mentioned something about combining CSS style sheet, I am
curios on how to do it. Can you give me a quick hind how

Comments are disabled for this post.