You know, when some people are asked to do a presentation on a subject, they start by thinking about what they’re going to say, how they’re going to say it, and what their presentation will contain.

Me, I just start writing code.

I was asked to present at WordCamp Seattle, on the specific subject of the GPL. Talking about licenses is pretty dry stuff, so I came up with some ideas and such and put them down and built a presentation. No problem. But naturally, I wanted to use WordPress to present it.

I’ve tried this sort of presentation-theme idea a couple years back, and didn’t really get anywhere good. HTML wasn’t up to the task at the time, not really. But in my searching for this again, I ran across the Google IO 2012 slides template.

It’s a neat template. Does some very cool stuff. HTML5, CSS3, clever Javascripty goodness. Bit annoying to adjust though, and very hardcoded. So, I turned it into a WordPress theme instead.

I call it “Slides”, because I’m bad at naming things.

If you want to skip straight to the download, you’ll find it at the bottom of the post, but I encourage you to read first, because if you just install it on an existing WordPress install, you’ll find your site to be instantly broken.

Now, for those people wanting to use this, note that it more or less takes over the whole WordPress install. The Posts menu is actually removed. So is Comments, for now, because I can’t think of a reasonably good way to show or allow comments on presentations yet. Might add them back later.

Since this takes over the whole WordPress install, the best way I can think to use it is on a multi-site install. I run multi-site myself, so creating a new subdomain site takes about 30 seconds. Just create a new site, give it a new domain mapping, and voila, done. So with this, I can easily pop off wcsea2013.ottopress.com as a new site, turn on the Slides theme, and create my presentation slides in there. Easy. So I recommend using this theme with multi-site if you’re planning on leaving the results online after the fact, sort of thing.

See, Presentations are not Blogs. The default WordPress “posts” model doesn’t really fit well. The “pages” model does, a bit, but there’s an inherent problem that Pages are difficult to put in a particular order. So I took a look around the plugin directory and found a plugin called Simple Page Ordering which fits the bill nicely. It lets you make all the Pages you want, and then drag and drop them in the Page list to re-order them. Very cool beans, and highly necessary for this sort of thing.

So I integrated “support” for this plugin, with the only real “support” being that if you don’t have the plugin installed, then the theme will give you a quick link to install it. :)

How the theme works:

  • The first three slides are hardcoded, the intro, the title, and the instructions.
  • Every “slide” after that is a Page.
  • There’s a custom taxonomy for picking individual slide options, which I’ll explain below
  • The Featured Image functionality is used for custom whole-slide backgrounds
  • The “Excerpt” is used as a “Presenter notes” field, which is awesome for reasons you’ll understand in a minute.

Now, let’s do a run-down of the theme:

First Slide

As you can see, it’s simply a logo with a “Follow along” message. The URL comes from WordPress itself, so it will be correct automatically. The logo can be changed through the Theme Customizer. All of the main configuration options are in the customizer in fact.

Customizer for slides

The Square Logo there, with my gravatar in it, is used on the next slide. The theme itself comes with a couple of default WordPress logos instead, BTW, not my scuba picture. :)

Second Slide

Here you can see where that square logo is used. I recommend using a transparent PNG here, for full effect. Additionally, you can see where the site title and subtitle become the name of the presentation. Just below that is the Event and Author Information, which is also configurable in the Theme Customizer screen.

Instructional Slide

The third slide is the instructions, and this is hardcoded for now. This is actually an important slide to have, because it shows that there are hotkey navigational controls. All these controls come from the original Google IO 2012 template, and boy are they cool. Look what happens when you hit P for example:

Speaker Note

Yes, those speaker notes you made in the excerpt fields pop up for the viewer to read directly. Your slides can be useful even if the person wasn’t able to attend the presentation itself. Very neat.

But the speaker notes play another important part too. There’s a hidden trick: Visit the site with the parameter ?presentme=true and you’ll get a new popup window.
(Note: Chrome’s popup blocker may block it, you’ll have to allow the popup.)
(Note 2: The theme will remember that you did this, visit it with ?presentme=false to turn it back off)

Popup Presenter Window

If you’ve used Keynote or Powerpoint’s various presenter modes, you’ll recognize this. This extra window lives separately from your main window, but has linked the navigation to it.

So, as a presenter, you’re connected to a projector or big screen. You have two screens connected to the computer, which are separate. You open the browser to your site, add the presentme=true parameter, and get this second window. You keep the second window on your display, and the main window on the big display (with the handy F hotkey to switch them both to fullscreen). When you click to the next slide in either window, both windows will change. You can see the next slide and your notes for this slide on your window only. And you don’t need anything more than a web browser; no presentation software required. Just a web browser, on any computer connected to the screens.

Speaking of any computer, the presentation looks pretty good on a touchscreen device too. Even takes advantage of touch motions for flipping slides. :)

You can press O to get an overview mode.

Overview mode

Want a full screen background in a particular slide? Set a Featured Image on that Page.

Full slide background

The normal black border background around the whole presentation is fully customizable too, in the Theme Customizer. It uses the normal WordPress Custom Background functionality for that.

Images and links work too. This is the web, after all.

Images in Slides

Now, these are slides, so the fonts need to be pretty big. If you find that the space is too limiting, then one of the available options in the custom taxonomy that Slides offers you is called, oddly enough, “smaller”. It makes somewhat smaller text.

Smaller text

