tdt / wordpress-theme-okfn

Wordpress OKFN general-purpose theme (v2). Based on Bootstrap and Buddypress.

OKFN Master Theme

This is a child theme of the BuddyPress bp-default theme. http://codex.buddypress.org/theme-development/building-a-buddypress-child-theme/

We override:

header.php
footer.php
single.php
style.css

And additionally provide function hooks in:

functions.php
shortcodes.php

...and that's it! Wordpress' output is modified via callbacks in functions.php. We structure the page in header/footer but aim to use the parent theme's templates in all other cases. Wordpress always provides a more robust override mechanism.

Templates

Magazine

To create a magazine frontpage for your blog, create a page and choose 'Magazine' as its Template (on the right hand side).

Magazine mode will display:

• The latest blogpost with the category "Featured" at the top.
• The latest four blogposts which aren't that one beneath it.

The algorithm which displays a picture looks for "magazine.image" in the blogpost. Just add a HTML comment to your blog post:

<!-- magazine.image = http://flickr.com/my/magazine/image.jpg -->

There is a simple algorithm to choose which category is displayed on the ribbon. This file decides which category will be chosen first:

https://github.com/okfn/wordpress-theme-okfn/blob/master/category-priority.php

To use YARPP to display Related Posts as magazine entries on the post view page, open up the YARPP widget settings.

• Disable "Automatically display related posts"
• Select "Display using a custom template file" (yarpp-template-magazine.php)

Home

The Home template adds Magazine style blogposts to the bottom of the page. Only posts in a category named "Featured" will be displayed. Images are handled in the same manor as described above.

Presentation

Display content in a series of slides. Example here: http://staging.okfn.org/slides/

Theme Options

The theme can be customised in a variety of ways via the Theme Options. These settings can be found in WordPress admin under Appearance >OKFN Master Theme Options.

Supported Shortcode

Carousel

To add a carousel to your page can be as simple as:

[carousel]  
[slide img="http://slide1.jpg" class="active"]  
[slide img="http://slide2.jpg"]  
[/carousel]  

Please note that one of the slides must have class="active" applied to it, this will be the first slide that is displayed.

Some predefined classes can be applied to the carousel to alter the styling:

text-right photo-stack

Other supported attributes are heading and caption. For example, to add a caption to a slide you would enter it as follows::

[carousel]  
[slide img="http://slide1.jpg" class="active"]  
[slide img="http://slide2.jpg" caption="My caption for slide two"]  
[/carousel]  

Static Banner

If you only want a single banner image, use the below:

[banner bg="http://domain.com/bg-image.jpg"]
Banner text here.
[/banner]

Pseudo Sidebar

If you are using the 'One column, no sidebar' template to hide the default sidebar, you can mimic the default layout like so::

[pseudocontent] My main content [/pseudocontent]  
[pseudosidebar] My sidebar content [/pseudosidebar]  

Image Caption

Wrap an image and its caption in a border

[caption width="450" caption="My caption"]  
<img src="http://image.jpg" alt="" width="450" />  
[/caption]  

Hide Page Title

Use to hide the page title

[notitle] 

Full Width

Force content div to be 100% wide

[fullwidth] 

BS Columns

Divide single column. Span is a number of the 12 Bootstrap columns

[row]
[column span="6"]
Left Column Content
[/column]
[column span="6"]
Right Column Content
[/column]
[/row] 

Clear

Clear floats

[clear] 

Accordions

Use class="in" to have the accordion open by default

[accordion heading="Heading One" class="in"] content [/accordion]
[accordion heading="Heading Two"] content [/accordion]

RSS Ticker

Show scrolling previews from an RSS feed:

[rss feed="http://planet.okfn.org/feed" type="ticker"]

Image List

List of images with text beside

[il]
[ili image="http://assets.okfn.org/web/images/blog-placeholder.png" title="Title One" description="Description One"]
[ili image="http://assets.okfn.org/web/images/blog-placeholder.png" title="Title Two" description="Description Two"]
[ili image="http://assets.okfn.org/web/images/blog-placeholder.png" title="Title Three" description="Description Three"]
[/il]