Surfarama Theme

surfarama-wordpress-theme-sm1

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:  Rock n Rolla
Charlie has been building WordPress themes, reviewing web hosts and utilizing social media since their respective inceptions.

294 thoughts on “Surfarama Theme

  1. I created and activated the surfarama child theme. If I copy the file functions.php in the child theme folder, the site does not work and it appears a white screen.

    1. Kris says:

      Be sure that your function.php file in you child theme folder has a opening PHP tag and no extra white space on the 1st line. For more information, follow this link, Child Themes

  2. Mark says:

    Thanks for this great theme. I’ve set a static homepage, but my problem is that nothing is showing up. Whatever I do, whatever page I set as home I just get a blank page. Any idea why? Many thanks.

    1. Charles says:

      Hi Mark, are you using any plugins? If so I recommended disabling these temporarily to see if that changes anything. If so then you can enable them again one by one to see which one specifically is clashing with the theme.

      1. Mark says:

        Hi Charles. I’ve deactivated every single plugin but I still have the same problem.

        1. Charles says:

          Hmm, I’ve been able to duplicate this bug. Working on it now. Will release an update asap. Thanks for the heads up.

  3. Chris says:

    Hey, excellent theme!

    Is it possible to add the time and date to posts on the home page? What coding would I need to add and to what file and code? Thanks a lot!

    1. Kris says:

      You can try this code <?php the_time('l, F jS, Y')?>, you can place this code inside all the post format files like content.php, content-video.php, etc. below <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'surfarama' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php if(the_title( '', '', false ) !='') the_title(); else _e( 'View Post', 'surfarama' ); ?></a></h2>

  4. Zampaï says:

    Hello, I am very interested by this awesome theme. However, I would like to individually set the size of each block. Is it possible ?
    I see that the last-post block is bigger and that some posts are middle size, and other small size. How to set that ?

    1. Charles says:

      Hi Zampaï, the size of the blocks is not a setting, it is determined by the dimensions of your photo. In other words all blocks are the same width, only the height adjusts automatically determined by the dimensions of the featured image. The only exception is the latest post (or latest ‘sticky’ post if you use that feature of WP) which is always double the width.

      Hope that makes sense.

      1. Zampaï says:

        THX.

  5. shahak says:

    HI. I love that theme! Small problem: the search box get’s stuck all the time. How do i fix that? Thank’s.

    1. Charles says:

      Hi Shahak, what you mean by ‘the search box gets stuck all the time”. Can you share a link to your site so we can check it out?

      1. shahak says:

        Hi Charles! I meant that the search box is getting stuck, when trying to search the site. You can check my site and see the problem (i hope) – Thank you !

        1. Charles says:

          Hi Shahak, hmm, I don’t know what is causing that. To be honest I know nothing about setting up WordPress to run RTL so I don’t know if the changes required would cause this or if indeed you have a plugin of some sort which might clash with the code in the theme. If you are running some plugins I suggest first that you try disabling these and see if that “fixes” the problem. If it does then you can enabled them again one by one until you identify the one which causes the clash. Then you can determine if you really need that plugin or if there is another alternative plugin which doesn’t cause the clash.

  6. Michelle says:

    Hi! Your theme is really great! I just want to ask how to lengthen or show the full content or the excerpt when shown in the archives. I tried to find the values in functions.php but no success. Any help would be appreciated.

    1. Kris says:

      Locate content.php and for all the post types(for example: content-aside.php, content-chat.php), then inside this div <div class="entry-content post_content">, add this code

      <?php if (is_archive()) {
                  echo surfarama_excerpt(100);
      } ?>

  7. Linda Eg says:

    Hi!
    Just love the way this theme looks, but I am getting an error message everytime i wish to click on a post or anything else for that matter… it says: The requested content cannot be loaded. Please try again later.
    Hope you have a fix for this.
    (I am trying this on my android tablet with google chrome and chrome for windows, both are having this issue.

    I am removing the theme from my site for now, because it’s not functionel, but would love to get it working.

    1. Charles says:

      Hi Linda, I don’t know what would cause that. It’s possible there is a clash with a plugin you are using, but I can’t be sure. Are you using a plugin for the translations?

  8. OLIVOY says:

    Hello there,
    I use the plugin cforms with surfarama theme.

    I would like to have the same style for forms made ??with cforms as the original forms from surfarama theme.
    but I can not do it, and I do not understand why.
    someone has an idea ? thx

    1. Kris says:

      There are plugins that we cannot override its style. Try to download Simple Custom CSS and in Appearance -> Custom CSS, add your css code.

      1. OLIVOY says:

        thank you for the info, I’ll try it now

  9. Anass says:

    Hey Charles;
    First of all thanks for the great support and quick response time. I want to do a hover effect on the posts in the homepage. But All i imanaged to do is change opacity. If you could help me out would be real cool bro.
    Thanks;
    PS: I did some trials that resulting in showing the hovering image but it was always shown below the featured image not on top! :/
    Anyways Thanks for your time.

    1. Kris says:

      Download Simple Custom CSS wordpress plugin and on Appearance -> Custom CSS, add this code,

      .grid-box-img img {
      width:110%!important;
      max-width:110%!important;
      -webkit-transition: all 1s ease;
      -moz-transition: all 1s ease;
      -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
      transition: all 1s ease;
      }
      .grid-box-img img:hover {
      width: 100%!important;
      }

      This is only a simple image hover effect.

      1. Michelle says:

        Thanks a lot!

  10. sarok says:

    Hi,

    after update my wordpress to 3.9.2 version my surfarama don’t work…
    http://conventagusti.com/maker/

    any idea?

    thx.

    sarok

    1. Charles says:

      Hi Sarok, I don’t know why that has happened. I suspect it is related to a plugin clash. I suggest you try disabling any plugins you are using and see if that ‘fixes’ the problem. If so you can isolated the offending plugin by enabling them one by one again until the problem reappears.

      1. sarok says:

        thx Charles, they work again… 🙂

        sarok

  11. Samara Citizen says:

    It’s a pity, cause I like your theme in general a lot.

    I tried a few themes last night and there was one (can’t remember which as I deleted them afterwards) which had a content-sidebar home page and full width single post by default (already in live preview).

    I don’t translate the theme. I translate the inscriptions that readers see (like “Leave a reply”, “Next”, “Comments are closed”, “Tagged”, etc.).

    As for deleting the “Bookmark this permalink”, just scan comments here and in wp.org support for your theme and you’ll see that this is one of the main issues with your theme. No one knows how to delete this piece for sure and without messing the files.

    One more idea. Why include “full width” tag in theme description and multiple full width templates if your theme actually doesn’t support full width (=no sidebar)?

    1. Charles says:

      Please understand I am not trying to be difficult. The theme simply doesn’t have a full width post template. You are welcome to create your own.

      The theme includes a full-width tag because it does have a full width template for static pages. Without some kind of plugin WordPress doesn’t support multiple template options for posts (to my knowledge).

      Did you use the default.po language file to translate the various theme elements? That should make things fairly easy.

      The solution proposed on the WP support forum for removing “Bookmark this permalink” seems to have worked for the folks in that thread and is marked as resolved https://wordpress.org/support/topic/bookmark-the-permalink – To be clear I don’t spend any time responding to queries on the WordPress forum myself simply because I don’t have time. I try to help here if possible, but this is not a day job and some requests are simply too indepth…I can’t provide customization support, for that I recommend Elto or Codeable.

  12. Samara Citizen says:

    Hi! Great theme, but I will probably have to look for another one due to several issues (that as I can see are the same for many users).

    1. Deleting that “Bookmark the permalink” thing causes disappearance of everything except the header.

    2. No way to set full width for single posts without sidebars (empty or not).

    3. In a lot of cases whenever I translate the inscriptions in some php files into Russian (those sen on the website by users, not any code itself) the same disappearance issue is frequent.

    4. I didn’t find the file where I can translate some inscriptions of the comment form (I translated them in some files, but they are still in English). That’s an issue of too many php files that probably substitute each other in a bizarre way instead of having fewer files with an easy way of customising the templates.

    5. I would love to hav the option of displaying site title and tagline to the right of the logo, not instead of it.

    Thanks,
    Andy

    1. Charles says:

      Hi, I think that you should probably go ahead and use another theme. To address your questions…

      • I have not heard of this issue, and indeed can’t imagine how that is possible. Are you sure you haven’t deleted other important code elements at the same time?
      • No, that’s right. There is no option for alternative post templates. That’s not a bug, that’s just how it is. If you can show me a link to a free theme that does offer this option I would be very interested to see how they do it.
      • I don’t understand what you mean here.
      • The theme uses a very popular and common framework so to suggest it is coded in some unusual way is itself rather unusual. Many users have successfully translated our themes into other languages so I don’t really understand the problem here. Have you translated the language files which control all the theme text?
      • This is of course possible, but will require some theme customization. I suggest you find a local WordPress developer to help you with this.

      All the best.

  13. duchu says:

    Hello

    I need to add custom buttons to you template. ACF is great option i this case, but dont know how to setup. Right now you can see that BG on button is set to blue, but i want to be the same like category where is button displayed.
    Can you help me ?

    1. Kris says:

      Do you mean you want to make the background overlay of the button be the same as the background of the title and excerpt?

  14. Tim S. says:

    Hi, I have a quick question that I have been struggling with for a bit. I am unable to remove the widgets from my site, despite checking and rechecking that there are none in any of the boxes on my WP dashboard. I’ve tried adding them, then deleting them but they never disappear. The widgets are Categories, Latest Posts, Recent Comments, and Archives. Any ideas on how to remove them?

    1. Charles says:

      Hi Tim, The theme shows those plugins by default. A dirty ‘hack’ to hide them is to add an empty text widget to the widget area, but to get rid of the widgets altogether you’ll need to edit the template code.

  15. paula says:

    Hi Charles, how are you? I would like to know if it is possible to open all the social media links in a different page? Because now if I click it will go to the social media and I lost my reader.
    Regards,

    1. Charles says:

      Hi Paula, this is possible but there is no setting for this. You’ll need to add a new target to the links in the functions.php file.

  16. Hi
    I’m experiencing a problem viewing my site developed with your template Surfarama. With Internet Explorer I see the main page on four columns while on Google Chrome and Mozilla Firefox I see the articles page on only three columns. (this also happens when I see your demo). How can solve? Thanks

    1. Kris says:

      May I know what is the version of your Internet explorer? This problem may occurs because of browser compatibility issues.

      1. I have IE 11 with Mozilla FF e Google Chrome updated to the last release. I want to explain that I see this site properly on IE on four columns, while on the other browsers I see the site incorrectly on three columns. This happens for a couple of weeks so I think is due to the updates of the browser

        1. Charles says:

          Hi Giovanni, I can not replicate the problem here. Your site works just fine in Chrome, FF and IE8-11 for me. Can you confirm that you still have this problem? Maybe test on another computer.

          1. Yes you are right. My website working fine on another computer. Well i will try to discover the issues. Thanks for your support

    2. TG says:

      I had the same problem. I fixed it by modifying the style.css file this way:

      #grid-wrap {
      position: relative;
      width: 980px; /* for IE8 */
      // width: 61.25rem;
      }

      As you can see, I only commented the 2nd width entry. Hope this helps.

  17. Suraj says:

    Hello, I have a question.

    Is it possible to have a different background image for each category page?

    1. Kris says:

      For this wordpress theme, it is not possible. The background image is set for all pages.

  18. Shafiq Aziz says:

    Love the theme, tried plenty and this almost instantly sticked with me. My question is how does the theme determined the order of posts on the homepage. Is it based on the latest published post? Is there anyway to manual set the order of the posts displayed? Thanks!

    1. Kris says:

      It is based on the latest published posts.

  19. I really like Surfarama. I like the layout of the home page and the fact that it is very customizable. I do wish I could change the color behind the post text, so that I can tile an image in the background, but still have a solid color under my posts, making them easier to read. Is there any possibility of getting this function? Is there something you could suggest I do?

    1. Kris says:

      Hello Christine,

      Sorry but I’m not really getting what you mean. But I think this involve css. If you want to change the color, you can go to customize under appearance in your wordpress admin or you can make your own custom css, you can download simple custom css and place your custom css there.

  20. Mark Driscoll says:

    GREAT theme, thanks very much!

    One question: is it possible to switch the hver color on the menu to match the custom category color, no matter what custom css i am trying, it still is the color set in the customization menu.

    1. Charles says:

      Hi Mark, good question. We did try (and failed) to do that when we first developed the theme, which is not to say it is impossible, just that we couldn’t figure out an elegant way of doing it and gave up eventually. Thanks for the prompt though, we might take another stab at it.

      1. Mark Driscoll says:

        Hurm…well back to trying the custom css then. Thanks!

  21. Jesús I. says:

    Hi Charles:

    First of all, I want to say you that I love your theme. Also I want to thank you for reply all the problems that people have when they try to personalize it.

    And this is mine:
    I configured the theme without any kind of widgets and when I publish a post, there is a blank space on the right, that i think is reserved to the widgets (what I haven’t).
    I can’t choose the ‘full-with, no-sidebar’ in a single entry as I can with the pages.
    How can I select the ‘full-with, no-sidebard’ class as default for all the single posts?

    Thanks, regards.

    1. Charles says:

      Hi Jesús, this is not possible sorry. Posts all share that same template with the sidebar.

  22. Anass says:

    Here is the link to my website: http://theplayer-blog.com/
    Please Can I do something about the author of the post and the date it was posted. I kinda wanna get rid of them but i couldn’t figure it out.
    Thank you for your fast response bro Have a nice day

    1. Charles says:

      Looks like you have figured out how to remove the author and post date.

  23. Anass says:

    Hey
    I m really digging your theme but i have couple problems. First of all, whenever i put a video on a post it has really weird dimensions 300*600 and when try to view it on fullscreen (from the video post”grid”) It only takes the upper half of the screen and show me a small part of the website on the lower half.
    Also I would love to remove the “was posted by” and “the date”
    thanks guys

    1. Charles says:

      Hi Anass, can you share a link? Also how are you embeddeding videos? It should all work pretty seemlessly if you just paste the URL of the video into your post (WordPress will do the rest).

  24. Eman says:

    I love your theme, but I can’t seem to have the tittle of my post show up on the homepage.

    I have the featured photo, then the homepage goes straight in the post.

    When a visitor clicks on the post, then the post and tittle comes up.

    How do I have the tittle of each post my my home page. Either on top of or below the featured image.

    1. Charles says:

      Hi Eman, what post type do you use? Use the regular post type and the title should show up.

  25. Marc says:

    Hi, yes I did and then the text I had written on the ‘home’ page would not appear…

    1. Charles says:

      Hmm, that’s unusual. I can’t think why that would happen. Have you made any customizations to templates or styles?

  26. Mamad del Rosario says:

    Hi Charles,

    Hi would I be able to change the color of the post when hovering, as well as turning the entire post clickable?

    Thanks!

    1. Charles says:

      Hi Mamad, you could control this hover behaviour by editing the style sheets, but that will require some customization and if you do that you must set up your theme as a child first as well. If you need help with this you could try Elto.

    2. Marc says:

      Hello Charles,

      I have currently installed the Surfarama theme and think it’s totally awesome. However I have two questions. First of all, I have chosen a static homepage rather then then blog page. Although I have added text to this page, it doesn’t show on the homepage. When I switch to twenty-thirteen it does show…
      Second I am wondering how I can resize the width of the logo on my page. It seems to be just a littlebit wider than anything else…

      Thanks in advance, keep ut the good work 🙂

      1. Charles says:

        Hi Marc, what template have you assigned to the home page? For the logo, the simplest thing would be to resize the image to fit the space.

        1. Marc says:

          Hello Charles, I see now. Thanks a billion! I used full width, no sidebar. Now I changed it to home page with intro and it does show the text, but also the blog posts. The other options also leaves my welcome message out. Is there the possibility to just have a normal page without widgets or sidebars or blogposts? Thanks!

          1. Charles says:

            Hi Marc, did you try the “full width, No sidebar” page template option?

  27. nicholas j says:

    I have a site set up, with all posts categorised.
    My menu just links to the category and displays any posts from it. However, I’m having trouble with displaying more than 5 categories in the menu.. It’s like whatever 6th category i create (i’ve tried editiing, deleteing, creating a new one, duplicating content from one that works) – it just messes up the menu bar and displays no posts.

    Any idea what this limitation is and how it can be solved at all?

    many thanks.
    great theme! (apart from my issue lol)

    1. Ryan S says:

      Hi @nicholas,

      Thanks for using our theme

      In WordPress there’s no limitation in adding WordPress Menu, so in that lets go with troubleshooting
      1. Do you have other plugin installed? if so disable it all then activated one by one and see if any has a conflict on the current theme
      2. Did you try other theme and it works in there? if so then it’s our theme(I just want to confirm)
      3. If both didn’t work then try re-installing your theme, just make sure you do a backup first

      Hope that helps

  28. olivoy le cowboy says:

    hello,

    sorry my english s…. but I try to understand the theme

    on the home page, I can see three columns, one with lastest 460px wide and 220px with 2 other
    if I try to change the css for 300px for 3, it does not work because there is apparently an absolute position triggered by a script (not in the css)
    I looked at the file. js (21-93) but without understanding …

    I watched archives.php page because there is 4 columns of 220px but I see nothing that would explain why there is 4 columns and 3 here on the home page and where the absolutes positions

    1. Ryan S says:

      Hi @olivoy,

      Thanks for using our theme

      It is done by Masonry so it positioned absolute, but if you wanted to changed the first Featured DIV or the bigger one yeah it’s possible, open style.css file and at line #1550 or .grid-box.featured:first-child, .grid-box.latest selector you can update the width in there.

      The masonry code is in /library/js/scripts.js

      Hope that helps

      1. olivoy says:

        merci, I’ll do a test

        1. OLIVOY says:

          yep is ok
          + change .grid-box.latest .entry-title and .grid-box.latest .entry-content and off course MEDIA QUERIES & DEVICE STYLES

  29. Stilgherrian says:

    A suggestion for a change.

    When I flipped the entire site at skank.com.au to use HTTPS, I got a browser warning about mixed secure and non-secure content. I traced it to style.cdd, where in lines 15 and 16 the fonts are imported from Google using HTTP.

    I manually changed that to HTTPS, but I believed that using this code will sort it:


    @import url(//fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,700);
    16 @import url(//fonts.googleapis.com/css?family=Open+Sans:800); 16 @import url(https://fonts.googleapis.com/css?family=Open+Sans:800);

    Cheers.

    1. Ryan S says:

      To avoid any security warning you can simply use // instead of https:// or http://

  30. harriet says:

    Hi

    What happens when you delete the surfarama theme? I’ve set up a ton of widgets and got the site looking just how I want, but for some reason the comments aren’t showing up when people comment. I probably messed up the code somehow.

    I think I need to uninstall and reinstall the theme but I’m nervous about losing all my work or it getting messed up.

    Do you know what happens when you delete and reinstall the theme? Or do you have the code to replace for the whole section where the comments go so I could just replace it? I can’t remember what I changed… rookie error.

    Thanks

    Harri

    1. Charles says:

      Hi Harriet, if you temporarily switch to another theme, delete Surfarama and reinstall, then activate it again all your settings and widgets should work as they did. You would however lose any template customizations you made. Alternatively you could just download the theme from WordPress, and replace the templates that seem to have the trouble.

Comments are closed.