Visual Theme

visual-header

Visual is a free theme designed to showcase photography, artwork and images in a neat masonry grid layout.

visual-theme

Standard Features

  • Masonry layout: Regardless of the featured image height and width (or even if no image is selected) the posts will look great in a nice dynamic grid.
  • Responsive Layout: Visual looks great on small screens, such as tablets and smartphones, as well as on laptops and desktops.
  • Typography: Uses Raleway, a beautiful webfont by Matt McInerney and served by Google Fonts
  • Icon Font: Pixel dense retina displays look great with this theme because of the icon gylphs from Entypo, by Daniel Bruce.
  • Solid code: Visual is built off of the Underscores starter theme and uses WordPress best practices.

Premium Features

If you’d like additional font options, color palettes, infinite scroll, or lightboxes- see Visual+. Purchases also help support the work that goes into the free version.

How to Use the Theme

  • Download the theme and activate
  • Set your menu in WordPress (under “Appearance” > “Menus”)
  • If images don’t show up by default, you may need to set the featured image. Edit your post and click “Set featured image”.
  • If you are making changes to the CSS or template files, consider using a child theme. You can download this one to start with.

If you’d like to display excerpts on the home page rather than full text, you can either use the more button or select the “excerpt” option in the theme customizer.

WordPress.com Users

A version of Visual has been built for WordPress.com. You can get it for free here. If you’re using Visual on WordPress.com you won’t be able to alter the template code or use third-party plugins, but you can still make some css changes with custom design upgrade. If you need support for Visual on WordPress.com, you’ll need to contact their support team as they run a slightly customized version of the theme.

Theme Demo

View the Demo

Get the Theme

Download from WordPress.org

Upgrade

For additional options, features, and support, check out Visual+. Purchases help to support both the free and paid versions. Read more.

