Action Hooks

Throughout the theme’s template files, you’ll find action hooks that you can use to inject content into the page.

Most templates include the following action hooks…

Navigation

  • tube_before_nav Before the opening of the main
  • tube_after_nav After the closing of the main tag

Hero Image

  • tube_gloryshot Shows the “Hero” image at the top of the page

Page Masthead

  • tube_before_masthead Before the opening .page-masthead header tag
  • tube_before_masthead_content After the opening .page-masthead header tag
  • tube_masthead_top Inside the masthead content column, at the top
  • tube_masthead_bottom Inside the masthead content column, at the bottom
  • tube_after_masthead_content Before the closing .page-masthead header tag
  • tube_after_masthead After the closing .page-masthead header tag

Content Area

  • tube_before_site_content Before the opening site-content tag
  • tube_before_post_content and tube_before_page_content Before the opening post-content or page-content tag
  • tube_content_top After the opening post-content tag, at the top of the content
  • tube_content_bottom Before the closing post-content tag, at the bottom of the content
  • tube_after_post_content and tube_after_page_content After the closing post-content or page-content tag
  • tube_after_site_content After the closing site-content tag

Comments

  • tube_comments_open_but_empty Show content / message if comments are open but empty
  • tube_comments_closed Show content / message if comments are closed
  • tube_after_comments After the comments template on posts and pages
  • tube_after_post_comments and tube_after_page_comments After the comments template on only posts or pages

Footer

  • tube_before_footer Before the opening site-footer tag
  • tube_footer The footer contents
  • tube_after_footer After the closing site-footer tag
  • tube_after_wp_footer After the call to wp_footer, before the closing body tag

Home Page

  • tube_home_masthead_content The page masthead content for the home page

Filters

The theme has filters aplenty. Below are some of the most interesting and useful filters, including example code for each that you can drop into a child theme or plugin.


tube_filter_masthead_columns

/tube/index.php, page.php, and single.php

Customize the columns CSS for the content area.

Default
  • col-sm-10 col-sm-push-1 col-md-8 col-md-push-2
Allowed

Any combination of Bootstrap 3 columns

Example
Bonus

You can set page-specific columns for page.php and single.php using a custom field named tube_masthead_columns


tube_filter_content_columns

/tube/index.php, page.php, and single.php

Customize the columns CSS for the masthead area.

Default
  • col-md-10 col-md-push-1 col-lg-8 col-lg-push-2
Allowed

Any combination of Bootstrap 3 columns

Example
Bonus

You can set page-specific columns for page.php and single.php using a custom field named tube_content_columns


tube_filter_content_columns

/tube/index.php, page.php, and single.php

Customize the columns CSS for the masthead area.

Default
  • col-md-10 col-md-push-1 col-lg-8 col-lg-push-2
Allowed

Any combination of Bootstrap 3 columns

Example
Bonus

You can set page-specific columns for page.php and single.php using a custom field named tube_content_columns


tube_show_excerpt_on_page

/tube/page.php

Show or hide the page excerpt in the masthead of single pages.

Default

true

Allowed

true or false

Example

tube_filter_single_image_excluded_images

/tube/attachment.php

Choose which images to exclude from the “gallery” below the main image

Default

Excludes the “featured image” for the post the image is attached to

Allowed

An array of image IDs

Example

tube_filter_content_width

/tube/functions.php

This can be used to filter WordPress’s global $content_width variable. Chances are you’ll never need to use this.

Default

1170

Allowed

Any integer

Example

tube_post_type_archive_label

/tube/classes/class-tube-archives.php

This filter can be used to add a small label above the post type name on post type archives.

Default

NULL

Allowed

Any text

Example

tube_color_schemes

/tube/classes/class-tube-colors.php

Use this filter to add or reomve color schemes from the customizer. Useful to provide control over color schemes in multi-site environments.

Default

Array of default color schemes

Allowed

Array of default color schemes, typically with new ones added or defaults removed

Example

