you're reading:

Guide to Mixfolio

(to Jen, or Jen, or Jen, or Jen, who asked for this post)

Main characteristics of the theme:
• Posts displayed as a grid of images on the main posts page as well as on category and other archive pages.
• Unique “Welcome area” on homepage.
• Unique (tabbed/toggle) layout of some alternative post formats.
• Responsive width.

Theme intro:
Theme demo:

Mixfolio homepageThe default homepage

By default, the homepage displays your latest posts. (If you wish, you can set it to display a static page instead, and set another page as your posts page – both in Settings > Reading). Here’s a screenshot of the default homepage, with practically all the options on (click for full-size view):

The header

The header (black top section) includes the blog title and tagline, the primary menu (see below), and a search box.

The tagline is optional (you enter it or delete it in Settings > General). If you display a tagline, the menu will show below the blog title and the tagline. If you don’t display a tagline, and if the menu items are few and narrow enough, the menu will show next to the blog title.

The menus

The theme supports two horizontal menus, both optional.

The primary menu shows up in the black header area; this area shows on all the blog pages (main posts page, category and other archive pages, static pages, single post view).

The secondary menu shows up right above the grid of posts, on the main posts page only. It starts with the label “Recent Work”.

By default, the primary menu is on while the secondary is off, and the primary menu displays links to all your published parent pages (with dropdowns to child pages, if any). To change what the primary menu displays (including removing it) or to activate the secondary menu, you need to create a custom menu. For details see my post on custom menus.

The header image

The header image is optional. It is uploaded in Appearance > Header. Recommended width is 980 pixels (the width of the theme at its widest). If you upload a narrower image, it will be centered (as in the screenshot above).

If you upload more than one header image, you can select a random display.

The Welcome area

The Welcome area is an optional full width section, with four optional items: title, message, twitter, contact. It is controlled in Appearance > Theme Options.

The area will show up if you check the option “Display a welcome message at the top of your home page”. “Top” and “home page” aren’t exactly correct: the area shows up below the black header and the (optional) header image, and it shows up on the default home page, i.e. the main posts page (if you set a static page as your home page and another page as the posts page, the welcome area will show up on the latter).

If you enter your Twitter ID in the respective field, the Welcome area will display a “Follow” link, the Twitter icon, and your latest tweet.

If you check the option “Display contact information alongside your welcome message”, the Welcome area will display a large “Contact” tab; clicking the tab will reveal your contact info in a white popup window. If you enter your email address in the “Contact Details” field, it will be plain text; if you enter it in the “Contact Email Address”, it will automatically become a link to the visitor’s email application.

The Twitter section and the Contact tab take up the right side of the Welcome area (Contact below Twitter, if both are enabled), so they cannot be used without the Welcome area title or message. The opposite isn’t necessary: when Twitter and Contact aren’t enabled, the title and the message take up the whole area.

The “Welcome Area Message” field and the “Contact Details” field accept HTML and inline CSS, so you can modify the default styling of the text or include links (or even a small image). Some elementary HTML is required if you need line or paragraph breaks:

LINE<br />


The sidebar

Static pages and single posts display one sidebar (right side) – except on gallery, image and video format posts. The sidebar displays three default items (search, archives, meta); you replace them with the ones you prefer in Appearance > Widgets.

Dynamic pages (main posts page as well as category and other archive pages) don’t display the sidebar.

The sidebar can be removed on any static page, if you select the “full-width, no sidebar” template from the pulldown in the Page Attributes module of the page editor. For an already created page you can also access the same option if you go to Pages > All Pages and click Quick Edit under the page title.

In my opinion the sidebar starts too high in relation to the post or page title. You can adjust this if you add a titleless Text widget as your top widget, and paste this code in it:

<div style="height:-6px;"></div>

(To move things even lower, replace the negative number with a positive one).

The posts grid

Dynamic pages display posts as a grid of images. Each frame has fixed dimensions (297×198 pixels); images that have a different aspect ratio will be cropped to fit (middle part will show).

The theme displays three posts per row at its widest, two posts per row when narrower, so the best number of posts per page is a common multiple of 3 and 2 (six or twelve); the number is set in Settings > Reading.

