Skip to content

Narrow Templates

ashleykolodziej edited this page Jan 7, 2019 · 2 revisions

Narrow Templates

By default, Responsive comes with several "narrow" templates. A narrow template is a template which is styled so that no matter what the default sidebar setting is for the site, the sidebar will go to the bottom of the page, and the content will be centered. This is a little different from the "no sidebars" template, and makes it a good choice for when you want the focus of the page to be text-heavy content, with minimal distractions. Responsive checks several different types of templates - single post templates, archive templates, and page templates - to determine whether to use the narrow styles or not.

Narrow template vs. default template vs. no sidebars layouts

Default Settings

Customizer

  • In Customizer, new Responsive sites get the "Keep posts sidebar on bottom" setting. This setting is what enables the narrow template behavior across the site.
  • Unchecking "Keep posts sidebar on bottom" makes narrow templates behave like default templates, inheriting whatever the sitewide sidebar setting is: left, right, or bottom.

Narrow Templates

By default, the following templates and post types in Responsive are set to be narrow:

Code Reference

When WordPress renders a page or post, Responsive adds extra classes based on on what kind of post we're working with and whether or not it is narrow while going through the r_container_inner_class() filter. This is what gives the container either the content-container or content-container-narrow CSS class, and it's the content-container-narrow CSS class that gives the page the narrow style.

For the purposes of adding or removing that class in your child theme, you'll need to know what kind of template you're trying to modify (post, archive, or page template), and then use the right filter to add or remove your template, post type, or archive page from the supported templates array.

Add or remove templates - Order of priority

Responsive checks if the page is narrow in this order.

  • Modifying the r_is_narrow_template overrides all rules below, regardless of content types and settings.
  • If the child theme or Customizer says not to show the posts sidebar on bottom, there will never be narrow templates on any page except for calendar regardless of what you do here.
  • If the child theme or Customizer says you're using the bottom sidebar position, there will always be narrow templates on all pages except for calendar regardless of what you do here.
  • The calendar listing template is never narrow, and the single calendar item page is always narrow. These are never editable because they have special styling, regardless of what you do here.
  • Single Posts are narrow except as noted above.
  • Single Custom Post Types are not narrow unless explicitly added to r_narrow_single_templates.
  • Post Archives are narrow except as noted above.
  • Custom Post Archives are not narrow unless explicitly added to r_narrow_archive_templates.
  • Page Templates are not narrow unless explicitly added to r_narrow_page_templates.

See also Changing Narrow Content.

Welcome to Responsive!

Get started

Configuration

Build child themes

Sass

Javascript

PHP

Shortcodes

Templates

GitHub

Tasks

Contribute to the framework

Code Examples

BU Developer Resources

Clone this wiki locally