Frequently Asked Questions

Using the WordPress Customizer is the easiest and fastest way to handle this. Use the “Brand” section to upload a full-color and one-color version of the logo, then in the “Home” section you can choose which version to use in the header.

svg logos

Use the Sass mixin add-color-class(). More info here »

bootstrap

You’ll simply need to deregister Nebula’s bundled version of Font Awesome Free and re-register Font Awesome Pro with the same handle. This is done in your child theme functions file. Instructions and code snippet here »

fa icons

Service workers have many benefits from reducing load time to being able install and work offline– just like an app. For background about service workers, here is more information »

Nebula provides a stock service worker file in the /resources/ directory of the child theme. Simply move this file to the root directory of your website and then be sure to enable the Service Worker option in Nebula Options.

sw manifest http2 service worker caching cache optimization pwa progressive web app

Nebula provides a stock .htaccess file in the /resources/ directory of the child theme. Simply move this (or copy/paste the parts you want) to the root directory of your website. Be sure to follow the “@todo” instructions at the top.

Problems here can cause a 500 error on your website, so be very careful!

caching compression files optimization

In Nebula Options under the Administrative tab, make sure you add either an IP address or email domain (or both) for developers. Then ensure the corresponding toggle is enabled for the metaboxes themselves. You should then see them appear on the dashboard.

For developers, the Nebula Options page itself provides the actual handles for each option. Simply click the “(?)” icon for the desired option to see it.

If you don’t see it, make sure you’ve updated the Administrative options to include the IP or email domains of developers.

All Nebula option handles can be viewed here as well »

Yes. Nebula provides some stock RegEx in JavaScript. These can be found in the nebula object as nebula.regex and can be modified/overwritten in your child theme’s main.js file.

The Nebula Companion plugin provides more nuanced functionality that many standard websites may not need. It also includes substantially more in-depth auditing capabilities. It can be installed from the Recommended Plugins screen and updated just like any other WordPress plugin.

Any issues with the Nebula Companion plugin can be reported in the main Nebula Github repo itself.

It’s difficult to summarize this, but Nebula provides tons of analytics assistance. Some of them you won’t need to do anything to benefit from, but others will need to be setup in Google Analytics first (like Goals and Custom Definitions).

This list of recommendation touches on many of them »

custom metrics custom dimensions goal tracking events GA GTM tag manager reporting tracking

Yes! You can enter a GTM ID instead of a Google Analytics Tracking ID and Nebula will understand you are using GTM. You are responsible for the GA data connection via GTM, and likewise you will need to “listen” for event tracking yourself. However, Nebula does push its events to the datalayer for you to utilize.

Nebula also “announces” when its generic listeners are triggered by the user along with all the data it captured. Use the nebula_event event listener for this.

gtm google tag manager event tracking datalayer

To best utilize Nebula for user experience and analytics, you’ll want to make sure all of the proper classes are applied to your CF7 form.

Nebula provides examples for Contact Form 7 settings here »

cf7 contact form 7 tracking lead gen crm integration forms

The user’s browser contains information about the language and country code (Ex: en-US). This data is available as an attribute on the and Nebula also provides it as a class on the body tag lang-en-us.

To get this information in PHP on the server-side, use get_bloginfo('language').

geolocation country code language location city state zip address

I wrote instructions here to walk through how to use several Nebula features to find and deregister third-party assets.

resources assets styles scripts handles hooks enqueue dequeue register deregister

This can be output with the following code: <!--?php echo get_post_meta($id, 'nebula_internal_search_keywords', true); ?-->

Remember that these are not to be used for keyword stuffing for SEO. This text area is strictly meant for aiding internal searches/filters with synonyms, plurals, and alternate spellings (like common typos).

internal search keywords internal_search_keywords misspellings filtered items keyword post

Nebula provides a PHP debug_log() function that writes a timestamped message to a file in the active theme. This can be used if other debug methods fall short.

troubleshooting debugger var_dump ajax fetch requests nebula_log.log

If there is a hook available, you can use that (instructions here). Otherwise, you can overwrite the function with the same name to modify how it works entirely.

Refer to this article about how to lazy load resources with Nebula rather than loading them on every page.

Nebula creates a nonce and localizes it to JavaScript as nebula.site.ajax.nonce. On the server-side in PHP you can verify it as nebula_ajax_nonce with the following example:

Make sure the nonce is passed from the JS call!

Use the Nebula timer() function which will record the duration of the task and log it in several places including Query Monitor. At page load, in the Query Monitor Admin Bar menu choose “Timings” to see the duration and memory usage of your functionality.

From there you can use any number of optimization techniques such as conditionals, transients, object cache, etc. to improve the performance.

optimization optimize performance php server side qm query monitor timings timer times measurement profiling profiler

Use the nebula_warnings action (which passes an array of warnings) and then unset the ones you would like to ignore. Example:

add_action(‘nebula_warnings’, function($nebula_warnings){
unset($nebula_warnings[‘child_meta_graphics’]); //Unset the Child theme meta graphics warning
return $nebula_warnings;
});

Yes, and functionality (parent or child theme) that uses nebula()->remote_get() can be deactivated in whole or logically per request using the following filter:

add_filter(‘disable_nebula_remote_get’, function($default, $url){
if ( strpos($url, ‘github.com’) !== false ){
return true; //Disable certain remote gets
}</p>
<p>return true; //Returning true disables all remote gets
return false; //Return false allows all remote gets
}, 10, 2);

Nebula triggers a DOM event when an analytics event is tracked with the handle nebula_event (it also pushes the event to the DataLayer which is available in Google Tag Manager or any other system that listens to the DataLayer).

document.addEventListener(‘nebula_event’, function(e, details){ //Or use jQuery if preferred
console.log(‘event triggered:’, details); //Do something with the event details object
});

crm salesforce hubspot sharpspring pardot indentify event tracking google analytics custom events

Nebula triggers a DOM event when a dimension is ready to be set in an analytics platform. However, this happens before typical DOM Ready events, so you’ll need to use a WP action with the DOM event listener. Here is an example for Hotjar (this goes in your functions file):

add_action(‘nebula_ga_before_dimensions’, function(){
?>
//No
<script> tag because this is already inside of a JavaScript tag
document.addEventListener('nebula_dimension', function(e){ //Avoid jQuery because it may not be ready
console.log('dimension triggered:', e.detail.name, e.detail.value); //This event provides a name and a value
hj('tagRecording', [e.detail.name]);
});
<?php
});

Note: Google Analytics, Microsoft Clarity, Facebook, and Hubspot have some pre-bundled tagging in Nebula already. Do some testing (and read through available Nebula Options) before taking the time to code your own event listeners.

microsoft clarify hotjar tag google analytics salesforce hubspot custom dimension trigger

There are several types of hooks in the JS API. A quick example to add a button class to the current selector would be:

wp.hooks.addFilter(‘nebulaButtonSelectors’, ‘child’, function(selector){
return selector + ‘, .new-class’;
});

The above code must execute in JS before the filter is applied! Considering using it in DOM Ready (outside of a module).

In-depth instructions here.

hooks wp.hooks hook handle filter action add_filter apply_filters add_action do_action applyfilters addfilter addaction doaction