Basic Setup (Appearance » Customize » Tab Titles)

  1. Do a standard WordPress theme install — install the theme files in a subdirectory called responsive-tabs in the wp-content/themes subdirectory.
  2. From the WordPress administrative dashboard go to Appearance>Themes to activate Responsive Tabs.
  3. Go to Appearance>Customize>Site Title & Tagline. Choose a relatively brief site title and tagline (roughly 20 characters each) and a 2-3 character “Site Short Title”. Overlong titles will overflow and drop out of the convenient fixed title bar, especially on smaller screens. Check how your titles perform in different window widths. As you narrow the screen width, you will see the tagline disappear and then, at smarthphone width, the short title replace the full site title.
  4. Add additional branding/identity information in one or both of two ways which allow an unlimited amount of content in a responsive format: (A) Populate the Site Info Splash widget area which will appear as a dropdown (under a “?” on the header bar) if you set the ‘?’ to show under Appearance>Customize>Welcome Splash Page). (B) Populate the Front Page Highlight Area — either by adding a widget ( possible graphics ) to the Highlight Area or directly enter text for this area in Appearance>Customize>Front Page Highlight.
  5. Enter the tab titles you want (up to 16), separated by commas, in Appearance>Customize>Tab Titles, like so:
    Favorites, Latest Posts, Latest Comments
  6. You will see your new tabs momentarily in the customizer. Click on one and the Widget area for that Tab will show as a section in the customizer. The numbering of widget areas corresponds to the position of the tabs from left to right (0 to 15).
  7. Populate the widget and repeat for each tab.
  8. If you want people to land on something other than the left most tab (Tab 0), enter the number for that tab under Appearance>Customize>Navigation.
  9. Save Changes

Customization

You can set all other theme options in Appearance>Customize.

  • Go to Appearance>Customize>Navigation to select a menu to put in the Main Menu location that will appear in the left sidebar (in widescreen view) or under the drop down (in screens less than 1580 pixels wide). Or go to Appearance>Menus to create a menu if you are starting from scratch. Check “Show Login Links in Main Menu” to optionally append profile, dashboard and login/out links to the main menu. Check Show Theme Breadcrumbs to see breadcrumb navigation on pages other than the front page. (The theme will recognize also installation of popular breadcrumb plugins and ignore theme breadcrumb settings.)
  • If you are not seeing your new front page, check Appearance>Customize>Static Front Page — make sure that it is set to Your Latest Posts. That setting will invoke the Responsive Tabs tabbed front page. However, you can also choose A Static Page and that will bypass the Responsive Tabs front page.
  • If you are an experienced user, you can add custom CSS and scripts.
  • Set up Accordions in page footers for static reference materials.
  • Set up site identity header and optional headlines or headline widget.
  • Change colors, fonts and images to achieve the look you want.
  • Save Changes

More about Content Options in Responsive-Tabs

Ideas for Front Page Tabs
  • To show the standard latest posts list, put the Front Page Latest Posts widget into a tab. The widget allows you to include or exclude categories. You could put multiple Front Page Latest Posts widgets under different tabs to break out special categories of emerging content.
  • For a list of links, put the Front Page Links List widget in a tab. Note: The link list grabs the first link (href) in the post. To make a post/link appear in the list, you need to select Link in the Format box while editing the post.
  • For a newspaper look, populate your landing widget area with 10 or 15 copies of the Front Page Post Summary widget (configure widget setting to show 4 per row). The summary widgets will show as rows of tiles in desktop view but will reshuffle into a column in mobile view.
  • For a category list, archive or comment list formatted consistently with this theme, use the included Front Page widgets.
  • Short codes that can look great in tabs include a NextGen Gallery, a TablePress table, or a bbPress forum. To use short codes in a tab, there are two options: (1) Put the shortcode alone in a page or post and set that put that post in a Front Page Post Summary widget (included with this theme). Alternatively, you can follow the instructions here to allow shortcodes to be executed in a generic text widget.
  • You can enter any text or images you wish into a text widget and many plugins are available for displaying individual post or page content in a widget.
Setting up Accordions (Appearance » Customize » Footer Accordions)

You can set up an accordion of content at the bottom of pages. You can have different accordions on the front page, on posts, on archive listings and on non-front pages. This is a compact way to deliver brief reference content. Just enter the ID numbers for the posts whose content you want to appear in the accordion, like so: 325, 11, 98. The accordion will show the titles for the listed posts and the user can expose the post content by clicking the post title.To get the id # for a post, just look at the edit link at the bottom of the content in front end view. If you are editing the content, the ID number appears in the URL of your browser. Note that you can use pages and bbPress topics as well as posts by referring to their ID number in the same way.

Theme Breadcrumbs (Appearance » Customize » Navigation)

If you install and activate a leading breadcrumb plugin (NavXT, Yoast or Trail) , the Responsive Tabs theme will display it appropriately regardless of the settings under Navigation.

The breadcrumbs built into this theme, while somewhat less flexible than the plugin breadcrumbs, fit well with the tabbed design of the theme and also with the theme-provided search options in the archive pages.

  1. Click Show Theme Breadcrumbs if you want to show theme breadcrumbs — this setting is overriden if you install and activate a breadcrumb plugin.
  2. Suppress bbBpress breadcrumbs if you prefer — you will probably want to use this setting if you are using a breadcrumb plugin that supports bbPress.
  3. Pick the tabs that you want to serve as the top of each of the WordPress search hierarchies — this tab will show as “Home” in the theme breadcrumb trail. For example, if you put the Front Page Category List widget under tab 0, you would probably wish to set tab 0 (left most tab) as the top of the category hiearchy. The category hierarchy breadcrumb shows on the Category Archive page and on single post pages.

Visit WillBrownsberger.com to see the theme breadcrumbs implemented.

Custom CSS and Scripts (Appearance » Customize » Custom CSS and Scripts)

If you are comfortable with CSS, you can enter styles to override the built-in styles or even the customized styles of the theme. Styles entered here will be echoed in the website header below the theme customization styles. You can also enter javascript to be echoed in either the website header or website footer.

These fields are sanitized only lightly, so take care what you put into them. One good use of the footer script area is to install google analytics tracking code. Just paste the tracking code right in (and save). Note: Scripts entered here are not served for logged-in users. Custom CSS is, however, served for all users.

This is site is powered by Wordpress and the responsive-tabs theme.