181 Responses

  1. The static page isn’t working at all. No matter what setting I put on. I created a Home button that navigates to the Portfolio page otherwise my “Home” page doesn’t display my portfolio.

  2. I have figured out why my “Home” page is not displaying our portfolio. When I was using your Portfolio Press Theme I could set the “Full Width Portfolio” or “Portfolio”. When I switch over to your Visual Theme I don’t get that option. Your help in this matter would be greatly appreciated.

  3. Sarah

    Lovely theme – works great for my husband’s professional website.

    I did notice that if you enable Disqus comments, it doubles the comment count (so, for instance, it says “0 comments 0 comments”). It took me a bit to figure it out, but it looks it’s doing so because of the way you have the comment and comment icon listed; when I commented out the comment icon line, it now displays correctly.

  4. It would be good to have the same styling for widget title/content as the actual blog content. At the moment, the widget area seems to be missing entry-header/entry-content elements. This has resulted in widget areas to look different than the actual blog post content areas.

    Can you please add a fix to this.

      1. The widget area doesnot have entry content dic and that is why the top border is missing. The header has bittom border but the content is missing top border. If you compare widget area and blog entry area you will notice the difference.

  5. Hey,
    i got the problem that the uploaded picture of my new post and some pics of the post before arenĀ“t showed, so just the name of the pic is indicated. But the pics were successfully uploaded. Some pieces of advice for me?
    Thanks
    JL

  6. Juissi

    I’m using the Visual theme on a different language (not english) and noticed a couple places where the translations don’t work.

    Like on the blog page it says:
    Posted on 1.9.2013

    And on the post page it says:
    Posted on 1.9.2013 by Username

    This entry was posted in CategoryName. Bookmark the permalink.

    I didn’t find a way to edit or remove these texts.
    Also the Search box is not translated, but I guess that can be removed.

    Everything seems to be translated correctly and the theme is awesome!

  7. When I updated to 0.9 the “dark” option for the theme stopped working. Now no matter what setting I have it on (dark, light, minimal) it just displays as light. Any suggestions?

  8. Hello Devin,
    – I have updated wordpress and Visual Theme, but still having problem with “masonry layout” – individual items (shorten posts) are not displayed properly, there are irregular empty spaces among them. I have made some changes in the theme, but not so big. Would you have any idea what is the problem, how could I fix it?
    – Would like to add information about category into “entry-meta”. I.e. there would be “Posted on.. by.. in .(categories).. Which text shall I write and into which file (and in which space in the file)?
    Thanx for reply.

  9. Hello Devin!

    I need to do some customizations, but my website is hosted in wordpress.com
    – How do Y remove the meta ‘posted by’ and date on postes?
    – How do y custom the footer? On footer by default, i have “Blog no WordPress.com. | The Visual Theme.”

    tks?

  10. Hi Devin.
    I’d really need your help on this issue. I’m a graphic designer and I like your theme a lot. For my work I use 24” monitor. Based on your theme I created a background and here come the problem. The bigger monitors display the frontage perfectly but as I noticed on my client notebook which has 15” my background is completely cut off. I’d appreciate if you check my page and experience what I’m talking about, It’s really awkward situation for me. Thanx for your answers.

  11. joe

    Thx for sharing theme.

    Can you tell me how to change to 4 columns no margins inbetween.

    I have 4 posts at 312px each total 1248px.

    I’ve tried changing widths and margins in css but I think its controlled by columnWidths in jquery.masonry.min.js. Tried playing with that but don’t really know my way around jquery yet.

  12. Hi Devin,

    I use your theme in my blog. I would like to know the name of the font used in the theme as well as the HTML colour number. I am printing some flyers of my blog and would like them to be coherent with the blog.

    On a separate track, I have a videos section. Is it possible to post the videos I have in the size that they actually appear but on separate posts. Until now I have only been able to include all of them in one post.

    Thanks for your help,

    Julian

  13. G’day Devin.

    This theme is babin’, thank you.

    I’d like to use the page layout ‘Full Width, No Sidebar’ across all posts and pages. Could you please tell me how might I go about that?

    Thanks again, I’m looking forward to using this theme.

      1. Stuart Chater

        Thanks for getting back to me Devin.

        I’ve had a go at trying to edit the CSS. I’ve successfully removed the sidebar, but the “primary” div remains the same width.

        I can tell that you’re theme is quite technical, usually I can figure out how to tamper with most themes haha.

        I was hoping there might be a simple way to impose the Full Width template on posts as well. Any help appreciated. Also if I end up using this theme I’d happily donate if there’s a place to do so?

  14. Hi Devin, Thank you for the wonderful there.
    I am on Portfolio Press and all my featured images look very pixelated, although I am doing the correct downsampling in Photoshop they look bad. I am on a retina display and tried saving them as 314×224 and also tried saving as 628×448.
    Thank you

  15. Hi there! im using this theme that by the way is pretty cool! i love the simplicity in how the posts page are displayed. I’m writing because i’m stuck in something that might just be pretty easy to solve, but where else is better to ask than here. I want my front page to be the one i created in “Pages/New Page”, where in my case i input my bio and such, so that after reading that, you can click somewhere where you can see the stacked up squared posts. (i have set “Front page displays: A static page”)
    Now, when i’m reading this front page, i can’t find a way to click HOME and just go to the post page. Did i make my point?
    Thanks in advance!
    Lovely theme!

  16. thom

    Hi Devin –
    In trying out Visual prior to purchasing Visual+, I have run across an issue when posting Tweets as posts. WordPress 3.8.1 uses the tweet url to expand the tweet into a full valid post, but on Visual, these posts are covered over by other posts. Almost like the other posts disregard the space taken up by the tweet.
    I suspect a conflict between the masonry javascript and the javascript Twitter uses, but not totally sure.
    Have you seen anything like this and have any idea how to get around it?
    Thanks!

  17. Hi,
    I’m trying to show a three level in main menu, but i can’t. I found this lines in style.css:

    /* Three level menus aren’t really supported */
    .main-navigation ul ul ul {
    display: none;
    position: absolute;
    float: left;
    border-left: none;
    border-right: none;
    top: 50px;
    left: 100px;
    width: 190px;
    }
    And in the source code there aren’t the tag of my third level of the list
    Is this possible? What I have to add / change?

    Thank you ver much!
    Carlos.

  18. Paul

    I am trying to get links from the homepage to link to “blog posts” rather than straight to the image itself. Any ideas how to alter this?

  19. matt

    Hi Devin. I’d like to switch to using your theme for my photoblog which uses YAPB but I’m currently struggling a little to hook in the yapb hooks for thumbnails and main images. Where is the best place to do this?

    I’m currently using the following with another theme at the moment:

    <a href="”>
    ”,
    ‘rel’ => ”
    ),
    ”,
    array(‘w=900′, ‘q=97′), // phpThumb configuration parameters
    ” // image tag custom css class
    );
    ?>

    <?php yapb_exif( "exiftag", ":", "“, ““, ““, “” ); ?>

    Thanks,
    — Matt

    1. matt

      All sorted. The correct syntax helps… Some small tweaks in content and content-single and we’re good to go. Sorry for the noise. Lovely theme.

  20. Hi Devin, I’m just starting out with WordPress and I’ve used the Visual theme. I’d like to add some copyright text to a footer at the bottom of each page and post. I’ve come across lots of websites that describe how to do this but I can’t navigate my way to find the right sections. Please could you walk me through how to do this? Thank you

      1. Thanks. I’ll keep looking but so far all I have is ‘colour’, ‘fonts’, ‘header’, ‘menus’, ‘front’, ‘site title’ and ‘CSS’. I’ve looked in each and can’t see any reference to footer.

  21. Hi Devin, I have another question! My background colour is black but beneath each post the ‘comment’ and ‘previous post/ next post’ are grey text on white background which is hard to read. Can you help me change them to white text on black like the rest of the post? Many thanks

  22. Que42

    Hi, Love the theme. Looks good and not to heavy on the code. Would like to tweak it to make the images on the front page grid like to the post instead of the image. I’m not to knowledgeable on code but narrowed it down to this in content.php.

    <?php the_content( __( 'Read More →’, ‘visual’ ) ); ?>
    ”, ‘after’ => ”, ‘link_before’ => ”, ‘link_after’ => ” ) ); ?>

    I’m assuming I need to replace some of this with something like this

    <a href="”>THUMBNAIL URL

    But don’t have the know how to accomplish it. Any help would be mucho appreciated.

    Thanks
    Que42

  23. Hi Devin,
    I am a new blogger and fell in love with this theme after trying out many combinations. However, I have a couple of queries that I would like to highlight to check where I am going wrong.
    1) The theme takes longer time to load.
    2) On the home page, is there an option for viewers to like and share the post?

Leave a Reply

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>