Ooh, that page number doesn’t look too good in the bottom right though. No matter, there’s a “nobackground” option to eliminate that page number on specific slides:

No background

Not every slide has to look exactly the same though. Here’s a “segue” slide, which is a useful layout from transitioning from one larger idea to another. Note that the “title” is at the bottom, in lighter colored text, and the content goes up top.

Segue Slide

Finally, of course, there is a thank you slide, with a different layout entirely. Useful for the ending of a presentation. :)

slidesthankyou

There’s a “dark” option too, but the colors still need some work on that, so the less said, the better. The theme is a work in progress after all.

And being a work in progress, it’s still partially broken. :)

  • The Taxonomy stuff needs improvement. Right now, it has problems removing the items. Taxonomy was not meant to work with checkboxes, really.
  • There is a “build” class which you can add to any top-level wrapper (like a UL surrounding LIs), and this will cause fade-ins. That is, instead of going to the next slide, each line-item will fade in. The build class actually works on any nested tags, so a DIV with class=”build” that is surrounding P’s causes the fade-in effect to work just as well. But how to make that “easy” in the visual editor? I’m not sure.
  • The theme includes the “pretty print” code for doing code highlighting. Wrap the code in a PRE, give it a class=”prettyprint” and a data-lang=”language” for the language, and it will do code highlighting. However, the pretty print code in the original template did not include PHP, so I’ve added one I found elsewhere. But it needs testing. Additionally, in your “pre” code, add some B tags to surround a significant section. This will make the “H” hotkey cause the other code to fade-out when pressed, highlighting the code you want to draw attention to. This is all useful stuff, but a bit hard to use in the editor and thus needs a bit more work.

I’ve been screwing around with this for a while, and not making any real progress. But as they say, real developers ship, so what the heck. This is version 0.1-alpha-whiskey-tango-foxtrot. Try it out, on a test site. Use it for a presentation. Improve upon it. Send me patches.

But here’s the best thing about this theme: it works for the intended purpose. I presented using it at WordCamp Seattle… using nothing but my Chromebook. The Chromebook runs ChromeOS, which is little more than a glorified web browser. It has no other software but Chrome on it. But it does have a DisplayPort output, and with an HDMI converter cable, I connected it, dragged the main window to the big screen, and presented just fine with it. The browser alone is more than enough to do a presentation with. :)

DownloadDownload Slides-0.1.zip

Shortlink:

18 Comments

  1. Pretty cool stuff. I see potentials in it. Thanks for sharing bit of awesomeness, as usual.

  2. This is awesome. I went the CPT route so it can live in a single WP instance and used page attributes to control ordering. A custom taxonomy groups the slides into presentations. Not as elegant as I want it to be but it works.

    Here’s what I put together for the Boston WordPress meetup: jonbish/custom-post-type-slides

    • I considered that, as well as making it a plugin and allowing for a CPT for slides, then a taxonomy to group them, then to use a shortcode to put them on individual Pages and such… But I’m using multisite. And just making a whole new site with a new subdomain is actually easier than screwing around with all that jazz.

      So this might not fit everybody’s needs. Fit mine though. :)

      • I like the idea of using a shortcode, just wrapping it in an iframe or something.

        I also like the idea of switching over to MU just so I can spin off subdomains for this sort of thing. I would much rather have an instance dedicated to presentations than clutter my main site with additional custom post types. Gonna keep an eye on your progress with this plugin and possibly steal some ideas :)

  3. Very cool. Thanks for making this. I also start planning a presentation by writing code, but I normally do it with flexslider in an otherwise static site. This is a much better idea.

    Where can I find the svn/GIT repo?

  4. This is absolutely a fantastic use of WordPress that I’ve been looking for previously without finding a simple and satisfactory solution – not to forget that yours is free.

    Thank you very much for this!

  5. Great stuff Otto, this is definitely going to be useful for many :)

    Emil

  6. Very cool. Any reason why you went for a custom taxonomy instead of custom post meta? It seems more logical, setting flags for a particular slide. I generally think of custom taxonomies for grouping posts/slides.

  7. Fascinating stuff. I love how you’ve implemented this into WordPress: really shows just how extensive WordPress is and is an excellent showcase of a truly unique implementation. Fantastic!

  8. Great stuff ! Nice idea – currently playing with along with Advanced Page Manager – Thx !

  9. grand! thanks for the download!

  10. Wow – love this! :) I really want to do a presentation now just so I can use the theme… still USB everything at present uni/work so the thought of not having to fuss around with PPTs is awesome. Just make sure there’s an internet link and a decent browser…

  11. This is awesome. Its making my theme making senses tingle. lol

  12. I’ve also created presentations using WordPress sites. Frankly, I find it faster to build a site than use PowerPoint, and the upside is that you’ve also created an accessible resource for those who attended (or had the great misfortune to miss) the presentation.

  13. I am Gonna keep an eye on your advancement with this plugin and conceivably take a few thoughts. I likewise as the thought of exchanging over to MU hopefully I can turn off subdomains for this kind of thing. I like the thought of utilizing a shortcode, simply wrapping it in an iframe or something. I might much rather have an occasion committed to presentations than jumble my fundamental site with extra custom post sorts.

  14. Great post,thanks for sharing! I found your “segue” slide interesting , a new concept for me!

Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Need to post PHP code? Wrap it in [php] and [/php] tags.