tube_filter_custom_logo_args

/tube/classes/class-tube-custom-logo.php

Customize the default height and width for logos in the customizer. Useful to provide control over logos in multi-site environments.

Default
Allowed

Any combination of custom arguments for ‘custom-logo’ theme support

Example

/tube/classes/class-tube-footer.php

Customize the URL for the button to get.TUBE in the footer.

Default

https://www.get.tube/wordpress

Allowed

Any URL

Example

tube_filter_tube_footer_link_text

/tube/classes/class-tube-footer.php

Customize the text for the button to get.TUBE in the footer.

Default

About the .TUBE Theme

Allowed

Any text

Example

tube_filter_default_copyright

/tube/classes/class-tube-footer.php

Use this filter to set the default copyright text in Appearance > Customize > Footer. Useful to provide control in multi-site environments.

Default

© %site_name%

Allowed

Light HTML including %site_name%, %tagline%, and %year% placeholders

Example

tube_filter_copyright_raw

/tube/classes/class-tube-footer.php

Use this filter to set the raw copyright text (i.e. text before placeholders get replaced) used in the footer. This can be used to override the value that’s set in the customizer, for example if you needed to change the copyright on specific pages or post types.

Default

Value of the Copyright Statement setting in Appearance > Customize > Footer

Allowed

Light HTML including %site_name%, %tagline%, and %year% placeholders

Example

tube_filter_copyright

/tube/classes/class-tube-footer.php

Use this filter to set the copyright text (i.e. text after placeholders get replaced) used in the footer. This can be used to customize the filtered copyright output, for example if you needed to change the it on specific pages or post types.

Default

Value of the Copyright Statement setting in Appearance > Customize > Footer with placeholders filtered, as well as ‘stripslashes’, ‘wpautop’, and ‘wptexturize’.

Allowed

Light HTML

Example

/tube/classes/class-tube-footer.php

Use this filter to customize the social links used in the footer.

Default

An array of social site link data including [0] social site name, [1] button class, [2] icon Font Awesome class, and [3] URL. The URLs can be set initially in the Yoast SEO Plugin. Please see below for how to set the initial URLs without the plugin.

Allowed

An array matching the default, with items removed or modified as desired.

Example
Setting social URLs without the Yoast SEO Plugin

To set social URLs without Yoast, create a site option called wpseo_social with an indexed array of urls (or Twitter username) for the sites you’d like to appear.

Here’s an example…


tube_filter_{$menu_location_slug}_items

/tube/classes/class-tube-frontend-menus.php

Use this filter to customize the items in the “Footer Menu” and “Legal Menu” that appear in the site footer. The two menu locations are footer-menu and legal-menu.

Default

An array of nav_menu_item Post objects set in Appearance > Menus and Appearance > Customize > Menus.

Allowed

An array of nav_menu_item Post objects

Example

tube_filter_{$menu_location_slug}_html

/tube/classes/class-tube-frontend-menus.php

Use this filter to customize the composed HTML output for the “Footer Menu” and “Legal Menu” that appear in the site footer. The two menu locations are footer-menu and legal-menu.

Default

An unordered list for a simple horizontal menu with CSS hooks for bullet dividers.

Allowed

Light HTML for the code to appear in the footer menu. This gets filtered by wp_kses_post.

Example

tube_filter_latest_posts_module_posts_per_page

/tube/classes/class-tube-latest-posts.php

By default, a “Latests Posts” module appears on single posts page, showing the three (3) latest posts. Use this filter to adjust that number.

Default

3

Allowed

Any integer. Use -1 to show all.

Example

tube_filter_laterpay_has_access

/tube/classes/class-tube-laterpay.php

If you are using the LaterPay plugin so you can charge for access to posts, this filter allows you to programatically allow access to the hero image (or video if you’re using the TUBE Video Curator plugin).

Default

true or false, depending on if the user has access to the post via LaterPay_Helper_Post :: has_access_to_post( $post ).

Allowed

An boolean, either true or false.

