tutorial: custom dw navigation links

[terra]

The default Dreamwidth navigation module has a lot of stuff in it that might not be relevant to how you use the site and your journal. While it is pretty easy to remove individual items using CSS, you can also customize your navigation menu using the S2 system, which allows you to add new links or change the order of the existing ones.

Creating a new style layer

First, you are going to need to create a new style layer. On Dreamwidth this is in the Advanced Customizaton area. You want to go to the Create a style-specific layer and then select theme in the first dropdown, then whatever layout you want to use in the second. It should look something like this, with your layout instead of Five AM:

The code you need to paste

function print_module_navlinks() { var Page p = get_page(); var string[] navlinks_order = []; var string{} navlinks_urls = {}; var string{} navlinks_text = {}; $navlinks_order = [ "recent", "archive", "read", "network", "tags", "memories", "var1", "var2", "userinfo", ]; $navlinks_urls = { "recent" => "$p.base_url/", "archive" => "$p.base_url/archive", "read" => "$p.base_url/read", "network" => "$p.base_url/network", "tags" => "$p.base_url/tag", "memories" => "$*SITEROOT/tools/memories?user=$p.journal.username", "var1" => "https://URL", "var2" => "https://URL", "userinfo" => "$p.base_url/profile", }; $navlinks_text = { "recent" => "$*text_view_recent", "archive" => "$*text_view_archive", "read" => "$*text_view_friends", "network" => "$*text_view_network", "tags" => "$*text_view_tags", "memories" => "$*text_view_memories", "var1" => "Custom Text", "var2" => "Custom Text", "userinfo" => "$*text_view_userinfo", }; open_module("navlinks", "", ""); var string[] links = []; foreach var string k ($navlinks_order) { if ($navlinks_urls{$k} != "") { var string css = """ class="$k" """; if ($p.view == $k) { $css = """ class="current $k" """; } $links[size $links] = """<a href="$navlinks_urls{$k}"$css>$navlinks_text{$k}</a>"""; } } print_module_list($links); close_module(); }

Breaking it down

So, say I have a journal and I want to change the navigation to include a link to my plurk and remove the link to the memories feature which I never use. Finally, I'd like the profile link to come before the archive link. So, I'd copy the code above, and here's how I would modify it, going section by section:

$navlinks_order =

    [

        "recent",
        "archive",
        "read",
        "network",
        "tags",
        "memories",
        "var1",
        "var2",
        "userinfo",
    ];

In this first part, I'd delete memories, move userinfo so that it comes before archive, and then change var1 to plurk, so I remember what that variable is supposed to mean. I don't need var2, so I delete it.

$navlinks_order =
    [
         "recent",
        "userinfo",
        "archive",
        "read",
        "network",
        "tags",
        "plurk",
    ];

In the next sections, I have to make sure that I change var1 to plurk, so the above code knows what it's referencing. I also have to make sure my new link points where it is supposed to go.

$navlinks_urls =
    {
        "recent" => "$p.base_url/",
        "archive" => "$p.base_url/archive",
        "read" => "$p.base_url/read",
        "network" => "$p.base_url/network",
        "tags" => "$p.base_url/tag",
        "memories" => "$*SITEROOT/tools/memories?user=$p.journal.username",
        "plurk" => "https://plurk.com/vigils",
        "userinfo" => "$p.base_url/profile",
    };
 
 $navlinks_text =
    {
        "recent" => "$*text_view_recent",
        "archive" => "$*text_view_archive",
        "read" => "$*text_view_friends",
        "network" => "$*text_view_network",
        "tags" => "$*text_view_tags",
        "memories" => "$*text_view_memories",
        "plurk" => "My Plurk",
        "userinfo" => "$*text_view_userinfo",
    };

I could delete the memories sections of the code, since I removed that link, but I decide to leave them, to make it a bit easier on ever if I want to add it back. I did delete the extra custom variable I wasn't using, though. Note that I didn't need to move the userinfo variable, because the order of the links is set by the first section.

This code is borrowed from ninetydegrees, and the original can be found here.