CMS Development

cstone
Community Manager
Community Manager

Best Practices - Migrating from WordPress to HubSpot CMS?

SOLVE

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.

  • However, if they already have a HubSpot account, they already used their one-time migration for the template design/setup.
    When we need to manage this setup on our own, what steps do we need to take to ensure it's developed and set up correctly?
  • Should we upload the same CSS files from the WordPress site, or start new?
  • What should we do if we've been using SCSS on the site?
  • Is there a specific file structure and naming convention we should follow?
0 Upvotes
1 Accepted solution
cstone
Solution
Community Manager
Community Manager

Best Practices - Migrating from WordPress to HubSpot CMS?

SOLVE
0 Upvotes
2 Replies 2
cstone
Solution
Community Manager
Community Manager

Best Practices - Migrating from WordPress to HubSpot CMS?

SOLVE

0 Upvotes
nickdeckerdevs
Contributor

Best Practices - Migrating from WordPress to HubSpot CMS?

SOLVE

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.

 

The problem:

Bringing in content from a wordpress site takes a lot of time. Rebuilding a series of menus is time consuming. 

 

The solution:

Import the header / menus from the wordpress site using jQuery/ajax. Here is an outline of the tasks that need to happen

  1. Edit .htaccess on wordpress site to allow Cross Origin Requests from the hubspot site
  2. Create template files in wordpress to display the content you would like to import (header / footer)
  3. Create script on HubSpot site to reach out to your wordpress site, inject template files into HubSpot site
  4. Add any additional files you need. 
  5. Test
  6. profit?

 

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. 

 

.htaccess code to be added to your wordpress site [new tab]

 

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"

to

 

 

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 

 

 

/primary-menu

 

 

Once you save the file you will notice the URL of your wordpress page while editing will look something like this:

 

 

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

 

 

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

 

 

post-7446.php

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.

 

 

The example template file for post-7446.php

 

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 

 

 

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

 

*slaps roof of car* | **SLAPS ROOF OF DIV** THIS BAD BOY CAN FIT SO MUCH MENUS IN IT! | image tagged in slaps roof of car | made w/ Imgflip meme maker

 

 

Inside your site javascript, your footer, or wherever your JS is stored Check this out and pop this bad boy into it.  Example ajax script to bring in wordpress menu into div.

 

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.

 

Protip - If your WordPress theme is something crazy you may need a javascript file or multiple CSS files (possibly one from the original them, and one from the child theme).

 

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!