Example
Allowing the image and/or the hero video

Two more specific filters, tube_filter_laterpay_has_access_hero_image and tube_filter_laterpay_has_access_hero_video are also available so you can choose to allow one or the other in certain situations (e.g. you want to allow hero images but not videos).

Here’s an example…


Additional Filters

Various

The .TUBE Theme has nearly 50 more filters throughout the various class files that aren’t documented here, though many behave similarly to those that are described above.

If you have questions about a specific filter, or something you’re trying to do, please post a request on the Theme’s WordPress support forum.


Advanced Header & Footer Menu Customization

There are a number of ways to customize the appearance of menus in the Theme.


Adding Icons to the Header Navbar

It’s easy to add icons to items in your Header Navbar:

  1. To add icons to the Header Navbar, first, navigate to Appearance > Menus (recommended) or in Appearance > Customize > Menus in WordPress admin.
  2. Make sure you’re editing the menu that’s assigned to the Header Navbar and that you’ve got “Title Attribute” selected in the Screen Options panel
  3. Then, add Font Awesome classes to the Title Attribute for each menu item you’d like to have an icon (e.g. fa fa-home).

Customizing the Footer & Legal Navbar Delimiter

You can customize the “bullet” delimiter on the Footer and Legal Navbar from the default bullet using CSS.

  1. First, navigate to Appearance > Customzie > Additional CSS in WordPress admin
  2. Next, copy and paste the following snippet:
  3. Finally, replace 2022 with your choice of Unicode character and save

You can also use #menu-footer-menu or #menu-legal-menu if you only want to customize one or the other menus.


Using the Terms List Template

The “Terms List Template” makes it easy to create a page that lists all the terms from a Taxonomy. Here’s how to use it:

  1. Create a new page, or edit the page if you’re using an existing page
  2. Give your page a title (e.g. Browse All Tags), then select the template “Terms List Template” from the Page Attributes metabox
  3. Click Update to save the page, and you’ll see a new “Terms List Settings” metabox
  4. Using the metabox, choose which taxonomy to display, and how the terms should be ordered
  5. Finally, click Update again to save your new settings

Here’s an example page showing a taxonomy of Gaming PC brands from GamingPC.TUBE.


Hero Images & Videos

Below you’ll learn how to tweak the background position of Hero images and how to add a Hero video to the top of posts and pages.


Customizing the Hero Image Positon

When you set a “Featured Image” on any post or page, you’ll get a beautiful, large hero image at the top of the page.

However, since the featured image uses background-size: cover; it can shift around a bit on different viewports, so if your image’s area of interest isn’t in the center, it can sometimes get clipped offscreen.

Here’s how to help prevent that:

  1. Navigate to the editor for the Post or Page in question
  2. Find the “Featured Image” metabox, and locate the “Image Position” setting
  3. Play around with setting different background positions and adjusting your browser size to see what works best

Note also that you can choose to NOT show the image in the Hero area using this setting. In this way, the image will still be available for grid views and social sharing, but not appear on the page.


Adding a Hero Video to Posts & Pages

The .TUBE theme integrates with the Video Background plugin so you can add a hero video to make your posts and pages really sizzle. Here’s how:

  1. Make sure you’ve installed and activated the Video Background plugin
  2. Create a new page or post, or edit the page/post if you’re using an existing page
  3. In the “Video Background” metabox, add .gloryshot-wrap to the “Container” field
  4. In the same metabox, upload the MP4 file you’d like to use
  5. Finally, click Update to save your settings

Adding a Hero Image to Taxonomy Terms

Dress up your taxonomy term archives with a large hero image for each term using the WP Term Images plugin. Here’s how:

  1. Make sure you’ve installed and activated the WP Term Images plugin
  2. Navigate to the editor for the category, tag, or custom term you’d like to add a hero image to
  3. Click the “Choose Image” button under the term description box, and select your image
  4. Finally, click Update to save the term

Adding Taxonomy Labels to Post Lists

