Surfarama Theme


Download Theme

Surfarama is a simple, bold and colorful theme suited to blogs and online magazines who like to feature great imagery. See this short video for a demo…

It is fairly customizable right out of the box with the ability to do the following with no coding necessary:

  • Upload your own logo
  • Add social media profiles
  • Set the primary, secondary, background and link colors
  • Choose whether to display category tabs and borders around posts on the home page and archive pages
  • Color code each category

Building a new site? Looking at hosting options? We recommend Siteground, Bluehost or GreenGeeks. You can see our complete list of all the top WordPress hosts.

Top Article:  Imagined Theme
Charlie has been building WordPress themes, reviewing web hosts and utilizing social media since their respective inceptions.

294 thoughts on “Surfarama Theme

  1. Iesus says:

    How I can add text to the top of the page, just below the menu bar ??
    Thank You

    1. charles Charles says:

      Hi Lesus, the theme includes an alternative home page template that includes the ability to add some intro copy. To use this you need to create a new static page (call it something like Home) using the alt home page template. The content of that page will display the masonry grid of posts as on the demo. With this set up you go to Settings > Reading and set that new page as the home page.

      1. Iesus says:

        1000 thanks

  2. Diana says:

    I am using a theme you created which I like Surfarama, Version: 1.1.1 via

    I need to know how to create a static ‘home’ page. Is it only by creating a sticky post? as I see posts do show there. But I would like users to see on first reaching the ‘home’ page 4/5 ‘topics’ ( pages I have created).
    What do you suggest?

    1. Kris says:

      Go to Settings -> Reading. Then you can now set the Static front page.

  3. ChepeCarlos says:

    I love this teme 🙂

  4. richard says:

    A list of links to working websites powered by this theme would be very helpful. Applies to all theme developers BTW.

    1. charles Charles says:

      Hey Richard, yes I agree that would be a neat resource, but quite time consuming to compile and maintain as people using free themes tend to swap them out pretty regularly.

  5. Hi Guys, I am using your Surfarama Theme, how ever on Firefox is look like this>>>
    Here are real live links to theme!
    Your help would be awesome!

    1. charles Charles says:

      Hi, I’m not sure what is causing that. It looks like you’ve used a plugin to power that slider? If so I suggest reaching out to the plugin developer. Or if you need professional help you could try Codeable.

  6. Szymon says:

    Hi, it’s me again. I’m curious; is it possible to set one link (to subpage) in menu in other color than other? I’d like to single out one menu item to be more vivid. If it’s possible could you explain me how? Thanks in advance.

    1. charles Charles says:

      Hi Szymon, this isn’t really possible without some real theme hacking which I wouldn’t recommend.

  7. Szymon says:

    I’m very glad user of Surfarama theme. Could you please tell me how add transition in menu and submenu (change color on hover and make submenu expand slowly). I don’t know where add the code and I’m not sure how it should looks like.
    Thanks in advance.

    1. Kris says:

      Download Simple Custom CSS WordPress plugin then go to Appearance -> Custom CSS and you can add this code, ul li{

      /*transition for the parent menu*/ ul li a{
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -ms-transition: all .5s ease;
      -o-transition: all .5s ease;
      transition: all .5s ease;

      /*transition for the sub menu*/ ul li ul.sub-menu {left: 0;
      opacity: 0;
      position: absolute;
      top: 40px;
      visibility: hidden;
      z-index: 1;
      -webkit-transition: all .25s ease;
      -moz-transition: all .25s ease;
      -ms-transition: all .25s ease;
      -o-transition: all .25s ease;
      transition: all .25s ease;
      } ul li:hover ul.sub-menu {
      opacity: 1;
      top: 50px;
      visibility: visible;

      1. Szymon says:

        Thanks Kris, your tip was excellent.

  8. Andy says:

    Got it thanks! Actually as much as I like yoast, that part isnt exactly clear.

    Planning any updates, nothing to complain about just think its such a good theme youd want to progress it?

    1. charles Charles says:

      Hi Andy, glad you like it. There is no new releases scheduled at this time, but I when we have the time we will be taking another look at all our themes.

  9. Andy says:


    How can I control the home page meta description please? Im using yoast for all other pages but can see how to edit the home.

    Great theme btw


    1. charles Charles says:

      Hi Andy, if you are using the default home page then you can edit the meta description in WordPress SEO plugin settings (SEO > Titles & Metas > Home). If you have set a different page as the home page then you can edit the title and meta description on the edit screen for that page (just look for the WordPress SEO section). Hope that helps.

  10. Jen says:

    I absolutely love the look of this theme, but when I load it for the first time, the images frequently overlay for a few seconds before the unscramble and it is slow to load. Any suggestions?

    Thank you!

    1. charles Charles says:

      Hi Jen, glad you like the theme 🙂 The home page loads this way because the theme needs to load the pics before it lays them out in the masonery style. The best advice I can give is to make sure you upload featured images that are not too big. If the page needs to load a number of large featured images then it will take a bit longer. Hope that helps.

  11. hi, just wanna say that surfarama is a great theme for multiple purposes. i’m writing a culture blog in german language and i really appreciate that pictures included in the particular post appear automatically as front-pictures on the startpage, even without adding them as featured image in the article. didn’t found any theme that could manage that. thanks.

  12. Sheraton says:

    Hi Charles, we have the Surfarama Theme and notice that the css have a bug in it! Example when upload a video and putting it in the post or page it will not keep the video within the frame! Take a look. We like know when a update will take care of this. We have also tried this with other themes and it seems to be with your Surfarama only.

    1. charles Charles says:

      Hi Sheraton, I gather you are using a plugin for your videos? I ask because I’m looking at this page and the video isn’t displayed in an iframe: – Looking at the code it seems the video is set to display 918px. Are you sure the plugin doesn’t give you some control over the width it displays?

      1. Sheraton says:

        Hi Charles, this is a standard video player that WordPress has. However if I change the theme to another them like “Twenty Fourteen” it will fit in it’s container! I have also turned all plugins off to see if it was a plugin issue! With them all turned off, the issue is still there. I really love the theme and would like to use it for video! Looks like it is within the code somewhere. Here is my site using another theme with video player playlist! I can leave like this for 6 hours for you to see!
        PS: This is WordPress standard video player! Not a plugin! Thanks Charles

        1. Kris says:

          Hello I have tried adding a video on the surfarama theme and it works fine. Can you give a screenshot about the issue? Thanks..

          1. Kris says:

            Thanks for the screenshot, download Simple Custom CSS WordPress Plugin then go to Appearance -> Custom CSS and add this code, .wp-playlist video{margin:0!important;}

  13. Kim says:

    Love your theme!
    Thank you so much for making it available to us and being so proactive about answering questions.

    I would like to know:
    Is there a way to move the page widgets from the sidebar to the footer?

    1. charles Charles says:

      Hi Kim,

      Not without some reasonably serious template customization which goes beyond what we can get into here. Only the homepage and full page templates have the footer widget area, so you’d need to add this to other templates if you wanted to achieve that.

      If you need some professional help with this I recommend Codeable.

  14. Luke says:

    Thanks a bunch Kris. I’m almost there. Have the one image behind the entire header and menu. Thanks for your patience. Now when I try to change my header image in the customize menu on the main site it brings up only the option to upload an image or drop a file to upload. I do this, the file does upload into my media library but nothing happens and it does not appear on the page. The only save button at the top of the customize menu reads saved and therefore I cannot save it. Any customize cod i could use to upload a png or jpeg fill to replace the black title of my page. Thanks so much for all your help with this, you’re helping me make my blog into something I can be proud of.

    1. Kris says:

      Try to deactivate all the plugins and upload the logo again. Or can you give me any screenshot so that I can see the problem?

      1. Luke says:

        Thanks Kris, Ill try that out later today. My computer has broken down so I have limited access right now, but if deactivating the plugins does not work ill try to get some screenshots of the problem. Thanks a lot.

  15. Luke says:

    Not sure If my last message posted so I’ll try one more time. Thanks for all the support so far. Two questions now. I’ve tried your latest code Kris but I’m wondering if it’s possible to have one image behind both of them. With the code you provided it displayed the same image twice, one behind the header and one behind the menu. I’m also having trouble in the customize option of uploading my own logo. I’ve created .png and .jpeg files in the recommended size but nothing happens when I try to upload them. Any ideas? Thanks for the fantastic theme!

    1. Kris says:

      header[role="banner"] {background: url("") no-repeat scroll 0 0 / cover rgba(0, 0, 0, 0);}. This CSS will give a background of whole header area.

      nav[role="navigation"] {background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important;} This CSS will remove the background of the menu.

      Note: After uploading your logo, do not forget to save. Thanks.

  16. Luke says:

    Hi Kris, Thanks for your suggestion. I’ve done what you suggested and am not seeing any change on my page. Any idea why this might be, I’m still pretty new to all this but am really enjoying learning. Anyway, thanks for your help and please let me know if there’s anything else I can try. Thanks,


    1. Luke says:

      Thanks Charles, that image was more of just a test one as it was my old blog header, here I’d be happy to just add an image behind the menu and title area so I’ll set to work at picking and editing a different image tomorrow and following the previous advice making sure I use the correct link this time. Bonehead mistake I know. At any rate thanks so much for the quick support and the truly excellent theme! All the best.

      1. charles Charles says:

        OK got it. Do try that CSS that Kris provided with another image URL and see how you go. If you have followup questions we are happy to try and help.

        1. Luke says:

          Thanks Charles. I’ve got a picture in there now and it’s looking better. I do have two follow up questions. First is it possible to have the image be under not just the menu but the website name/title as well. I know this might be too complicated. Beyond that is there a simple way to edit the size, font or colour of the menu and the text in the menu? I can’t find this for the life of me. Thanks so much.


          1. Kris says:

            Here is the CSS code for that,
            header[role="banner"] {background: url("") repeat scroll center center / cover rgba(0, 0, 0, 0);}
            And for the font color and font-size of the text in the menu, here is the CSS code,
   ul li a{font-size:/*insert size here*/;color:/*insert color here*/;}

  17. Luke says:

    First off what a wonderful theme, thank you so much for your hard work and excellent product. I’m just wondering if there is a way I could have an image as the background for the main menu at the top of my home page. I have an image designed and would love to put it in. Failing that is there a way to adjust the size and/or color of the main menu? Thanks.

    1. Kris says:

      Download Simple Custom CSS WordPress plugin then go to Appearance -> Custom CSS and add this code, nav[role="navigation"] {background: url("/*image link here*/") repeat scroll center center / 100% auto rgba(0, 0, 0, 0);}

  18. Kirsty says:

    Thanks Charles! Great theme and great support!


  19. Kirsty says:


    Sorry, I have another question.

    I’m struggling to find the right place to insert target=_blank to open the social media icons in a new tab.

    In header.php could you point out exactly where in this code i should enter the target?

    I have tried various places and either nothing happens or my site loads as a blank page.

    <a href="” class=”social-fb” title=””>target=”_blank”


    1. charles Charles says:

      Hi Kirsty, you are close…you just need to put the link target inside the href tag.

  20. Kirsty says:

    I’m loving this theme – i’ve tried out so many and feel like i’ve finally found one that will fit with my blog. Thanks for making it free!

    I want to move the homepage sidebar from the footer to the right side.

    I have tried copying the sidebar-post template to sidebar-home but this hasn’t changed anything.

    I’m really new to all this coding business so if you have some newbie-proof advice i would really appreciate it!


    1. charles Charles says:

      Hi Kirsty, that change is not trivial and is certainly more involved than we can get into here. It would require template and CSS changes. If you need professional help I recommend you try Codeable.

  21. Arthur says:


    I already left a message 5 days ago about this theme, mentioning how much i appreciate it and some features that’d be cool to add to it.
    So i don’t know whether my comment was inappropriate or you’re just taking some time to answer.

    Nevertheless, in my previous comment you’ll see i had some request about adding audio post formats.
    So this is just to let you know i finally came up with something that looks as i wanted it to be.

    You can check it on the website ->
    (look for the orange grid-box)

    Still, i’m struggling to make a function that would retrieve audio urls, and not just print the content in the grid-box like i did there.

    Any leads you could provide me to achieve this in the most efficient way?

    And let me know if my comments annoy you, i’ll stop.
    Oh and let me know if you guys’d be cool for some open contributions to this theme. I mean, i’ve been tweaking it around almost since it’s been released and would really gladly enjoy if i could contribute making it even better.

    1. Kris says:

      Sorry for the late reply, you can create audio format file by copying the content.php file and name it to content-audio.php. Then in retrieving the audio url, you can add this code below or above line #61,
      $postaudio =& get_children( array( 'post_parent' => $post->ID, 'post_type' => 'attachment', 'post_mime_type' => 'audio', 'orderby' => 'menu_order', 'order' => 'ASC' ) );
            if ( !empty($postaudio) ) {
                $firstaudio = array_shift( $postaudio );
                $th_audio = wp_get_attachment_url( $firstaudio->ID ); //get the url of the attached audio
                echo do_shortcode('"'');

      1. arthur says:

        Awesome! thanks

  22. Hi Charles, I just love this theme for my website, so thank you very much!

    But I have also one question, and am I trying to solve this for months now, but I didn’t succeed so far…

    There a white sidebars on the left and right on the homepage next to all the posts. And I want a newsletter widget on the right side of my posts. But the only place I can place this widget is on the bottom.. Is there a way to get this widget on the right side?
    I am really new to this thing, and still learning every day, so I hope you can help me.
    I use mailpoet for making the newsletter, which works perfectly fine, only not on the right spot.. 🙂

    Kind regards,

    1. charles Charles says:

      Hi Petra, there is not easy way to do this. The theme is a fixed width and has no room to add a sidebar on the home page. You would need to do some fairly significant theme customization to achieve that. I suggest you try Codeable or Elto for this kind of thing. Also you might consider adding your newsletter widget to the sidebar on post pages(?).

      1. Petra Hoogkamp says:

        Sorry, I didn’t get a message that you already answered, so I just saw your reaction this day. Thanks for your tip of putting it next to the posts! Sometimes the solution is much more simpel than you think! 🙂

  23. Winston says:


    Great theme, perfect for what I need, just one issue I have, when trying to upload image for new logo nothing happens at all! I have tried the theme on a different domain of mine and it works fine! any help much appreciated


    1. charles Charles says:

      Hi, that sounds like a pemissions issue. Have you tried uploading images to a post? Does that work?

      1. Winston says:

        Ok thanks, yes images upload fine, thinking there may be a conflict with one of the plugins, can this happen?

        1. charles Charles says:

          Hi Winstone, yes this is possible though seems unlikely if you can upload images to posts ok. I can’t replicate the problem here though so that would be the next thing to try disabling plugins and see if that ‘fixes’ the problem.

  24. Zampaï says:


    Is it possible to activate “infinit scroll” instead of pagination in surfarama home page ?

    1. charles Charles says:

      Hi Zampaï, this isn’t a core feature of the theme, but anything is possible of course. Have you tried the jetpack plugin? I think there is an infinite scroll option bundled there which might work. There may be other plugins to try also. I’m not a fan of infinite scroll myself so havn’t tried them.

      1. Zampaï says:


  25. Mike says:

    Is there an easy way to move the sidebar to the left side of the page, or will doing this break the theme?

    1. charles Charles says:

      Hi Mike, there is no easy way to move the sidebar. It’s doable, but will require code customizations. You might find someone at Elto or Codeable who can do this.

      1. Mehmet says:

        Hi there, is it possible that grid-box-img objects at home page are shown as gallery slideshow, instead of static pictures ? Thank you.

        1. charles Charles says:

          Hi Mehmet, anything is possible of course, but this would require you create an entirely new home page template.

          1. Mehmet says:

            Thanks for the reply, it’s better if I don’t try that at all 🙂

Comments are closed.