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
  • $locations array
  • Modified array of unique hook locations (but without the hook_ prefix) along with identifier text for the dropdown selector. Example of how to add a new location to the $locations array: 
    $locations['top_content'] = 'Top of Content';
return $locations;

focus-header-image-location

  • Override the Header Image output location selected in the Display Options
  • string
  • Unique portion of a hook location (without the hook_ prefix); example return value: before_header
  • Turn the Focus WP Featured Image HTML wrapper on/off
  • boolean
  • 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 boolean filters to turn off CSS for features you’re not using. Here’s an example of how they work.

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-bar

  • Enables the bar CSS class for use in Readability and Focus Modes
  • boolean
  • false to disable the class

focus-css-button-class

  • Enables the button CSS class
  • boolean
  • false to disable the class

focus-css-comments

  • Adds WP Comment styles
  • boolean
  • false to remove these styles

focus-css-header-image

  • Adds supplemental Header Image styles if a Header Image is selected
  • boolean
  • false to turn these styles off completely
  • Adds supplemental Header Image link styles if a Header Image and associated linking option are selected
  • boolean
  • false to turn these styles off completely

focus-css-menu

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

focus-css-nav-section

  • Adds Nav Section styles that respond to Design Options
  • boolean
  • false to remove these styles

focus-css-nav-section-2

  • Adds Secondary Nav Section styles that respond to Design Options
  • boolean
  • false to remove these styles

focus-css-prev-next

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

focus-css-sidebar

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

focus-css-site-title

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

Note: Disabling the Site Title styles also disables Logo styles

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

focus-css-site-tagline

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

focus-css-woocommerce

  • Adds WooCommerce styles if WooCommerce Plugin is active
  • boolean
  • 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.)

Pro tip: If you’re using a 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
  • string
  • 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
  • string
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-input

  • Loads the Input mixin $_mixin-input
  • string
  • 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
  • string
  • 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
  • string
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-prev-next

  • Loads the Previous/Next navigation mixin $_mixin-prev-next
  • string
  • Relative path of the SCSS mixin file you’d like to load instead

focus-mixin-sidebar

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

focus-mixin-comments

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

focus-mixin-woocommerce

  • Loads the WooCommerce mixin $_mixin-woocommerce
  • string
  • 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 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 mixin_menu($path) {
		return THESIS_USER. '/custom/my-menu.scss';
	}

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

SCSS Includes

In addition to the SCSS mixins covered above, Focus loads SCSS for Content Presentation Modes into the working environment via an SCSS include.

You can include your own SCSS files in the same manner by using the array filter described below. This is an organized and professional way to customize any project!

focus-scss-includes

  • Load your project’s custom SCSS files into the Focus CSS environment via the $_include-scss variable (appears before Custom CSS in the final output)
  • array
  • $includes array of files to include
  • An array of SCSS files you’d like to include

Cleaning Up Content Options

focus-hidden-boxes

  • Remove Box options links from the Content & Display Options
  • array
  • $boxes array of Box Display IDs to hide
  • Add the Display ID(s) of the Box(es) you want to hide to the $boxes array

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;
}

Design Options Modifications

Want to add or modify the default Focus Design Options? Go full-on ninja with the following filters:

focus-design-options

focus-css-variables

  • Modify the CSS Variables array that results from processing the Design Options
  • array
  • $vars array
  • An array of variable => value pairs, where the array indices correspond to existing CSS Variable names (without the leading $)

Display Options Modifications

Want to add or modify the default Focus Display Options? Go for customization inception with these critical filters:

focus-display-options

focus-display-elements