Adding taxonomy labels above the titles in post lists is a great way to expose your categories or other taxonomy terms. Here’s how:

  1. Navigate to Appearance > Customize > Labels & Text Stings in your WordPress admin
  2. Scroll down to “Post List Label Taxonomy” at the bottom
  3. Choose your desired taxomony from the dropdown, then click “Save & Publish”
  4. Reload your Home page to see the labels in your posts list

Adding Social Icons / Links to the Footer

The .TUBE Theme works in conjunction with the Yoast SEO plugin to add social icons and links in your footer.

  1. Make sure you’ve installed and activated the Yoast SEO plugin
  2. Go to SEO > Social in your WordPress admin
  3. Add links for your social properties and click “Save Changes”
  4. Reload your site to see your social icons / links in the footer

For more advanced uses, including the ability to add social icons / links in the footer without the Yoast SEO plugin, please see tube_filter_social_links_output below.


The .TUBE Theme makes it easy to feature selected posts on your Home page using using the standard WordPress “Sticky Posts” feature. These posts will appear above the latest posts, and appear larger on wider viewports. Here’s how:

  1. Use the “Quick Edit” option, or navigate to the editor for the Post you’d like to feature
  2. In the “Publish” metabox, find the Visibility option and click “Edit”
  3. Check the box to “Stick this post to the front page” and click “Update”
  4. Reload your Home page to see the featured posts
Optional Settings
  • Number of Featured Posts

    To choose how many featured posts appear go to Appearance > Customize > Home / Latest Posts Settings

  • Featured Posts Heading

    To change the “Sticky / Featured Posts Heading” text go to Appearance > Customize > Labels & Text Strings

Please note that featured posts appear in reverse chronological order, most recent first, and only appear on the 1st page.


Showing Custom Post Types on the Latest Posts Page / Main Loop

If you are using custom post types, you may want them to appear on your Latest Posts page and other pages like Category and Tag archives that use the “main loop.” Here’s one easy way:

  1. Install and activate the Custom Post Type Selector plugin
  2. Go to Settings > Post Types in your WordPress admin
  3. Check or uncheck the post types you wish to show or hide from the main loop, then click “Save Changes”

Using “Smooth Scrolling”

If you use anchor-type links on your site, the kind that start with #, you’ll appreciate the theme’s “smooth scrolling” feature.

Simply add the class scroll-to-hash on any anchor link and it’ll smooth scroll right to that spot while respecting the fixed header.


Hiding the Excerpt in the Page Masthead

By default, the theme includes the page “excerpt” below the title in the page masthead, which works great when you’re using the page’s excerpt field. However, if you’re not using it, you may wish to hide the excerpt. Here’s how:

  1. Navigate to the page in question and view source
  2. Find the tag and look for the “class” attribute
  3. Identify a CSS selector that you can use to isolate the page (e.g. body.home)
  4. Go to Appearance > Customize > Additional CSS in your WordPress admin
  5. Add the following CSS, replacing body.home with the body tag selector you identified above:

Fonts

Below you’ll learn how to tweak the fonts available for use in your CSS.


Customizing the Font Families

The easiest way to add fonts is with a Google Fonts plugin. However, you can also tap into a filter to do it programmatically. Here’s how:

  1. Create a Child theme and open the functions.php file, or create a simple plugin
  2. Add one of the following code samples to your functions.php or plugin, depending on if you want to totally replace the default fonts, or add to them:
  3. Update the array to include the font families and weights you’d like to use and save the file
  4. Go to Appearance > Customize > Additional CSS in your WordPress admin
  5. Add the following CSS, replacing the body and h1 selectors and font families with the selectors you want to target and fonts you included above:

Customizing the Font Subsets

As with font families, you can tap into a filter to change the font subsets. Here’s how:

  1. Create a Child theme and open the functions.php file, or create a simple plugin
  2. Add the following code sample to your functions.php or plugin:
  3. Update the return value to the font subset you’d like to use and save the file