theme for multi-post blog

The way that I would do it is to create a static page, and use a plugin like xili Post in Post to display posts from two different categories. I’d assign one of two categories to my posts, like Left and Right, or Red and Blue. Then I’d insert a shortcode from Post In Post inside a DIV that had a width of 50% that displayed posts from one category, then another DIV, again with a width of 50%, that used another Post In Post shortcode that displayed posts from the other category. Then you could use just about any theme.

The only problem would be how to handle pagination. That is, let’s say you wanted to display, at most, 10 posts from either category on a page. What would happen if you had 15 posts from one category and just three from the other. Would you want to be able to paginate to the next page and see just the next five posts from the one category with a blank column for the other category? What you could do is have a link at the bottom of each column which takes the user to a regular category page that displayed only posts from that category.

Very cool – thank you so far! I got the post in post plugin, created and assigned the categories, created a static page. Now I’m wondering how to create the shortcodes and how/where to add the DIV. I have created many websites with html and css, but am not so familiar with wordpress. My inclination would be to open Dreamweaver and edit the files that way…
Again, any help would be greatly appreciated!

If you go to the settings page (Settings > xili Post in Post), you will see all of the options you can use to call the plugin. It looks like you don’t even have to create separate DIVs, because you can set the beforeall parameter on the shortcode to add the DIV and classname to each section.

So you open up the static page in your editor, then insert something like this (make sure you are using the Text editor and not the Visual editor):

[xilipostinpost query="cat=26" showposts=20 beforeall="<div class='half_width'>" afterall="</div>"][xilipostinpost query="cat=4" showposts=20 beforeall="<div class='half_width'>" afterall="</div>"]

The plugin’s shortcode is what is demarcated by the square brackets. It’s important to keep the shortcodes on the same line (i.e., don’t insert a line break), or else WordPress will insert a paragraph between them when the page is displayed and they won’t line up correctly at the top.

The example above would display up to 20 posts from category 26 (if you edit your category, you can see the category ID number, or Tag ID, in the browser address bar) inside a DIV with the class half_width, and up to another 20 posts from category 4 in another DIV with the same class.

In your custom CSS, you would create a rule that looked something like:

.half_width {
   width: 50%;
   display: inline-block;
   float: left;
}

You’ll probably want to add some other styling, like borders and margins/padding, with some more CSS, but that should get you started.

You know, since you are comfortable writing HTML & CSS, I should also mention a theme called Montezuma. The theme is different from most other themes in that instead of providing just a limited set of options, you alter the content and appearance by making changes to virtual templates and virtual CSS files. It provides a lot of flexibility in terms of customizing the look of a site; I consider it to be the most customizable theme out there, and I use it on the sites that I put together & maintain.

I’ve put together a demo page of two side-by-side category posts here. If you want to give Montezuma a try, install the theme and I can guide you through the initial process.

Alright: done! The Montezuma theme is loaded. Thanks for the sample page: exactly what I need.
Ready when you are…

Sorry I didn’t respond right away. I spent six hours driving up to Santa Cruz to move my daughter out of her dorm, so I’m a little beat, and I’ll be a little brief, now, with a fuller explanation later.

What you should do is look at the documentation under Appearance > Montezuma Options > Main Templates, because you will be creating a Custom Page Template. If you look at the different templates, index.php is the one that’s used by WordPress if a blog page is to be displayed, single.php is used to display the contents of a single post, and page.php is used to display the contents of a page.

What I did was to create a new main template (+Add main template) called page-2-categories, making a copy of page.php. I then added some code that does a custom query by calling bfa_custom_query(). Take a look at the code for page-2-categories.php here, and compare it to the default page.php. The code that I added is in red. You’ll see that the only change I made was to add the two DIVs that holds the call to bfa_custom_query. You can see all of the different PHP functions which are available to you by clicking the Limited PHP Code tab in the upper right corner of the template editor. I also added an enclosing DIV with a class of two-categories because I like making my CSS a bit more specific.

Speaking of which, the CSS which I used to separate the two DIVs is at the bottom of that page. In Montezuma, you generally add new CSS at the end of the various.css virtual CSS file, since it comes towards the end.

OK, I forgot to add how to apply the template to a page.

Go into your page editor to edit your static page. If you scroll down on the right, you’ll see a section called Virtual Template. From the drop-down, you should be able to see the custom template that you just created. Select it and click the Update button.

Some other notes:
One other difference that you will see between the custom template that I created and the default page template is I took out this code which creates the sidebar so that there would be more room for the blog entries:

<div id="widgetarea-one" class="col4">
   <?php dynamic_sidebar( 'Widget Area ONE' ); ?>
</div>

One of the strengths of Montezuma is that it allows you to create widget areas wherever you need/want. The default setup for the theme has a widget area in a right sidebar, but you can create a widget area in the header, footer, create a sidebar on the left, etc. Another advantage of the theme is that you can create virtual templates like this one, so if you have a page where you don’t need a sidebar because you need more space for the content, you can create a custom template just for that page (or similar pages).

