Posts Categorized: Code Snippets
How to Format a Phone Number in HubSpot CMS HubL
Category: Code Snippets
I was recently working on a custom HubSpot quote theme and needed to format the phone number. By default, the number was displayed as a long string of numbers without any parenthesis or number groupings. The code below uses a HubL to display a subset of the full string in the chunks you need it… Read more »
HubSpot HubL Code Snippet Collection – Filters, Functions, and Macros
Category: Code Snippets
Below is a list of my commonly used HubSpot CMS HubL filters, functions, and Macros. Email me if you have one you would like to add to this list. Create a slug from a text string I used this when I wanted to add a CSS class name to the li of a menu using… Read more »
FAQ Schema Microdata Code Snippet
Category: Code Snippets
Below is a FAQ microdata schema code template you can copy and paste and add to your page HTML. You would repeat the .faq-question div block for each QA answer set. Once you are done adding your markup you can test it in the Google schema tester. If you are using WordPress, I noticed the… Read more »
How to Copy HubSpot Sections Into a HubL Code Template
Category: Code Snippets
HubSpot CMS has recently added the ability to copy sections built with the visual editor and then paste the HubL code into a template. Previously, this had to be done by manually. Why you might want to use this A designer or marketer could visually design the page. Get 80% there and then hand off… Read more »
Make YouTube Embeds Responsive in WordPress [code snippet]
Category: Code Snippets
The CSS styles below will make any YouTube video embeds using just the URL responsive. Add this to the bottom of your WordPress theme CSS stylesheet. .embed-youtube{ position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-youtube iframe, .embed-youtube object, .embed-youtube embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;… Read more »
How to Add Language Code Next to HubSpot Language Dropdown
Category: Code Snippets
By default, when you visit a page with a translation, it displays a globe icon. I thought it would be more helpful to have a visual cue for your current language. So I wrote the code below to add the current language code next to the globe icon. Javascript Add this to your main theme… Read more »
How to Dynamically Set BigCommerce Title Tags
Category: Code Snippets
BigCommerce does not provide an easy way to make bulk title tag changes in their admin. However you can update your theme files to dynamically set the title tag based on the template being used. Below is what I have used with custom stores I have built. <title>{{#if template ‘==’ ‘pages/product’}}{{product.brand.name}} {{ head.title }}{{else if… Read more »
How to Remove HubSpot CTA Button Strings in HubSpot to WordPress Migration
Category: Code Snippets
When migrating a HubSpot blog to WordPress or another CMS you will often find text strings in your articles that look like this {{cta(‘4cdfhg-a57e-dfh-dfh-5c6dfhgdfhdfgc’,’justifycenter’)}} Most likely you are going to replace those with a new button pointing to a landing page but that takes time to update. Also doing a database find and replace would work… Read more »
WP All Import Export Subset of Posts by Slug Array [code snippet]
Category: Code Snippets
When performing a WordPress blog migration you sometimes just need to export a certain number of posts vs the entire collection. The easiest way I have found to do this is by performing a custom query using the list of posts by their url slug. // WPQuery args for slugs – create array fro list… Read more »
Embed HubSpot Form in WordPress, Customize CSS, and Hide Fieldset Margins on Hidden Fields [code snippet]
Category: Code Snippets
When you embed a HubSpot form on an external site you can add css: ‘ ‘ to the embed code to remove the default form styles. If you have hidden fields the fieldset could have a margin or padding applied from your website stylesheet. This is common because you want a fieldset to have some… Read more »