Focus Filters

Filters enable you to change the way Focus works. You can switch features on and off, optimize your CSS file, move things around, and even add your own functionality to the platform.

Header Image

focus-header-image-location-options

  • Sets the available Header Image output hook locations in the Display Options (see dropdown selector)
  • Array of unique hook locations (but without the hook_ prefix) along with identifier text for the dropdown selector. Example return value:
    array(
        'top_header' => 'Top of Header',
        'bottom_header' => 'Bottom of Header');
    

focus-header-image-location

  • Override the Header Image output location selected in the Display Options
  • Unique portion of a hook location (without the hook_ prefix); example return value: before_header

focus-featured-image-wrap

  • Turn the Focus WP Featured Image HTML wrapper on/off
  • false to remove the wrapper

Skin CSS Features

If you want to achieve levels of CSS optimization that shouldn’t be possible, you can use these filters to turn off features you’re not using.

You may also want to disable certain CSS features if you plan on replacing them with styles of your own. This way, you won’t need to undo irrelevant styles in your Custom CSS!

focus-css-add-button

  • Enables the button CSS class
  • true to enable the class

focus-css-header-image

  • Adds supplemental Header Image styles if a Header Image is selected
  • false to turn these styles off completely

focus-css-logo

  • Adds supplemental Logo styles if a Logo is selected
  • false to turn these styles off completely

focus-css-site-title

  • Adds Site Title #site_title styles
  • false to remove these styles

Note: Disabling Site Title styles also disables Logo styles

focus-css-site-tagline

  • Adds Site Tagline #site_tagline styles
  • false to remove these styles

focus-css-sidebar

  • Adds Sidebar typography + spacing style package
  • false to remove these styles; structural sidebar styles will remain to support Readability display settings

focus-css-menu

  • Adds current Nav Menu styles
  • false to remove these styles

focus-css-prev-next

  • Adds Previous/Next post navigation styles
  • false to remove these styles

focus-css-comments

  • Adds WP Comment styles
  • false to remove these styles

focus-css-woocommerce

  • Adds WooCommerce styles if WooCommerce Plugin is active
  • false to remove these styles

Example Usage:

To illustrate how CSS Feature filters work, let’s try to remove comment and sidebar styles. To do this, just add the following code to your master.php or custom.php file:

add_filter('focus-css-comments', '__return_false');
add_filter('focus-css-sidebar', '__return_false');

In the code above, __return_false is a native WordPress shortcut that makes it easy to turn off a boolean filter. (Likewise, __return_true is an easy shortcut for enabling a boolean filter.)

Tip: A boolean filter can only have two values—true or false.

If you’re using a pro PHP customization class, you can stick these filters in the __construct() method.

SCSS Mixins

Focus includes SCSS Mixins that deliver style packages for core website components. You can use these filters to replace the default style packages with your own.

Using this approach, you can create a completely customized Focus environment before adding your Custom CSS!

focus-mixin-grt

  • Loads the Golden Ratio Typography (GRT) mixin $_mixin-grt
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-grt-content

  • Loads the GRT Content mixin $_mixin-grt-content
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-input

  • Loads the Input mixin $_mixin-input
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-button

  • Loads the Button mixins: $_mixin-button, $_mixin-button-save, $_mixin-button-delete, $_mixin-button-action, and $_mixin-button-update
  • Relative path of the SCSS mixin file you’d like to load instead; this file should include the 5 mixins referenced above

focus-mixin-menu

  • Loads the Nav Menu mixin $_mixin-menu
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-sidebar

  • Loads the Sidebar mixin $_mixin-sidebar
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-comments

  • Loads the WP Comments mixin $_mixin-comments
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-woocommerce

  • Loads the WooCommerce mixin $_mixin-woocommerce
  • Relative path of the SCSS mixin file you’d like to load instead

Example Usage:

Let’s say you want to replace the Focus nav menu SCSS with your preferred nav menu SCSS. To do this, you simply need to point Focus toward your custom nav menu SCSS file by supplying a relative file path:

add_filter('focus-mixin-menu', 'mixin_menu');

function mixin_menu($path) {
    return THESIS_USER. '/custom/my-menu.scss';
}

In the code above, THESIS_USER is a Thesis constant that sets up a relative file path reference to the /wp-content/thesis/ folder.

For in-depth customizations like this, it’s a good idea to set up a folder to organize your customizations. Here, I’ve created a folder named /custom inside the /wp-content/thesis/ folder, and I’ve placed my SCSS files in this custom folder.

Thanks to this arrangement, these files will be safe from all future updates, and they’ll also be in one handy location that’s easy to manage.

If you’re using a pro PHP customization class, your customizations might look something like this instead:

class my_customizations {
	public function __construct() {
		/* Hooks and filters that need to fire early go here */
		add_filter('focus-mixin-menu', array($this, 'mixin_menu'));
		add_action('template_redirect', array($this, 'front_end'));
	}

	public function front_end() {
		/* Hooks and filters that affect the front end _only_ go here */
	}

	public function mixin_menu($path) {
		return THESIS_USER. '/custom/my-menu.scss';
	}
}
new my_customizations;

SCSS Includes

focus-include-presentation

  • Loads the Focus Content Presentation Styles $_include-presentation
  • Relative path of the SCSS file you’d like to load instead

focus-include-add-ons

  • Load your own custom SCSS to the Focus CSS environment $_include-add-ons
  • Relative path of the SCSS file you’d like to load

Cleaning Up Content Options

focus-hidden-boxes

  • Remove Box options from the Content & Display Options
  • Add the Display ID of the Box you want to hide; note: this is an array filter!

Example usage for a Box with a Display ID of thesis_html_container_custom:

add_filter('focus-hidden-boxes', 'hide_these_boxes');

function hide_these_boxes($boxes) {
    $boxes[] = 'thesis_html_container_custom';
    return $boxes;
}