Feather is super easy to theme and extend.

Debugging

If for any reason, you need to prevent minification, compression and serve development files rather than production while debugging, simply set the debug option in the Config to true const DEBUG = true;


Assets

Feather bundles some libraries to help with development and to prevent conflicts. Feather ships jQuery, emoji.css and animate.css as part of core.


Functions

Feather includes utility functions which are useful when creating themes.

You'll notice some functions include 2 versions.

The get_ functions return data, whereas the counterpart echos it.

This is helpful when creating themes depending where you are trying to output.

// return the URL to the current theme directory
function get_theme_dir()
function theme_dir()

// return the URL to the theme CSS directory
function get_theme_css_dir()
function theme_css_dir()

// return the URL to the theme JS directory
function get_theme_js_dir()
function theme_js_dir()

// return the URL to the theme image directory
function get_theme_img_dir()
function theme_img_dir()

// return the URL to the media directory
function get_media_dir()
function media_dir()

// return the URL to the addons directory
function get_addons_dir()
function addons_dir()

// return the homepage URL
function home_link()
function get_home_link()

// return the root path
function get_root_path()
function root_path()

// return the base URL
function get_base_url()
function base_url()

// return the full URL including http(s)://
function get_full_url()
function full_url()

// returns the current page, including whether a tag was included
function get_page_url()

// returns the post date with format set in config
date_pretty()

// returns the post date as datetime stamp
date_datetime()

// check if post has featured image
has_image()

// check if post has tags
has_tags()

Options

The config options are available globally and are easily accessed using Config::Option.

You can access them directly, echo Config::Title; or use them for conditional statements.

Example: if ( Config::DEBUG === true ) { // do something }

// The language set for the application
Config::i18n

// The path to Feather install
Config::Root

// Global title
Config::Title

// Global description
Config::Description

// Page displayed as homepage
Config::FrontPage

// Theme in use
Config::Theme

// Minification
Config::Minify

// Posts per page
Config::PostsPerPage

// Title separator
Config::TitleSeparator

// Debug mode
Config::DEBUG

Themeing

Creating themes simply involves a mix of PHP, HTML, CSS & JS combined with the available functions and options listed above.

Feather ships with a barebones starter theme in the theme directory called Blank, themes/blank, which you can use to start creating your next awesome theme, or you can take a look at the default theme structure for a more complete theme.

The only prerequisite when creating themes is that you include 2 core functions.

Before the closing </head> tag, you must include <?php feather_head(); ?>, and before the closing </body> tag, <?php feather_footer(); ?>.

Your theme structure should look something like this, however, it is totally up to you.

assets/
    css/
    img/
    js/
includes/
    aside.php
    theme.php
    titles.php
404.php
empty.php
footer.php
header.php
index.php
single.php

The options file from the default theme located at includes/theme.php is where we create our theme options.

<?php if ( ! defined( "FEATHER_INIT" ) ) die();
/**
 * Theme Options
 * Edit options only. Do not remove, simply leave any
 * settings blank to disable.
 */
abstract class Theme {
    // Accent colour.
    const PrimaryAccent   = "#0000ff";
    // Google Analytics. e.g: UA-12345-6
    const Analytics       = "";
    // Your name for post author and microformats publisher.
    const AuthorName      = "Feather";
    // Enable author Bio displayed under posts.
    const AuthorBio       = "Feather is a lightweight, minimal, flat-file Blogging system that focuses on performance and simplicity. Lots of blogging systems have outgrown their roots and morphed into bloated CMS. Feather aims to take blogging back to basics. A core lightweight blogging engine, with the addition of pages, should you need them.";
}

You can see here we created a Theme class to hold our options.

In our theme, we can then access any of those options with Theme::Option.

Example:

<style>
    .someclass
    {
        background: <?php echo Theme::PrimaryAccent; ?>;
    }
</style>

There is also a custom accent feature built into the posts metadata which allows each post to have its own colour scheme.

Simply add the accent: metadata to line 5 of a posts metadata.

title: The title
summary: The summary which is used in the meta tags, post excerpt and page intro
featured image: https://example.com/media/image.jpg
tags: optional, comma, separated, tags
accent: #bada55

Once this is added, you can then create a variable in your theme $accent = $entry->accent; to access that colour on a per-post basis.

When you're ready, simply update the const Theme option in includes/config.php to tell Feather to use your theme.


i18n

It is good practise when developing a theme or addon to ensure all strings are translatable by the end-user.

Using gettext this is a trivial step in your development process.

Instead of writing a string directly, simply wrap it in the gettext alias.

Example:

This is a string // non-translatable
<?php echo _( "This is a string" ); ?> // translatable

That's it!


Search PRO

The search function is only available in Feather PRO.

To add the search form anywhere within a theme, simply include the form:

include( get_root_path() . "/searchform.php" );

Or if you've installed Feather in a sub-directory:

include( get_root_path() . "/sub-directory/searchform.php" );

It is the themes responsibility to display & style the in-page search form to match the theme styling.

If you do not want to display the in-page form, but would like to link to the actual search page, you can create a normal HTML link:

<a href="https://getfeather.app/search/" title="Search">Search</a>

Or a with Markdown link:

 [Search](https://getfeather.app/search/)

Addons PRO

Addons are only available in Feather PRO. They are snippets of HTML, CSS & JS and extend functionality.

They can be anything you want, the only requirement when creating an addon is that they must be in their own folder, and the main file must be named addon.php, the rest is up to you.

An example file structure would be something like this:

addons/
    my-super-addon/
        addon.php
        ...

Depending on what you're creating, it's useful to wrap your code in a class or function that can be called from a theme.

If you would like to disable any addon, simply prefix the folder with .. e.g: addon-name becomes .addon-name.

Feather

We use cookies to give you the best possible experience on our website and to analyse our traffic using Google Analytics. By clicking 'Accept', you agree that you are happy with this.  
Accept   Decline