InMotion Hosting Support Center

DokuWiki has preset menu items towards the top right that are very difficult customize. The links are Recent Changes, Media Manager, and Sitemap. These are there by difault and are difficult to change. You can use a custom made css menu that can be inserted into the wiki header code. This will allow you to add your own links to the top of each page. The template used in this tutorial is the DokuWiki theme.

Adding custom menu code

The following steps will explain how to add custom HTML and CSS to your template code.

  1. Login into your cPanel.
  2. Go to the File Manager, select your dokuwiki installation location and click Go
  3. Navigate to the following file:


    Open the tpl_header.php file in the code editor.

    Custom code for menu DokuWikiInsert the menu code in the file right before the following code:

    <!-- BREADCRUMBS -->
    Here is the custom code for the header section.
    <!-- Begin Custom Menu -->
    <style type="text/css">
            #custom_menu {clear:both;}
            #custom_menu ul {padding:0px;}
            #custom_menu ul li {display:inline; margin:0px 10px 0px 0px;}
    <div id="custom_menu">
                    <li><a href="/doku.php?id=html_basics">Html Basics</a></li>
                    <li><a href="/doku.php?id=contact_us">Contact Us</a></li>
    <!-- End Custom Menu -->

  4. Custom menu final view DokuWikiSave the file.

    You can edit the source code of the menu to link to your existing pages and change the link names to customize the menu further.

    The snapshot to the right will show what the menu looks like after the page is saved.

Continued Education in Course 201: Working with menus in DokuWiki
You are viewing Section 1: Inserting a custom CSS menu in DokuWiki
Section 2: How to use the menu plugin in DokuWiki

Support Center Login

Social Media Login

Social Login Joomla

Related Questions

Here are a few questions related to this article that our customers have asked:
Ooops! It looks like there are no questions about this page.
Would you like to ask a question about this page? If so, click the button below!
Ask a Question
n/a Points
2014-03-24 11:21 am

Hello i used your code and it worked perfectly.

But is it possible to use it as a div. and edit the background colour and make buttons in it?

Something like this website has as a nav bar?

i hope you can help me.

Thanks, Bram van der Werf.


43,758 Points
2014-03-24 12:27 pm
Hello Bram van der Werf,

Yes, you can customize the CSS for your menu to behave any way you like. Simply keep testing and tinkering with it until you get it the way you want. If you are not sure how to do so, you may want to contact a CSS professional to assist you.

Kindest Regards,
Scott M
n/a Points
2014-03-25 5:03 am

Thanks for your answer Scott!

So i edited some css in the tpl_header file but it does not work on the website.

Do i have to make a different file in the css directory ?



Bram van der Werf.

11,186 Points
2014-03-25 8:09 am
If you are changing an existing CSS style, you might want to locate the file in which it is declared, as your changes could be becoming overridden by another stylesheet.

Post a Comment

Email Address:
Phone Number:

Please note: Your name and comment will be displayed, but we will not show your email address.

4 Questions & Comments

Post a comment

Back to first comment | top

Need more Help?


Ask the Community!

Get help with your questions from our community of like-minded hosting users and InMotion Hosting Staff.

Current Customers

Chat: Click to Chat Now E-mail:
Call: 888-321-HOST (4678) Ticket: Submit a Support Ticket

Not a Customer?

Get web hosting from a company that is here to help. Sign up today!