Themes and Templates for Facebook Tab Manager for WordPress
Starting with version 2.8.7, Facebook Tab Manager for WordPress has a new model for supporting custom themes and templates. This means you can modify the default theme distributed with Facebook Tab Manager or create your own theme, just as you would for a WordPress website. That way, you can develop a theme with your own custom CSS, template, and template functions independently of the plugin.
At least, that’s the plan. If it doesn’t work as promised, be sure to let me know.
There are some special considerations for how a theme has to be constructed to work with Facebook Tab Manager, outlined below.
The plugin ships with a built-in theme in the fbtab-theme subdirectory, and the theme files will be served from there immediately after plugin installation. Using this built-in theme remains the plugin’s default behavior. However, there is now an option on the Settings screen that lets you specify a WordPress theme (installed, like every other theme, in your wp-content/themes directory) that should be used to display content on Facebook. This setting is independent of setting the default theme to be used when someone views your website.
Even if you do not plan to customize, I suggest you copy the fbtab-theme folder to your wp-content/themes directory and activate it through the Settings screen. You may get better performance because this allows WordPress to serve Facebook Tab Manager posts just like any other posts and avoids some of the hacks I use to short-circuit the normal theme selection / page generation process.
The default theme is just two files: index.php and style.css. I don’t break out header.php, footer.php as is customary in WordPress themes but you can do so if you wish to, or add other elements such as functions.php, or custom templates to be used with specific posts.
Here is what this looks like with the files copied to my themes directory and a custom template added:
fbtab theme with custom template
I can now go into my settings screen and select this theme from the list of all my installed themes. If you create your own theme, it will appear on this same list.
Setting the FBTab theme
There are a few peculiarities to note that make a theme for use with Facebook Tab Manager different from a regular theme.
- The function fbtab_template_setup() must be called at the top of the file to implement the functionality of limiting what actions and filter functions will be executed on your content in a Facebook context.
- The default template detects whether it is being run in the plugins directory before deciding where to fetch the associated style.css file. You can eliminate this hack for your own themes.
- The function fbtab_head() must be included in the <head> section to output any custom CSS specified on the editing screen. It also determines whether to run the wp_head function, based on your selections.
- There’s also an fbtab_footer() function included just before the closing </body> tag that outputs your resizing code, if specified.
Otherwise, you should be able to use all the same template tags and loop structures you would in any other theme template.
Custom Templates
You can also create custom templates, similar to the custom templates for WordPress pages. Use your theme to define the default look you want for all of your Facebook tabs. Use a custom template if you want to use different styles or structures for selected Facebook Tab Manager posts.
A custom template is a file included with your theme that includes a simple header at the top of the file like this:
Custom Template
When you create or edit a post, you can then specify that this template should be used instead of index.php.
Setting an alternate template
Your custom template can reference different HTML, use a different variation on the WordPress Loop, or include just about any other custom code.
Another way of doing this, if you only want to use the template with a single post is to give it a name like fbtab-121.php where 121 is the fbtab post ID or fbtab-mystory.php where “mystory” is the pagename or slug for the post. WordPress will check for these variations and use them if found. Otherwise, it uses index.php.
Try it, and let me know how it works. If you discover changes to the CSS or other improvements that should be added to the default theme, please share them with me.