PopUp Menu Link – WordPress Tutorial – Contact Me

Would you like to make the “Contact Me” link on your WordPress Sites’s navigation bar a popup menu link instead.  Well, here is a pretty cool way to to accomplish that task.

You will need 2 plugins and optional 3rd.

1. Popup Contact Form from gopiplus
2. Jin Menu by Buffernow
3. Configure SMTP by Coffee 2 Code (optional I use because I run WordPress on Windows server and php mail is funky)

I strongly suggest you create a Child Theme because you will need to modify header.php.  Here are a few tutorials for that:

• Theme Development
• How to Modify WordPress Themes the Smart Way – four-part series on child themes
• How to Create a Child Theme
• Guide to WordPress Child Theme Development
• How to: Create a Child Theme Based on Twenty Eleven
• Customizing Your WordPress Theme Using Firebug
• Tutorial: Child Themes Basics and Creating Child Themes in WordPress
• How to Modify the Parent Theme Behavior Within the Child Theme
• Child Themify – a plugin for creating a child theme

“POPUP CONTACT FORM”
CONFIGURATION

1.  Under Settings > Popup contact form – Configure the plugin as you desire but be sure to remove the image link form “Link Button/Text”  If you don’t this then the button will show up at the top of all your pages, and we don’t need that to happen.

2.  Click “Update Settings”

3.  Past the following into your header.php file

PopupContact(); ?>

“CONTACT ME MENU LINK”
CONFIGURATION

1.  Open Appearance > Menus and be sure to select the menu you want to add the popup to.

2. In “Custom Links” configure as shown below “Contact Me” or  “Contact Us” whatever your desired link name is.

3. Click “Add To Menu”

4.  You will notice your menu link is added under the select menu.  Click on the down arrow next to “Custom”

5.  Now you will add the following code to “OnClick Javascript Code”:

PopupContact_OpenForm(
'PopupContact_BoxContainer','
PopupContact_BoxContainerBody',
'PopupContact_BoxContainerFooter');

6.  Now click “Save Menu”

7.  Go to your site and presto…

***Popup Contact Form doesn’t come exactly with that look I did some styling.  You can also!

[easyazon-image asin=”1481130501″ locale=”us” height=”160″ src=”http://ecx.images-amazon.com/images/I/51ftOKi0AvL._SL160_.jpg” width=”107″]  [easyazon-image asin=”111844227X” locale=”us” height=”160″ src=”http://ecx.images-amazon.com/images/I/511VPA9H3ZL._SL160_.jpg” width=”127″]  [easyazon-image  asin=”1449309844″ locale=”us” height=”160″ src=”http://ecx.images-amazon.com/images/I/41%2B5vclYLCL._SL160_.jpg” width=”122″]

[easyazon-cta align=”center” height=”28″ keywords=”wordpress” key=”amazon-us-wide-light” locale=”us” width=”176″]