For each post, the displayed image is the one you set as a featured image to that post, or the first image you upload from your computer to your blog via the Add Media tool of that post. You have to do the one or the other for each and every post, otherwise the page will display a black rectangle with the notice “FEATURED IMAGE MISSING”.

Featured images are set by clicking the respective tab in the Featured image module of the post editor. Their sole function is for the grid of posts: they don’t display on the single post view or on a static page (so the module in the page editor is useless).
Note: despite the rather misleading support doc on featured images, featured images in most themes including Mixfolio do not replace the regular header image.

When you first visit a dynamic page, only the images are displayed. When you hover over one of the images, the image gets blackened out, and you see the post title, the number of comments (except if commenting is disabled), the post date, and the post format symbol:

Post formats

As the above image shows, Mixfolio supports five alternative post formats (in addition to standard posts). You select one of these formats in the Format module of the post editor. For an already created post you can also do it by going to Posts > All Posts and clicking Quick Edit under the post title.

Three of these formats have an unusual layout and way of working. Users seem unable to figure out what to do to produce the intended result, especially with the gallery format, and often abandon hope of using these formats. (I visited more than 50 blogs that use Mixfolio: most of them don’t use the gallery or the image format at all, and a couple that do don’t use them as intended.) The theme intro page doesn’t help, as it says nothing other than this:
“Five Post Formats are supported by Mixfolio: image, gallery, link, quote, and video. Each post format’s single post view contains a unique style that nicely showcases its respective post format.”

Link format

Unless I’m missing something, the single post view is identical to a standard post: content left, sidebar right, comments below content, no difference in the styling of the content. So this format is of little use: you can select it if a post contains primarily or exclusively links and you wish to make it display the link format symbol on dynamic pages.

Quote format

The layout is identical to that of standard posts: content left, sidebar right, comments below content. But the styling of the text changes: plain text becomes larger, and each paragraph is decorated by a large quotation mark (bottom right of paragraph). So this format can be used only for quotations.

If you format the content as an actual blockquote, it will also become indented, with a lighter grey font color, and marked by a thin grey vertical line (left side).

The easy way to interpolate some text in a different style is to format it as a heading (heading 2 and heading 3 are bold and larger than the quote font size, heading 4 is bold but smaller, heading 5 and heading 6 are even smaller and not bold). For more radical changes you need to use inline CSS in the so-called Text (=code) editor.

Gallery format

Three tabs: Gallery, Gallery Info, Comments. No sidebar.

The gallery format is designed to automatically turn the uploaded images into a gallery, and highlight the gallery by displaying only the gallery when you visit the post (only the text when you click the Info tab, and only the comments when you click the Comments tab).

For this to happen, you enter the text into the editor the normal way, but you don’t create and insert a gallery as you would do in a standard post: you upload the images from your computer via the Add Media tool of the post without inserting them into the post. In other words: you click the Add Media tab and you don’t click Create Gallery, you click Upload Files; then you upload the images (by dragging & dropping all of them from your desktop or by clicking Select Files etc), and once they’ve been uploaded you close the media screen (by clicking the top right X button).

Note: this will result in a 3-column default type gallery; if you wish to display one of the other types (tiles, square tiles, circles or slideshow), or a different number of columns, you need a standard format post.

Image format

Three tabs: Image, Image Info, Comments. No sidebar.

Like the gallery format, the image format is designed to highlight a single image by displaying only the image when you visit the post (only the text when you click the Info tab, and only the comments when you click the Comments tab). To create the post, you enter the text into the editor the normal way, and you upload the image from your computer via the Add Media tool of the post without inserting it into the post.

Video format

Three tabs: Video, Video Info, Comments. No sidebar.

The video format presumably works like the gallery and image formats if you upload videos to your blog. I don’t have the VideoPress upgrade, which allows you to do this, so I cannot test it. Without this upgrade the video post format can only be used if you insert a video and no text at all (because in this case the text will show in the Video tab instead of the info tab).

