reveal.js for WordPress

Power your reveal.js presentation with WordPress

Installation Instructions

Check this out in your wp-content/themes/ directory
Activate it as you would any other theme
Install the Fieldmanager plugin and activate it
Customize your presentation in Appearance → reveal.js Settings
Start making slides!

Customizing the theme

This theme can be used as a parent theme so you can customize your presentation without having to fork it. To do so, simply create a new child theme and set this one as the parent. There are a number of actions and filters to customize the theme:

reveal.js Styling

To change the reveal.js theme (not to be confused with the WordPress Theme), there is a settings page under Appearance → reveal.js Settings. To add your own theme, You can filter reveal_theme_url to use a custom theme URL.

Actions

reveal_before_body: Fires immediately after the opening <body> tag.
reveal_before_slides_wrapper: Fires immediately after the opening div.reveal tag.
reveal_before_slides: Fires immediately after the opening div.slides tag.
reveal_after_slides: Fires immediately before the closing div.slides tag.
reveal_after_slides_wrapper: Fires immediately before the closing div.reveal tag.
reveal_initialize: Fires before Reveal.initialize() is called. This theme defines a javascript variable reveal_config which is the object passed to Reveal.initialize(). Using this variable, you can manipualte any config value. For instance:
```
add_action( 'reveal_initialize', function(){
    ?>
    reveal_config.center = false;
    reveal_config.transition = 'concave;
    <?php
} );
```
However, you can change most of the settings in Appearance → reveal.js Settings.

Filters

reveal_theme_url: The URL to the theme CSS you'd like to use

reveal_default_dependencies: You can manipulate the reveal dependencies by modifying reveal_config.dependencies using the reveal_initialize action, but this filter is a bit easier. This filter passes the following array, which you can manipualte as needed:

array(
    'classList' => "{ src: '" . get_template_directory_uri() . "/lib/js/classList.js', condition: function() { return !document.body.classList; } }",
    'highlight' => "{ src: '" . get_template_directory_uri() . "/plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }",
    'zoom'      => "{ src: '" . get_template_directory_uri() . "/plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } }",
    'notes'     => "{ src: '" . get_template_directory_uri() . "/plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }",
)

reveal_default_settings: Manipulate the default settings. See reveal_default_settings() functions.php for the values.

Other Customizations

Using a child theme, your options for customization are limitless. Everything in the parent theme can be disabled or overridden. Have fun, and let us know what you do with this!

What is reveal.js?

A framework for easily creating beautiful presentations using HTML. Check out the live demo.

License

This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned with others.

alleyinteractive / revealjs-wp-theme

readme