final-result

Follow the next steps to add a dropdown WordPress menu into the theme that you have created with the help of Divine Elemente

Final result (Move cursor on the image to see Dropdown WordPress menu in action)

Final result: DropDown WordPress Menu Final result: DropDown WordPress Menu
[DivineOffer]

Step 1. Add an Area (for Dropdown WordPress Menu) In The PSD Template

  • Hide a default menu layer group at the layers panel
  • Create a new layer group (lets call it ‘Menu Area‘)
  • Use Rectangle Tool (U) to draw the menu area

( Move cursor on the image to see the process )

Modify PSD Template Modify PSD Template

Step 2. Launch The Publish Editor

At Photoshop’s top menu click on Elemente > Publish and Upload

( Move cursor on the image to see the process )

Launch The Publish Editor Launch The Publish Editor

Step 3. Assign Element in The Publish Editor

  • Select menu area element at the header
  • Click right mouse button on menu area
  • Convert layer to an element: In the popup menu select Image element

( Move cursor on the image to see the process )

Assign Element Assign Element

Step 4. Make menu Editable in the WordPress

  • Select Image element at the elements panel (at the right panel)
  • In the properties panel set content option as “Editable (Rewrite in CMS)

( Move cursor on the image to see the process )

Set Editable Options Set Editable Options

Step 5. Publish The Theme

Click on “Theme Live Preview” for the live preview (or publish it to your web server)

Assign elements

Step 6. Register Menu in WordPress

Open functions.php in the text editor
Sample path: \wp-content\themes\your-theme\functions.php
and add following lines at the end of the code:

		add_action('after_setup_theme','new_menu_register');  
		function new_menu_register()   
		{  
		    add_theme_support( 'menus' );               // WP menus  
		    register_nav_menus(                         // WP3 menus  
		        array(  
		            'main_nav' => 'The Header Menu',    // Main navigation in the header  
		        )  
		    );    
		}  
		function show_menu_nav()   
		{  
		    wp_nav_menu(   
		        array(   
		            'menu' => 'main_nav',               /* Menu name */  
		            'menu_class' => 'sf-menu',          /* Add here main class of your menu script */  
		            'theme_location' => 'main_nav',     /* Where in the theme it's assigned */  
		            'container' => 'false',             /* Container tag */  
		        )  
		    );  
		}
	

( Move cursor on the image to see the process )

Register Dropdown WordPress Menu Register Dropdown WordPress Menu

Step 7. Add DropDown WordPress Menu on The Page

  • Login as administrator to yourdomain.com/wp-admin
  • Open website’s home page
  • Launch editable content feature – click on Edit content menu item
  • Click on the icon near the menu area element
  • Go to HTML tab and replace content with the following line:
    <?php show_menu_nav(); ?>

( Move cursor on the image to see the process )

Set Editable Options Set Editable Options

Step 8. Add a Third Party Menu Script

For this lesson we have chosen a Superfish script.

  • Place the next files in the theme root folder:
    sample path: \wp-content\themes\your-theme\
    • Superfish.js
    • Superfish.css (modified for this theme)
  • Modify functions.php file by adding following code:
    sample path: \wp-content\themes\your-theme\functions.php
    				function thirparty_menu_js()
    				{
    				    wp_register_script( 'menu_js', get_template_directory_uri() . '/superfish.js', 'jQuery', '1.0', true);
    				    wp_enqueue_script( 'menu_js' );
    					
    				    wp_register_style( 'menu_css', get_template_directory_uri() . '/superfish.css', array(), '3.0', 'all' );
    				    wp_enqueue_style( 'menu_css' );
    				}
    				add_action('wp_enqueue_scripts', 'thirparty_menu_js');
    			

Important: Place this code after the scripts_method() function.

( Move cursor on the image to see the process )

Add a Third Party Menu Script Add a Third Party Menu Script

Step 9. Adjust WordPress menu

  • At the WordPress backend go to Appearance > Menus
  • Create a new menu:
    • Enter the menu name
    • Click on Create menu button
  • At the Theme location panel select created menu
  • Add pages or links into the menu
  • Sort menu links and click on Save menu button

( Move cursor on the image to see the process )

Set Editable Options Set Editable Options

Everything is OK? If not – tell us in the comments


Divine Elemente PSD to WordPress

Convert graphics from Adobe Photoshop to a working WordPress theme. No coding.


  • http://www.numero-uno-inc.com/ Sahil Patel
    It very eassy to understand steps of wordpress. Thank you for giving its with pictures. It is very easily work.
  • Isma PinLoco
    works fine, but how can I change the font of the menu?