Note 1: Gallery, image and video format posts don’t display the Comments tab if commenting has been disabled before any comments have been posted.
Note 2 (on an occasional misconception): alternative post formats are totally optional – you don’t have to use the image format in order to post an image, or the gallery format in order to post a gallery of images, etc.


30 thoughts on “Guide to Mixfolio

  1. Thank you, thank you, thank you for your entirely thorough guide to an exceptionally misunderstood theme. BRAVO! (And it’s a sign of my life right now that it took me 2 days to notice. And you can add another Jen to that list. :) )

    Posted by Jennifer | March 5, 2013, 22:27
  2. You’re welcome (x3) and thanks!
    You mean the gallerydemo Jen or another blog I’m not aware of?

    Posted by Panos | March 5, 2013, 22:50
  3. Forgot to say it didn’t take you two days to notice: I created the post on March 3 but added the images only, so I kept it private; I wrote the text and turned it to public today, forgetting to change the date.

    Posted by Panos | March 6, 2013, 00:19
  4. “Thank you, thank you, thank you”
    “You’re welcome (x3) and thanks!”

    Posted by Galois | March 6, 2013, 00:20
  5. I’m sorry it took me so long to clue into the fact this post existed. It is very much needed and will help others. Bookmarked!

    Posted by timethief | March 14, 2013, 20:52
  6. Thanks. But “sorry” and “so long”? It’s my latest post, and you know that I publish very infrequently. (I don’t really advertise my posts either: I only link to them when I see a relevant question in the forums.)

    Posted by Panos | March 16, 2013, 18:47
  7. How do I align my dynamic photos? My pics are either too small or frames the wrong part of the pic, ie. body instead of head of a person.

    Posted by VroNika! | April 9, 2013, 04:18
  8. You can’t adjust this. The frame has fixed dimensions, all images are cropped to fit these dimensions, and the cropping is designed so that the middle part of the image will show. If you don’t like this, the only thing you can do is edit a copy of the image in an image editing application so that it has the right dimensions (297×198 pixels) and it’s cropped the way you would prefer, and set that copy as the featured image of the post.

    Posted by Panos | April 9, 2013, 04:32
  9. Panos, Thank you very much for this guide!!! I am not at all experienced and this helps very much.
    However, I still have a question. Probably it is my inexperience, but I seem not to understand how I can get the post grid format on my category pages. So meaning if you click a category in the header. Which I now created as pages, I want my posts there (that I assigned that category) to all show as a grid directly when you click that category. Like most of the Mixfolio example pages have. How can I do this? Thank you very much in advance!

    Posted by Miesje Berkvens | April 10, 2013, 15:55
  10. You’re welcome. But your name links to your Facebook page. I can’t help without a link to your blog.

    Posted by Panos | April 11, 2013, 03:41
  11. hi panos, the site is:

    it still underconstruction (I just started, so it is not at all finished, but i am still trying to set up the pages /posts and structure), but I now put it online so that you can have a look. What I mean is that in the header you see three tabs, visie and contact are static pages, but under tab portfolio, (architecture, bouw and design) I would like to have the post grid format. So that when you visit those pages, you see the same lay out as on the homepage. How can I do this? Thank you!!!

    Posted by Miesje Berkvens | April 11, 2013, 11:14
  12. Hey Panos, thanks heaps for your help, appreciate it :-D

    Posted by VroNika! | April 11, 2013, 13:58
  13. @VRONIKA: You’re welcome.

    @MIESJE BERKVENS: Ah, so sorry, check point 1 here:

    Posted by Panos | April 11, 2013, 15:00
  14. O too bad, that is a pitty. I will try there. Thanks

    Posted by Miesje Berkvens | April 11, 2013, 16:07
  15. Hi Panos! Brilliant blog! You’ve helped me a lot with this. But I cant work out one thing – if you go to the – in the secondary menu – recent works and books etc etc. They are categories, do you know how I can create them? I can tag posts/photo’s yes but I want to category them and have those different categories in the second menu. Cheers! Marie

    Posted by Marie Van Driessche | April 18, 2013, 20:08
  16. Hi – Sorry forget it – I worked it out – thanks to your another blog about menu’s. Now – if I click on a category – the secondary menu disappears. Is there a way to keep it if I click on a category? Thanks

    Posted by Marie Van Driessche | April 18, 2013, 20:20
  17. 1) Yes, your first question isn’t theme dependent.
    2) As my post says, the primary menu shows up on all the blog pages but the secondary shows up on the main posts page only. So if you want your categories on all pages you need to set your custom menu to primary, not secondary.

    Posted by Panos | April 18, 2013, 21:31
  18. many many thanks! its as if my prayers were answered! Panos, am using this blog as if it were a web site to showcase the work in our lab so it has several pages. Is there a way to link one page to the other like i would if i were doing a regular webpage? Thanks once again!!!

    Posted by helgagomes | April 21, 2013, 18:19
  19. You’re welcome.
    But “link one page to the other” is vague: there are two types of pages, and a link can show in various places. So please be specific: display a link exactly where? and link to which page exactly?

    Posted by Panos | April 22, 2013, 02:42
  20. so if i have a main page A and then i make a subpage A1 – i would like the reader of page A be able to hit a link and go to page A1. Right now i only have subpages which can be accessed thro the drop down menu. In regular web pages you can have a link to a photo, an icon anything and that can lead you to another page. Hope I am clear this time.

    Posted by helgagomes | April 22, 2013, 06:04
  21. So you mean an image link in the content of a page. You have to create the image yourself, in the pixel dimensions you prefer, then upload it and insert it via the Add Media tool of the page editor, and make it link to the other page by selecting the “Custom URL” option; see this post of mine:

    Posted by Panos | April 23, 2013, 01:42
  22. Hi,
    Great guide! I was wondering if you know how to change the color of the “post comment” button and “search” button. They are blue by default and would love to change them into an orange color that matches my site… I can’t seem to find the answer anywhere…

    Posted by almihalcea | May 8, 2013, 16:59
  23. Sorry for the delayed reply: I was on vacation.
    The blog linked to your name is private, so I can’t check it to see if you have the Custom Design upgrade. If you don’t have the upgrade, you can’t change the colors. If you do have it, you post CSS editing questions in the CSS forum:

    Posted by Panos | May 12, 2013, 20:19
  24. Is there a way to only display sticky posts on the Mixfolio homepage?

    Posted by Gandini Juggling | June 11, 2013, 15:51
  25. No, and this isn’t theme dependent: no matter what the theme, the main posts page displays your latest posts, the number of posts is set in Settings > Reading and it cannot be zero, stickies show before the other posts on the main posts page, and they show in addition to the number of posts you’ve set. So the best you could have is display one or more stickies plus the latest post (if you set the number of posts per page to 1). It might be possible to hide the latest post via CSS editing. Do you have the Custom Design upgrade?

    Posted by Panos | June 13, 2013, 19:23
  26. Hi, thanks for the guide!

    I like the tabbed sections in the image posts but want the image to be a carousel and not a static one.

    Tried using the post tabs plugin to create the tabbed effect with the standard post format in Mixfolio and the caroufredsel plugin for the carousel effect.

    Works great but i don’t know how to get rid of the sidebar, because i want the full screen effect (similar to the image post format). Is there any way to get rid of the sidebar in the standard post format or to insert a carousel in the image post format?

    Posted by oddgull | June 16, 2013, 05:28
  27. Hi, ok noted. Thanks.

    Posted by oddgull | June 16, 2013, 12:36
  28. I’m wondering if there’s any way to create a post that is publicly visible via URL but *doesn’t* appear on the home post page. Any chance you know? Thanks!

    Posted by trashkozel | June 17, 2013, 21:13
  29. The main posts page displays your latest posts. Normally you cannot exclude a recent post from the main posts page except by backdating it. Since you have the Custom Design upgrade, then (in theory at least) you can remove a post via CSS editing: you can ask about this in the CSS forum. If this can’t be done neatly in Mixfolio, then the only thing you can do is publish the article as a page instead of a post.

    Posted by Panos | June 19, 2013, 06:38


author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.


  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: