Elegant way of adding an CTA to a menu in WordPress - wordpress

I'm new to WP and looking to put a CTA to my main menu. Currently the ordinary items are left aligned, and the CTA would be right aligned. So far this is what I've thought:
Hardcode it into the theme with the link to the page. Easy but ugly and error prone + the editor/author can't edit the link.
Define a secondary menu and just get first item (wp_get_nav_menu_items?). Better but seems odd to use a menu just to get an element.
Any other idea? Is there the WP way of doing this?

You can add this item as last in your menu, then assign custom class to this item and add required styles (positioning, CTA styles).

Related

How to create a custom navigation bar (WordPress)

I have a requirement to create a custom navigation bar to replace the existing on a WordPress site. I have decent at CSS but have never come across something like this.
I have found multiple ways to remove the existing navigation bar so that is not a problem but adding the svg with links that are relative to the svg is.
The navigation bar is supposed to look something like this
navigation bar
I think you can approach this from two different angles.
1 - You don't want to/can't use PHP
You can create a custom menu through Wordpress' admin panel.
Add specifics classes to buttons (by activating CSS class property field on menu's buttons using "screen options" panel : ont the right top corner of the page).
Then you sould need 2 classes :
one class for the links on the first row (who/what/how)
another class for the link on the second row (contact)
and adjust de CSS rules to display links as you want.
Finaly I would display the "cloud" svg as the background of the whole menu.
The real problem is that wordpress will output all menu items as li in a ul, so maybe you should create 2 differents menu (one per row), and display the two menus in a dedicated container.
2 - You want/can/prefer to use PHP
This alternative takes advantage of Wordpress' Menu Walker by creating a custom walker extending it
The idea is that by customizing this PHP class you can specify how you want wordpress to render you menu(s) by defining the HTML output.
Here is some links to help you do that :
https://gist.github.com/kosinix/5544535
https://code.tutsplus.com/tutorials/understanding-the-walker-class--wp-25401
http://jamescollings.co.uk/blog/wordpress-custom-walker-output-section-of-menu/
Once you custom menu output is OK, you just need to customize the generated HTML though CSS.
Note: the second approach can be an adventure if you're not comfortable enough with PHP

Click to expand submenu instead of navigate to page in WordPress

I would like to be able to create a navigation menu in WordPress in which the top-level nav items are not pages, but rather menu headings, which expand the sub menu when clicked.
The default WP menu behavior is that all menu items are links to content (pages, posts, etc), and that sub-items are viewed upon hover.
I'm looking for a way to make it work more like the menu behavior built into Twitter Bootstrap (and for the same usability reason).
I'm looking for a solution that either already exists as a plugin, or which I can build into a plugin, so that anyone can create a new menu like this in the WordPress menu editor.
checkout this tutorial :
https://digwp.com/2011/11/html-formatting-custom-menus/
If you dont want any custom html structure than you can simply add the classed to menu and for top level menu create a custom link with # as href.

How to link top and side navigation in wordpress?

I have following navigation structure, which i want to implement in wordpress:
(Home / About / news / Contact) are in top navigation, whereas all sub links are in sidebar.
How can i create this type of navigation in wordpress. i.e. How can i display first level navigation in header and second level navigation in sidebar.
Follow these steps:
First create a main Navigation to your site without child pages and
add it to the theme.
Then create a new menu with child menus only and save it.
Now goto widgets section and from there drag Custom Menu from left
side and add to your sidebar.
Then select your child menu and click save.
Thats all. :)
Check this WordPress Codex section for creating menu tutorial
Cheers!!!
I found these plugins helpful:
Simple Section Navigation
http://wordpress.org/extend/plugins/simple-section-navigation/
It allowed me to create the side nav based on the hierarchy of the pages and their children.
I wanted a bit more control though because I didn't want some of the parents to have their own page ... just a heading for their children. So instead, I'm using this plugin (for the Genesis Framework).
Genesis Simple Sidebars
http://wordpress.org/extend/plugins/genesis-simple-sidebars/
This allows me to create as many sidebars as I want and add custom menus to those. I'm new to this, so maybe I'm taking a long route, but so far it seems to be doing what I want it to.

Custom Order Menus in WordPress

I'm using WordPress Menus for my main navigation, at the moment it's displaying the navigation alphabetically. How can I get it to display my menus in the order I have them arranged in WordPress?
Thanks in advance!
Appearance > Menus
Select the menu you want to edit (this view is editing Main Nav)
Select that pages you want to include in your menu from PAGES on the left
Add To Menu
NOTE: You can also add post categories and nest pages within each other like shown in the image below. Make sure that your template is set up for menu nesting if you do this.
If you are talking about pages in your menu, go to the editing screen and look for Page Attributes (typically on the lower right). You will see PARENT, TEMPLATE and ORDER. In the order section, you can assign a number to the post, and they will appear in the order you define.
Hope this helps
In the menu page, you should just be able to drag the items into the order you want.

Drupal: displaying menus with Views?

I need to develop a kinda Sitemap on the bottom of my website, with all menu items and I was wondering if I can do it with Views.
I actually need to display each main menu item on a different column and add the submenu items to each column.
I realized anyway that Views has not access to Menu items, but only to nodes, or am I wrong ?
thanks
I don't believe you can do this with views. It sounds like you just need to have the top level menu "expanded" in menu configuration and style accordingly. For creating something trickier, that involves multiple levels, check out the menu block module (http://drupal.org/project/menu_block).

Resources