Note also that the widget area that was taken out had a class assigned to it of col4. Montezuma’s responsiveness is based on a 12-column grid system. The entire width of the content area is divided up into 12 columns. For a 960px layout, a column is therefore 80px wide (960px/12). You can read about it in Appearance > Montezuma Options > CSS Settings, but the important thing to remember is that when laying out the elements that go across in a “row”, the column classes should add up to 12 for the responsiveness to work correctly. In the default page template (as well as the index and single templates), the content area has a class of col8, which would be 640px wide, while the sidebar has a class assigned to it of col4, which would make it 320px wide. So if you wanted to adjust the width of different areas on the page, you do it by assigning different class names in the format col#, making sure that the elements in a row add up to 12.

So because I took out the sidebar, which had a class of col4, I changed the class of the content area from col8 to col12.

Awesome! I was just going to write back that I got everything to work; see my test page here: https://www.posimistisch.net/?page_id=16 when I noticed you’d written again. I had found the virtual template assignment option, I changed the 8 to 12, just because it was red, but now I know why – great!
My only problem now is that my visitors are still going to the index page first, rather than going to the newly created 2 column page right away. How can I fix that? Can I just copy what’s in the DIV <div id=”content”> and place that into the index page?

Make a new main template called front-page by copying the template that you just created. If a template called front-page.php is present, it will be used for your home page. Or, go to Settings > Reading from the admin dashboard, select static page, and choose the page that you want to be your home page.

One other thing that I’ve noticed is that all of your pages, like your single blog posts as well as your other pages (like My new blog page), show the blog excerpts at the bottom. Was that your intention?

No! I hadn’t even noticed that. Thanks for pointing it out. How can I get rid of that?

Did you create a new custom template, or did you edit page.php, post.php, and index.php? Not sure exactly why you are getting the double blog at the bottom of all your pages, that shouldn’t happen if you’re just setting the one static page to use the custom template and all of the others are set to use “Best match…”.

If I remember correctly, I went on the Montezuma Options page and added a main template, then selected it and copied the code you provided into it.
I retraced the steps I took in my mind, and remembered that I had assigned that new template to the posts when I first tried to figure out how it all worked. I just took out that assignment and now the single pages display as they should.
Now just a bit of styling and I should be all set! You said that should be done in the various.css stylesheet, right? Or did that refer only to the additional elements?
Thank you again for all your help!

OK, great, I was a little worried.

There are a couple of different ways that people make changes to the CSS. One way, possibly the most common, is to hunt down the CSS rule for the element that you are styling and make the modification in the specific virtual CSS file. For example, let’s say I wanted to change the font size and font weight of the tag line (the descriptive phrase that appears below the site title in the header). I could hunt through the CSS files until I found this rule in the content.css virtual file:

#tagline {
   font-family:       'Yanone Kaffeesatz', sans-serif;
   font-weight:       200;
   font-size:         26px;
   letter-spacing:    0px;
   color:             #4f4f4f;
   margin:            0 auto 20px auto;
}

I could change the value for font-weight and font-size there, and everything would be great.

A second way to work with the CSS is to create a rule with an identical selector, and include just the properties that you want to change. For example, I could add this rule to the end of various.css:

#tagline {
   font-weight:       400;
   font-size:         32px;
}

You may remember that in cases where there are CSS rules with identical selectors, the properties for the rule which comes later (last) will be used over identical properties in earlier rule(s). Since various.css will be loaded after all of the other CSS files (except for clearfix.css), the font-weight and font-size properties of my new rule will override the same properties from the rule in content.css.

One of the advantages to using the latter technique is that you don’t have to go hunting around in all of the different CSS files to find the rule that you need to change. Just use a web debugging tool like Firebug or Chrome Developer Tools to find what rules affect a particular element, then write an overriding rule with matching selectors. Another advantage to the technique is that all of the changes that you make will be grouped together, so you can easily see them.

Great! I starting changing some of the colors from blue to red. I did use the various.css, so the original css file will stay untouched. One thing I couldn’t really figure quickly – I’m sure it’s in the documentation… How do you insert an image into the blog? I would like to put a banner type image into the header. I would appreciate your help once again! If not, I’m sure I couldn’t figure it out somehow. But if it’s not too much trouble, that’d be great!

Thank you so much!

If you want to set the background of the header to a particular image, you can do it by setting the background-image property of either the banner-bg DIV, which stretches across the whole page width, or the banner DIV, which just goes across the content width:

#banner-bg {
   background-image: url('/images/header.jpg');
   background-size: cover;
   background-repeat: no-repeat;
}

You want to check out all of the different background properties, particularly background-size so the image is sized and positioned properly.

Just as another note, and this is a WordPress related feature rather than a theme related one, you probably want to set something called “pretty permalinks.” That is, if you view the post page for The red house, you’ll see the address is https://www.posimistisch.net/?p=5. Go to Settings > Permalinks and change it to anything other than the default. If you pick Date and Name, for example, then the address would look like https://www.posimistisch.net/2014/06/12/the-red-house, which is a bit easier to understand..