Building User Editable Website Using Wikidot

by Gabrys on 30 Apr 2010 08:38


Attention: this post is highly technical, mostly suited for experienced Wikidot users.

Recently I have found a nice way of creating sites for someone else (for your family, for your students, for your clients) using Wikidot. I'll explain how to do that but first, let's see what I've tried to achieve:

  • I need to build a website that user can edit in a friendly way, but can't break easily
  • this requires separation of permissions
    • creator — creates the website, graphic design, structures, prepares everything for the user
    • user — can edit content — add news, edit texts, upload photos and (optionally) delete comments
    • visitor — can view pages and (optionally) post comments
  • no experience with Wikidot or wiki syntax should be required for site user
  • nice URLs like http://your-domain/news, http://your-domain/gallery, …

This is more or less what CMSes1 do, but now done entirely with Wikidot.

Smart templating and setting basic permissions

You (as a designer) want to have control over pages, leaving user with only gaps to fill. Imagine you have a home page with an image, news section and some static text. You need to lay the elements out, and let site users fill them. So you want them to be able to:

  • edit the static text
  • add/edit/delete news
  • change the photo

You don't want them to:

  • see complex Wikidot code
  • see complex CSS code
  • see complex anything

How to do this?

First of all you need templating. Create the page named _template: http://your-domain/_template and use the following code:

[[include site-admin:header-%%name%%]] 


[[include site-admin:footer-%%name%%]] 
[[button edit text="Edit"]]

This template is applied to all pages with no category (no ":" in name). Visitors (and users) coming to those pages will see content wrapped in your code (which is site-admin:header-<page name> and site-admin:footer-<page name> for each page), but when users edit pages, they will only modify what's in the middle.

Now you may go to you Site Administration Panel (at http://your-domain/admin:manage) and make some tweaks:

  • hide Wikidot page options for everybody (only you'll see them as site admins always see them): Permissions » _default » Show page options to — uncheck everything in this line.
  • disallow editing pages in site-admin category (every page with name starting with site-admin:): Permissions » site-admin » Edit — uncheck everything in this line. Still you as the admin can edit those pages.

Now if you create any page with no category, say http://your-domain/home and save, you should see two include warnings: one for site-admin:header-home and one for site-admin:footer-home. You can create those pages right away and fill them with some Wiki code.

To sum up: each page with no category now consist of three sections:

  • header — editable only by you
  • content — editable by users
  • footer — editable only by you

Users don't see Wikidot options, only Edit button, which you supplied for them in _template page. Smart (and complex) Wikidot and CSS code is hidden inside header and footer, so users don't see them, but you do.

Creating news section

You probably want your users to be able to create, edit and delete news on the site. You'll need a category for this (say news:) and a bunch of Wikidot code to do it.

First of all, you'll want a code to display the news. Here it is:

[[module ListPages category="news" limit="5"]]
+ %%title%%


You can put this in your preferred location, for example in header of some page. In footer, you'll want to supply links to add, edit and delete news. Link to add news is as follows:

[/news:add/edit/true Add news]

This will work as long as news category is autonumbered. You can make it autonumbered in Site Admin.

In order to take users back to home page after they added news, edit news:_template and let it be:

[[module Redirect destination="/home"]]

(If you have your news section on http://your-domain/home)

Now, we'll make users a panel to edit and delete news:

Edit and delete:
[[module ListPages category="news" separate="no"]]
* [/%%fullname%%/noredirect/true %%title%%]

Place this code in some header or footer (probably just where the add news goes) and update the news:_template, so you'll let your users actually edit and delete the news:

[[module Redirect destination="/home"]]


[[button edit text="Edit"]] or [[button delete text="delete"]] this news

Once they choose the news, they'll be shown the news content and two options. They can either edit it or delete. After they edit, they are taken back to home. Unfortunately after deletion, they stay at the same page and they need to navigate themselves.

Hiding Wikidot complexity

Many of the Wikidot interface elements are not needed for your users and (even less needed) for visitors. Hopefully most of them have CSS classes and/or ID, so they can be simply hidden with CSS:

#page-info-break, .edit-page-bottomtable, #page-info, #page-options-bottom, .page-watch-options, #edit-diff-button, #edit-preview-button, #edit-save-continue-button, .edit-help-34 {
    display: none;
    margin: 0;
    padding: 0;

And the last step. How to make buttons you created (in headers and footers) appear only for users, not for visitors? Well, it's not yet perfect, but as probably 95% of visitors won't be Wikidot users, you may be happy with just hiding the buttons from non-Wikidot users. How?

[[module ListUsers users="."]]
[[button edit text="Edit"]]

Text inside module will be shown only to logged-in Wikidot users (that are most probably your users).

Nice floating image

Next trick is again about making things simpler. With this code you can put floating (to right) image, that will only appear when it's attached to the page and no matter what its name is.

[[f>image :first size="small"]]

To let users change the image, just put [[button files text="Change a photo"]] in footer and they could upload another image.


I've shown only a few tricks which allow building websites for use by other people with the concept of separating permissions and hiding complexity. If you find other ways of doing this, please share!

The photo comes from Flickr.

Comments: 12

Add a New Comment