You know that button that says “show a link to this page” when you edit a page you’ve made? Yeah. There’s a reason that’s there. Many of the tumblr themes I have seen and, once upon a time, used, have not made use of the operators tumblr made to make it easy to add custom links to themes. Easy for the user and easy for the maker. This is a tutorial on how to put them in your tumblr themes - for people who have experience with HTML, CSS and making tumblr themes.
Anything you want to link on your theme should be made as either a Standard Layout page, Custom Layout page, or Redirect (for links to external sites like twitter or something). Check out my tumblr theme help page for a more detailed explanation.
So, first of all, you have the “Has Pages” block which will render what it’s wrapped around if the user has custom pages/links:
{block:HasPages} {/block:HasPages}
Then you have the “Pages” block which you wrap around each individual link:
{block:Pages} {/block:Pages}
And finally {URL} for the link URL and {Label} for the name of the link.
For ask and submit links, of course they need to be enabled in settings, and then there are separate operators specifically for those links.
For submit links you have {SubmitLabel} which is the name of the submit link and can be changed in your blog settings, and the block:
And there you have it, easy to code, easy to use, tumblr didn’t waste their time making those operators, everyone’s happy. Once you have that basic code you can style the links to be however you want using ul (unordered list) and li (list item) in CSS. You probably want to get rid of the default list styling, so you need to put “list-style:none; margin-left:-40px;”. You may want to make each link have it’s own background colour, in which case you need to put “display:block;” if you want them to display one under the other, or “display:inline-block;” if you want them to display next to each other. Then give them whatever padding you want and whichever background colour you want. To change the text colour you may need to put “li a { color: [insert colour]; }” to specify that you want to change the “a” colour in the list items. You can go wild with styling you navigation links. For example, make the background change colour on hover or use the “:nth-of-type()” thing to alternate the colours of the links. You also could use Javascript to make a pop up menu for your tumblr theme links. The possibilities are endless.
Having customizable navigation links is essential for most people who use tumblr themes. They want to be able to have as many links in their tumblr theme as they want so that readers of their blog can easily be directed to their tags, twitter or other social media, About Me page, etc. Hopefully this tutorial was useful in explaining how to make it as easy as possible to add the option for custom navigation links to your tumblr theme and also how to style them.
