Jul 26, 2018 7:59 PM - edited Jul 26, 2018 8:00 PM
HubSpot hosted our first ever CMS Developer AMA on July 25th 2018. This question was submitted and the first reply is what the panelist and audience chat responded with. (view the full AMA here)
Most of our clients use WordPress for their core website, not the HubSpot CMS. Many times we are building them a new website when they come on as a client and we need to match their HubSpot blog templates/landing pages with their new website.
Solved! Go to Solution.
Jul 27, 2018 6:00 PM
This is a somewhat technical solution that may cause you major headaches to implement. This will save you so much time in the future and will be of great value to you or your agency. If you don't implement this properly you can open yourself up to Cross Origin Requests from outside sources. Make sure you are implementing the options in the .htaccess correctly.
Bringing in content from a wordpress site takes a lot of time. Rebuilding a series of menus is time consuming.
Import the header / menus from the wordpress site using jQuery/ajax. Here is an outline of the tasks that need to happen
1) The .htaccess file is in your root wordpress folder. You will likely need to FTP or SSH into your server to edit this file.
Your server will need to have mod_headers.c enabled. This is the case in 99% of hosts out there. If you are hosting on some **bleep** server or some really secured server, you may need the server admin to make this available to you.
Here are two examples for a single domain and multiple domains. I have more instructions on how to place this in the document. You should put this in your .htaccess file.
Okay, Now load up your wordpress site. If your wordpress site isn't loading after a hard refresh, you messed something up and will have to troubleshoot your issue. If you continue to have issues, you can change the following line:
Header add Access-Control-Allow-Origin "https://dev.domain.com"
Header add Access-Control-Allow-Origin "*"
But this is really only for testing purposes. This really is a security issue and you shouldn't keep this up like this for long.
2) Creating template files to display your header and footer by themselves in WordPress
Create a new wordpress page. Give it some sort of name like Importable Header or Importable Footer. In this example we are going to give this page the URL of
Once you save the file you will notice the URL of your wordpress page while editing will look something like this:
Please note the POST ID of your newly created page. We are going to create a template file for just this page. In your theme folder in wordpress (FTP or SSH in to it) create a new file
The file I created for this example in the active theme folder is post-7446 -- the 7446 was the POST ID on the WordPress page you just created.
Make sure you you go to https://domain.com/primary-domain to verify that your content is being displayed. Remember, you didn't include any stylesheets or scripting -- so this will display rather plainly. Only the markup with the default styling that the browser has setup. If this isn't displaying anything, make sure you have the right url, that your menu parameter matches the menu you are trying to display. Also curse. Cursing can sometimes solve this.
3) Create the ajax script to bring this content in. Let's get into your hubspot template. In this example I'm going to continue with only bringing in the menu, so we will open up our header file. I primarly code templates in HubSpot. You can still do this if you don't code templates. You just need to create a DIV in your header somewhere (well, where you want the menu placed)
Here is an example header file in HubSpot. This can be your module html or however you make it. Most notably in this is that you have a DIV with an ID you can target, and that you remember it. In this example we are targeting the DIV with an ID of "js-insert-primary-menu". Refer to the file in the link or just slap
You can get fancy with this and use some promises and some newer JS, you can do a lot with this. I created this almost three years ago now and it works well.
4) Add additional files you need.
This is where you can get creative -- if you only want to load the CSS file that has the meny stuff in it you can place it on hubspot, you can link to it from the hubspot file, but that way doesn't seem super efficient. Use whatever best practices you have to bring over that CSS.
The first few times I did this I was working on website I hadn't touched or explored. I was looking at the source code of the WordPress site and copy/pasting all the CSS files <link.......> items over and just pasting them into the head of the HubSpot template. I then elimintated them one by one to ensure the menu still worked properly and was styled.
Don't beat yourself up too much if this doesn't happen right away for you. Try it out and let me know how it goes! I would love to help out. If you have some ways to improve on this, let all of us know!