In my talk at WordCamp Antwerp 2018, I tried to summarize the benefits of the Customizer for users as well as for designers and developers. For this, I built a presentation in the Customizer.
In this post I am showing you how you can create a presentation using the presentation theme (WordPresent) I created.
How to use the theme
Download the theme and install it according to the instructions on GitHub.
If you install the theme on a new WordPress installation, you can preview it with the “pre-defined” presentation slide examples in the Customizer. This is because I added them as starter content, a really cool WordPress feature. You can change the content of the slides as you wish and when you save it in the Customizer, the content will become real content.
Make a presentation
The presentation can be created on a page: select a page or create a new page and save it using the page template “Presentation”. The page title will be the presentation title and the content will be the content of the first slide.
View the selected page and go to the Customizer. When customizing this page you can add widgets to the widget area “Slides” (the only available widget area at this moment). Each widget becomes a presentation slide. You can add all kinds of widgets, but you will probably use a text widget most of the time. You can also add images. If you add an image to a text widget as the last element, it will be floated to the right. This may or may not work completely as you’d like. A portrait image might work better. If you want a large image, for a whole slide, you would prefer to use an image widget. Add a video using a video widget.
User experience
You can make a presentation without leaving the Customizer. You can use the control pane to add, edit, remove and rearrange your presentation slides. You can use the preview pane to view the presentation and to go to edit a slide by clicking the edit widget link.
Regarding to user experience, there are a couple of features that are inherited or rather easily integrated thanks to the Customizer:
- slides can be rearranged
- when a widget control is clicked or a new widget is added, the preview will show the edited widget/slide content and changes are visible (no core feature)
- vica versa, clicking the preview link brings you to the control to edit the current slide
Of course, a drawback is that slides cannot be edited in the preview itself (“inline”).
Customizing the presentation
The presentation can be customized using the Customizer, of course. 🙂
The following features are customizable.
Colors:
- text (light or dark)
- background
- background gradient
- link
Background image:
- select image
- position the image according to standard WordPress background settings
- set an overlay for bright and colorful images to keep the text readable
Logo:
- set a custom logo
- change its size and its position
Examples
Here you can find some screenshots with examples of possible slide designs.
Navigate between the presentation slides
Navigation between slides can be done by pushing Space to move to the next slide and Shift + Space to move back to the previous slide. By default, pushing the space bar in the browser brings you a page (= slightly less than one screen height) further.
Why I built this presentation theme
The idea was to use WordPress in a slightly different way. Also, I wanted to benefit from previewing content that is being created and what better way to achieve that than using the Customizer. 🙂
Since I am a fan of creating stuff as pure and functional as possible, I did not use any external dependencies, such as a plugin or a (JavaScript) framework. The theme is built using only core WordPress functionalities as of WordPress 4.9 and it is based on the _s starter theme.
The theme is a work in progress. It is meant to be an experiment, rather than something I want to promote. If you can benefit from it please do and improve it, if not, you can always go back to good old Powerpoint or another well-known solution.
A word about browser compatibility and mobile friendliness
Since this presentation is primarily meant for personal use and less for publishing a presentation, only modern browsers are supported. I mostly used flexbox to style the individual presentation slides and the header/footer. You’re free to choose the browser you use, I used Google Chrome to do my talk at the event.
If you want to publish your presentation I advise you to convert it to pdf or to extend browser compatibility in your own project: adding browser prefixes would get you far enough.
With regard to mobile friendliness, no specific testing was done. Slides made with text widgets containing only text should work quiet well since font-size is set based on viewport height.
I might improve these properties in the future, but no promise is made. 🙂
Download
I hope you can benefit from this theme. If you have any comments or suggestions, please contact me. I learned a lot making this, but I look forward to learn more.
Enjoy! 🙂