Create a Page and Make its Link Appear on Tumblr


Creating a Tumblr Page is indeed easy, since the option is available in the customize section.  However, after creating the page, many find out that the link for such page wouldn’t show up anywhere.  This is due to a simple reason, the theme installed is missing the code necessary to pull the Tumblr Page, and of course, there’s no link whatsoever in the layout. This two step guide will show you how to create a page on Tumblr and make its link appear on the theme.

Create a Tumblr Page.

  1. Go to the customize section in your dashboard.
  2. In the customize navigation bar, click on Pages >>> Add a New Page.
  3. After that, an edition screen will pop up, besides giving the page a title, it’s very important that you tick the option Show a Link to This Page and alsogive the page an url (for example, if you want to name your page First Tumblr Page, you will write the url as follows first-tumblr-page using the dashes to connect the word. Both steps are necesary to display the link correctly.
  4. Click on Create Page. That is it, you now have a Tumblr Page, that is indeed, different from a Tumblr post.

Show Your Page Link on Your Tumblr Layout.

We have two sets of code to insert in our layout, one of them goes to the theme’s html (to actually make the link appear) and the other one to the custom css option (to modify the looks).

  • This is the code to insert in the theme’s html. You can place it in the sidebar, header, or footer. always make sure not to break any other line of code in the theme

  • <div id=”navcontainer”>
    {block:HasPages}
    {block:Pages}
    <ul>
    <li><a href=”{URL}”>{Label}</a></li>
    </ul>
    {/block:Pages}
    {/block:HasPages}
    </div>

  • Now with the CSS, we already used a tag in the previous code; id="navcontainer". Which will be used to identify this piece of code and modify the way it looks.  The following code must be inserted into Customize >>> Advanced >>> Add Custom CSS

If you are placing the CSS in the header or footer and need the page links to be displayed horinzotally, paste the following code:

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

If you are placing the links in the sidebar and need the page links to be displayed vertically, paste the following code:

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

You can, of course, keep modifying the css to add bullets, colors, font type and more, but as this is not a CSS article, I consider this enough for you to make the links appear.


139 Responses to "Create a Page and Make its Link Appear on Tumblr"

Add Comment
← Older Comments
  1. Danny Rengel

    August 25, 2012 at 11:05 pm

    I’m trying to add my “my face” page to my blog and I still have no idea what to do and where to put all this code

    [Reply]

  2. J Rosende

    August 30, 2012 at 6:42 pm

    I tried step 1 above and still kept receiving “error code – can’t access this page.” What I am not doing right?

    [Reply]

  3. Allie Steinbach

    September 3, 2012 at 6:30 pm

    After I make the new tab and put pictures in, is there a way those pictures can be reblogged by others? If so, how do you do that?

    [Reply]

  4. imperfect

    September 23, 2012 at 4:23 am

    I pasted the link under the customize CSS part but I dont know where to paste it when Im actually customizing my HTML. I want it in my sidebar next to the ask and home buttons, but I have no idea where I should paste it.

    [Reply]

  5. imperfect

    September 23, 2012 at 4:26 am

    so i experimented and made the links appear but now my theme is a little mixed up. the sidebar moved to the top center.. i dont know what i did wrong and how to fix it

    [Reply]

  6. Debbie

    September 23, 2012 at 9:56 pm

    How do you add more picture’s to the link?

    [Reply]

  7. Annabella

    September 24, 2012 at 5:50 am

    Hey i am having the same problem as cassandra sort of. I make the pages they show up for a second then it says “the url requested could not be found”. See here -http://child-of-the-tropics-banners.tumblr.com/fonts/. PLease! PLease! Help me! It is so annoying i really want to use have different pages but is does not work please please.

    [Reply]

  8. kaela russell

    September 27, 2012 at 12:20 am

    the links appeared on my tumblr but when i clicked on them it said the the url i requested could not be found. i typed in the url into the browser address bar, and it worked but it doesnt work within my tumblr

    [Reply]

  9. Eryn

    October 20, 2012 at 8:05 pm

    I want to put mine in the sidebar too but there is so many sidebar options and can’t find a any other options? I have it at the header right now and when I clicked on it said URL not found.

    [Reply]

  10. mcal

    October 27, 2012 at 8:20 am

    I have got the Iris theme which doesnt allow me to add a page. but when i put the first code in, it worked but when i clicked on ‘create page’ it said no URL specified. Also my URL is grey not black and i cant edit the URL section?

    [Reply]

  11. Elly

    October 31, 2012 at 2:32 am

    okay so when i tock the box “show a link to this page” it automaticallly says my theme does not support them sooo…. how can i fix that?

    [Reply]

  12. Lexi

    October 31, 2012 at 3:52 am

    I made the page on tumblr and the link shows up on my tumblr fine. But when i click the link it takes me to the correct url, but it’s nothing but a blank page. What do i do?

    [Reply]

  13. keisha boudreau

    November 5, 2012 at 4:20 pm

    when i get it all finished it says “no url specified”

    [Reply]

  14. Giuliani

    November 7, 2012 at 10:24 pm

    I always emailed this webpage post page to all my
    friends, for the reason that if like to read it after that my friends will too.

    [Reply]

  15. Christopher

    November 15, 2012 at 9:13 am

    I’m really confused I did everything right I believe and things still aren’t working?
    I get this theme from someone else who makes their own themes.Their theme didn’t support adding pages to their theme, so I got here and I’m still confused.Any advice because the links still aren’t appearing?

    [Reply]

  16. Lindsay

    November 24, 2012 at 4:09 am

    This code worked for me but the links don’t match my theme. Any suggestions?

    [Reply]

  17. essa

    November 27, 2012 at 10:40 pm

    hairterminologyvisuallyexplained.tumblr.com

    Hello,

    I tried pasting both codes, the links for pages were shown but the url could not be found when I clicked on it,

    Also,
    when I clic on a tag, I don’t get all the posts that have that tag to show up and the infinite scroll repeats the page numbering…. I don’t know how to explain…

    PLEASE HELP ME !
    :(

    essa

    [Reply]

  18. essa

    November 27, 2012 at 11:47 pm

    update

    I was finally able to insert both of them in the description with another code.

    Next step, insert a tag cloud.

    thanks for the tips

    [Reply]

  19. susan

    December 2, 2012 at 7:03 am

    i wasnt able to make the links show up and i dont quite understand how to do it, any help? :(

    [Reply]

  20. Kyla

    December 20, 2012 at 3:36 am

    I did as you said and put the code into the html, which worked great – the links for my pages showed up on my blog. Now my problem is when I click on the link from my blog it says “The URL requested cannot be found” but if I type out the URL into the address bar it shows up fine. What can I do to fix this?

    [Reply]

  21. Siobhan

    December 29, 2012 at 1:53 pm

    Hi, I want to add sub links on a page/pages that has a link on the front page, how do I do that?

    Thanks, Siobhan

    [Reply]

  22. cherylle

    January 2, 2013 at 7:19 am

    i did it, and they appear on my layout but they also say the url has not been found. i tried posting the url in my tumblr theme, but it still does not work. i do not understand why it is not working.

    [Reply]

  23. Renee

    January 9, 2013 at 7:36 pm

    Hey, i cant seem to get my page links to show up in the right spot it only shows up on the left hand corner, in the middle of the page or the very bottom, I’d really like it in the sidebar but the like above isnt working. please help!

    [Reply]

  24. Zohra

    January 23, 2013 at 4:57 am

    I’d like to put the links in my sidebar but I can’t find the right spot in the html to paste it in. I’ve tried a few places but the links always end up in the top left corner which is a bit annoying, but tolerable, but when they’re clicked, they grow and turn blue and I don’t like it. Can you please help me put them in my sidebar?!

    [Reply]

  25. Zohra

    January 23, 2013 at 5:03 am

    Okay, nevermind, I figured it out on my own, but how do you edit how it looks? (Growing blue, bullet points, etc)

    [Reply]

  26. SUMMER

    March 5, 2013 at 11:48 pm

    Thanks for your share, i follow your step and the link did show up on my page under the heading, but when I click on it, the posts tagged under the page name didn’t show up. Don’t know which step i did wrong …

    [Reply]

  27. layla

    March 25, 2013 at 9:55 am

    I’m still confused as to where I am supposed to place the first code, could you be a bit more specific? Thanks.

    [Reply]

  28. Amber M.

    April 4, 2013 at 7:38 pm

    It worked great, but the pages say “The URL you have requested could not be found”. Help?

    [Reply]

  29. KimBerly

    April 13, 2013 at 3:59 am

    Where do we put the so the link will display? && Do I use the horizontal or vertical code?

    [Reply]

  30. Kitty

    May 31, 2013 at 2:17 pm

    Guys who had the same problem (that url not found)! I FIGURED OUT WHAT’S WRONG!

    Instead of {Label}
    you have to put
    {Label}

    you just had to delete the two ” of the {URL} part.
    Lol I’ve never learned html but somehow I just figured out! Haha XD
    I hope I helped!

    [Reply]

  31. Kitty

    May 31, 2013 at 2:19 pm

    well what I posted, doesn’t display right so I tell you again, with words.
    In the htmle code (the first one) in the 5th line, you just have to delete the “s from near the URL label, and that’s it, it will work :)

    [Reply]

  32. Bina

    June 10, 2013 at 6:23 pm

    Hey, I got a question…
    I don’t know if this is right, or it’s just to hard to learn it.
    I want to create I don’t knkow if it’s a page?…I want to create something(somewhere) where I can write something else, like, example: Exercises, and when I go there, I can post exercises, and pictures of it, but I don’t know how…I create a page, and Save it, but it’s just empty, and I don’t know how to put something on it…help?

    [Reply]

  33. Melanie

    June 11, 2013 at 3:15 am

    I’m having a hard time finding the sidebar in my html, any advice?

    [Reply]

  34. shadi

    June 15, 2013 at 3:37 pm

    i dont know where in my theme’s HTML to post the first code ?

    [Reply]

  35. Jim

    July 3, 2013 at 12:12 am

    I put the code in and everything worked fine. Except you can’t really see the the link on my page unless you know its there. Tried changing color and background color. Nothing changed… Please help?

    [Reply]

  36. Tess

    July 13, 2013 at 5:38 pm

    I’m trying to make pages with custom themes, but when I click the drop down menu to switch from “Standard Layout” to “Custom Layout”, that option doesn’t show up. Is there a code I need to add to my main theme to make it work? Help =S

    [Reply]

← Older Comments

Submit a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>