Main Menu as a Vertical Navigation?
-
CreatorTopic
-
December 10, 2012 at 9:28 pm #1303
k_b
ParticipantHi Jason,
Thanks so much for providing this fantastic framework!
I’m sure others would be interested in this also but I was wondering if it would be possible to change the main menu into a vertical navigation? I’m presuming I would need to work with Action Hooks but not sure where to start with this.
Would you be able to help or even better provide a tutorial on this?
Thanks
-
CreatorTopic
-
AuthorReplies
-
December 10, 2012 at 10:30 pm #1312
Jason Bobich
KeymasterHello,
I apologize, but this is a tough question to answer, as it’s extremely broad in the sense that are just so many ways you could accomplish this, and it’s all going to depend on your specific design. It’s going to be involve a combination of where you hook your content and how you structure your CSS to meet your specific needs.
Hopefully, in the future we can provide some Child themes for sale that provide different structural starting points that people can use to build from.
December 11, 2012 at 8:43 pm #1350k_b
ParticipantHi Jason,
Thanks for coming back to me. I appreciate the question is broad. This may help: I have a static site that I need to move over to a WordPress drive site, see: http://www.osteria-no1.co.uk/menu.htm
You will see that the design is straightforward with a left hand sldebar vertical nav. Is there an easy way to achieve this?
From a personal point of view. I’m sure I’m not the only person who hasn’t had any experience with action hooks. I’m sure lots of people would benefit with a video tutorial of the basics. Would that be possible? One of the big selling points for me in buying your theme was on the really helpful video tutorials that you have done already, these are a great resource for folks starting out.
Extra Child Themes that provided different starting points would be amazing.
Thanks!
December 11, 2012 at 8:58 pm #1354Jason Bobich
KeymasterHave you read this article? — http://dev.themeblvd.com/tutorial/actions/
What is it that you don’t understand about action hooks?
You essentially just take whatever your function is and add it to the to action hook name with WordPress’s add_action function.
function my_whatever(){ // do something... } add_action( 'themeblvd_whatever', 'my_whatever' );
http://dev.themeblvd.com/tutorial/the-wordpress-functions-you-need-to-know/
December 11, 2012 at 9:20 pm #1356k_b
ParticipantYeah I read through it but didn’t really get it to be honest sorry!
I can see in the Action Map that the default menu function is: themeblvd_header_content_default
What I’m not sure about is how to remove this and then place it in the correct location in my Child Theme so that I can achieve my desired layout.
December 11, 2012 at 9:27 pm #1357Jason Bobich
KeymasterActually working with the hooks is fairly simple. You just make use of remove_action and add_action.
So, you’d remove the themeblvd_header_content_default function from the themeblvd_header_content action hook:
remove_action( 'themeblvd_header_content', 'themeblvd_header_content_default' );
And then you’d add the function to the action hook that you want.
add_action( 'themeblvd_whatever', 'themeblvd_header_content_default' );
Or create your own function that displays what you want and hook it on:
function my_whatever(){ // do something... } add_action( 'themeblvd_whatever', 'my_whatever' );
But then simply moving this function to somewhere else is then going to require a lot of CSS changes.
Why not just remove the header content all together and then just put your Logo and Menu in the left sidebar with widgets? You could use a text widget with some HTML in it for the logo to just display an image. Then, you could use the “Custom Menu” widget to display a menu.
This is actually kind of what I did on this site, which is a Child theme of Jump Start. I set the site to have the Left Sidebar sidebar layout. I unhooked everything in the header. I hooked the themeblvd_header_logo_default function to the top of the sidebar. Then I added the custom menu widget to the Left Sidebar itself from Appearance > Widgets.
December 11, 2012 at 9:57 pm #1359Jason Bobich
KeymasterNote: If it wasn’t clear, whenever I reference any of these kind of code customizations, I’m referring to putting them in the functions.php of your Child theme.
December 12, 2012 at 7:54 pm #1384k_b
ParticipantMany thanks for the support.
I have add your code to my functions.php file in my Child theme and the header content is remove. The navigation is now placed at the very top of the page, I thought that it would have been removed also?
Code used: remove_action( ‘themeblvd_header_content’, ‘themeblvd_header_content_default’ );I also attempted to place the themeblvd_header_logo above the left sidebar by using the following code:
add_action( ‘themeblvd_header_logo’, ‘themeblvd_fixed_sidebar_before_default’ );but this didn’t work. Is my code wrong?
December 13, 2012 at 12:04 am #1399Jason Bobich
KeymasterAplogies, I was just sort of quickly responding based on the examples you were asking about. I wasn’t really looking at the actions map very closely, but it’s all there, of course.
http://dev.themeblvd.com/tutorial/primary-framework-action-hooks/
In looking at the Actions Map again, we can see that the “themeblvd_header_content” wraps the area where the logo is. And the area where the menu is the “themeblvd_header_menu”. So we would do this:
remove_action( 'themeblvd_header_content', 'themeblvd_header_content_default' ); remove_action( 'themeblvd_header_menu', 'themeblvd_header_menu_default' );
I also attempted to place the themeblvd_header_logo above the left sidebar by using the following code:
add_action( ‘themeblvd_header_logo’, ‘themeblvd_fixed_sidebar_before_default’ );You’ve got that sort of reversed. When using the
add_action
function, the first parameter is the name of the hook, and the second parameter is the name of the function you want to place there.This is what you’re going for I think:
add_action( 'themeblvd_fixed_sidebar_before', 'themeblvd_header_logo_default' );
“themeblvd_fixed_sidebar_before” is the name of the hook where we want our action to happen. And then our function that we want to happen there is called “themeblvd_header_logo_default”.
December 13, 2012 at 5:00 pm #1425k_b
ParticipantThanks Jason, got this working now!
Great support!!December 20, 2012 at 7:24 pm #1629k_b
ParticipantHi Jason,
Sorry had another question in relation to the above.
The action hooks above are working great in a standard browser width. When the site is being viewed on a tablet or mobile device the vertical nav doesn’t work that great. I was wondering if it would be possible to re-instate the default nav when viewed on tablet and mobile devices only – i.e. the vertical nav would be removed once the site hits the first media query and it is replaced by the default mobile nav?
Thanks
December 20, 2012 at 9:32 pm #1636Jason Bobich
KeymasterIf you were going to take this approach, you’d need to hide/show stuff with CSS opposed to actually unhooking everything in the PHP. So, you’d have all HTML elements there, but you’d just adjust the
display
properties for the different menus depending on the @media viewport.For example:
#top #access { display: none; } /* Hide menu in header */ #main #access { display: block; } /* Show menu in main area */
… A more practical approach might be to just tackle the CSS directly and make it look better as you scale down to tablet and mobile.
-
AuthorReplies
- You must be logged in to reply to this topic.