It's better when it's simple

User Tools

Site Tools


clock Plugin

Compatible with DokuWiki

  • 2024-02-06 "Kaos" unknown
  • 2023-04-04 "Jack Jackrum" unknown
  • 2022-07-31 "Igor" yes
  • 2020-07-29 "Hogfather" unknown

plugin Display a clock in DokuWiki

Last updated on

Tagged with time

The clock plugin provides a visual representation of time in your DokuWiki pages, using nothing more than some CSS and JavaScript… and voilà: the current time, in your browser. This plugin is more useful if combined with a sidebar-enabled template like arctic.

Feel free to use and comment (see ⇒Discussion).

Quick Questions:
So you want to…
…install this plugin? Instructions
…configure this plugin? Configuration
…see the plugin in action? Demo
…read a legal disclaimer? Legalese
No longer under experimental!

Download and Installation

Search and install the plugin using the Extension Manager. Refer to Plugins on how to install plugins manually.


Just write in a line of its own:



  • The plugin syntax takes no parameters.
  • Configuration is available via the Configuration Manager.


Want to see the plugin in action?

:!: The (Neo) Demo site will show you how does the plugin work, live1).

Note language is Spanish but online translators shall do a good job with it.


An example visualization of the clock plugin
(using a custom CSS style to match "24"'s digital clock)


Plugin, with default style.
Plugin, with the “aradio” style.
See Manual Styling, however.
Plugin, with the “tv24” style.
See Manual Styling, however.
Plugin, with the “bluebox” style.

Sneak Peek

Analog clocks…
the possible future of the clock plugin?


The plugin is configured via the Configuration Manager. Here is a quick run through the most important options:

  • clock_type: This option sets what kind of clock is used. Currently only the option text is supported.
    • text: A normal text clock.
    • binary: A binary clock. :!: Currently unimplemented.
  • clock_style: This option is set to a class name used to style the plugin. Check style for examples.
  • helpbar: If this option is enabled, The Helpbar is displayed alongside / below the plugin. By default the helpbar contains a link to the page specified by the infopage option, or to the official plugin page (ie.: this one ;) ), but it can be changed to almost anything.
  • infopage: this option specifies the location (pagename) of a wikipage containing information for this plugin.
    • By default it points to :wiki:clock, which must be created by the admin.
    • Setting it to an empty string points the info link to this very page.
  • nojs_fallback: This options specifies what to do if JavaScript is not enabled in the client: then the clock shows either the time as seen by the server, or a standard message with the name of the plugin, both static (ie.: non-animated).
  • font_fallback: This options sets the fallback CSS family for the font style in case you have specified a font-family in your CSS configuration and the clients can't find it. It can be set to any of the standard CSS families.

:!: To configure the clock styles or add new ones, check the section on Customization.

Other Details

The Helpbar

This version of the plugin implements a help bar that displays the wiki link selected in the Plugin Configuration options (under infopage), or a link to this very page if that variable is left empty. If you want to remove the help bar, just disable it via the Configuration Manager.


The aradio and tv24 styles require not only adequate CSS3 typeface support, but also that the client has installed or can access the requires typefaces (fonts). The typefaces are not provided directly to avoid problems with licensing, networking and privacy when installing the plugin by default.

To create your own clock style, the quick&dirty way is to pick one of the default styles (the actual default one, even), copy it to your $DOKU_CONF/userstyle.css and modify as needed. You need to modify the .default classname to one of your liking, which you can then set as the style used from the Configuration Manager.

Known Issues

Only one instance of the clock is allowed to exist in a DokuWiki page. This is by design. If the syntax mode ({{clock}}) is used again in a page, an anchor-link to the location of the existing clock will be shown instead.

The plugin does not support simultaneous loads (like from a page and a sidebar). This won't affect normal rendering unless the two pages are displayed at once, in which case only the first invocation loaded (usually the normal page) will be rendered correctly, and the other (usually a sidebar) will be left an empty space.


:?: How do I add my own style?

:!: Copy one of the styles of the style.css to your conf/userstyle.css file and edit as appropriate, following the instructions in the Customization section.

:?: I installed the plugin but the aradio and tv24 styles won't show with the adequate typefaces?

:!: The aradio and tv24 styles require the client's browser to support CSS3 @font-face method to load external typefaces. Unfortunately only some browsers support this feature with the necessary degree of completeness (tested in Firefox 3.6 and Opera 10.61 at the moment of this writing).

:?: How do I provide the typefaces from my server to the clients?

The instructions to enable these fonts in your own DokuWiki installation, assuming you already have them, is as follows:

  1. Your clients need web access to the typeface, so make sure that they can download it by placing a direct link somewhere in your website2).
  2. Substitute the “/path/to/your/typeface” entries in the style.css file with the paths above as appropiate and save.
  3. Flush your DokuWiki cache.
  4. Point your users towards the fonts, as well as installation instructions and, if possible, suggest them to use standards-compliant browsers. That's what the infopage setting is about – just put some text to explain how to install the fonts and some download links3).

This has a double effect: if visitors load the page using an up-to-date browser, the browser itself will take care of downloading and rendering the font; if it doesn't, then users can still download the font themselves and install in their systems, which in Firefox 2+ and Opera 9+ should result in the font becoming available.

By this point, visitors should be able to view the plugin's effect at its full potential if they are using a web browser that follows standards. If for some reason the user can't load the fonts (maybe he is using IE?) the plugin will still render with acceptable defaults.



This plugin (“clock”) © The Author.

“clock” is developed part-for-fun, part-for-learning, of The Author's free will and during his spare time. It is released “as-is” under the terms of the GPL 2 License. The Author is not affiliated to the core DokuWiki staff, he just knows the guys and likes them (er… their work). The Author takes no responsibility for damages caused by inadequate use of “clock”, but tries to stay available for a nice chat if particular issues related to “clock”'s domain are presented. Insert standard lorem-ipsum like legal disclaimer and/or waiver of warranties here and you know the drill.


Do you have a question? Using Mosaic? Does the clock actually work in Links? Have an urge to beat me to a pulp unless I release the release?

No worries! Leave your questions here and I will try to answer as politely as I can to avoid being beaten to a pulp.

I attempted to disable the info link after the clock without success. Exactly what file and syntax needs to be used?
I tried things in <root>\conf\local.php like $conf['helpbar'] = 0;, $helpbar = 0;, etc.
Thanks for the help…

Oopps… it seems some parsing escaped me. The syntax should be $conf['helpbar'] = 0;, which the Configuration Manager already handles. Remove the plugin and download it again (there's a patched version) to see if the changes go through. — Luis 2010/07/07 19:44

\\Work on 2010-11-07 “Anteater” — vinnie 2011/01/13 1:25


Hello team, How can we make the clock float towards the top right or top left of a given wiki page???


Hello. If you mean float as in be permanently moved, the only option is customizing the CSS as explained above, but that'll effect entire wiki. Not sure if what you ask can be done without writing a plugin that deals with specific pages itself. — Luis Machuca Bezzaza 2012/01/20 21:08
although, actually, it's the wiki navigation that functions as the demo for this plugin
be wary of licenses however, and see the point below
plugin/clock.txt · Last modified: 2024-01-22 03:39 by ryan-chappelle

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki