Wordpress Menu import into hubspot

gistfile1.txt

Process Details:

1. Edit .htaccess file.  On Wordpress website, edit .htaccess in the root directory to include the following:
mod_headers.c -- This may need to be added to apache. This is 99% of the time already loaded unless we get on some home grown servers (additional informaiton: http://stackoverflow.com/questions/8794566/how-to-check-mod-headers-and-mod-expires-modules-enabled-in-apache)
Access-Control-Allow-Origin -- This is the domain that you will allow to access your files. This should be the hubspot domain. If you are using a sandbox domain you will need 
Access-Control-Allow-Methods -- This is the method you will be accessing the information from the domain. The most common method we should be using is "GET" (Additional Information: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods)

 nvIf Origin are replacing dev.domain.com and the domain informaiton in the SetEnvIf  doing multiple domains:

<IfModule mod_headers.c>
    Header add Access-Control-Allow-Origin "http://dev.domain.com"
    Header add Access-Control-Allow-Methods: "GET"
</IfModule>

/* Multiple Domains - make sure to escape the . (dot) - separate domains by | (pipe) */
 <IfModule mod_headers.c>
    SetEnvIf Origin "^http(s)?://(.+\.)?(offers\.asaclean\.com|asaclean-3\.hs-sites\.com)$" origin_is=$0 
    Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is
    Header add Access-Control-Allow-Methods: "GET"
</IfModule>

This allows us to send AJAX requests from the domains listed.  Any domain that is on Hubspot that will be receiving a menu from wordpress should be included this.  Don’t : 

    Allow-Origin "*"

That will allow anyone to come in and access everything on the domain.  That is not good.

2. Create a new wordpress page.  Create a new page, give it a name like “Primary Menu” save it, and note the url. Note the example of the url of the edit page, after saving/publishing the wordpress page:

    ….wp-admin/post.php?post=7446&action=edit

3. Create a new file.  We want the Post ID, in this example it is 7446.  In Filezilla, or whatever FTP program you use, create a new file in the root of the active theme folder with “post-” and then the post id. In this example:

    post-7446.php

4. Edit the file.  Include the Template Comments at the top, then load in the menu.  Below is an example from Asaclean:

<?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Twenty_Twelve
 * @since Twenty Twelve 1.0
 */
wp_nav_menu( array(
	'menu' => 'Primary Navigation',
	'items_wrap' => '<nav id="main-nav" role="navigation" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"><ul id="%1$s" class="%2$s">%3$s</ul>'
	) ); ?>

Depending on the theme you are using, you may have different comments at the top.

5. Verify that the menu is working.  Visitng www.domain.com/primary-menu -- it will show the menu.  Now we have to get Hubspot set up.

6. Insert a div with an id where the menu will be placed.  Here is the code I would place into the header file in the hubspot template:

<div id="insert-primary-menu"></div>

7. Add the following script at the bottom of the footer to insert the menu into the div we just created in the header.  This should now 

$(window).load(function() {
    $.ajax({
            type : 'GET',
            url : 'http://www.domain.com/primary-menu/',
            dataType : 'html',
            cache: 'false',
            success : function(data){
            	$('#insert-main-nav').html(data);
            },
            error : function(XMLHttpRequest, textStatus, errorThrown) {
$('#insert-main-nav').html('There was an error, please check console');
console.log(errorThrown);
            }
    });
});

NOTE when using SIDR: You will want to add the sidr information in after the html(data) insert like the following: