Title: theme for multi-post blog Last modified: August 21, 2016 --- # theme for multi-post blog * [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/) * Hi, I’m looking for a 2-column theme that I can use for a multi-post blog. The idea is a kind of a “tale of two cities” blog, where the two places are juxtaposed in a left and a right column. Hereby it’s crucial that they are of the same size and can be “fed” independently. For example, the left side might receive 3 new posts, whereas the right side shows no new developments during that time. An example would be: [http://station-station.com/](http://station-station.com/).( I do not want to use their theme, because it is obsolete.) Does anyone have a good idea which theme I can use? Or which theme can be easily edited to achieve this set-up? I’d appreciate any ideas! Thanks, uliuliuli Viewing 15 replies - 1 through 15 (of 26 total) 1 [2](https://wordpress.org/support/topic/theme-for-multi-post-blog/page/2/?output_format=md) [→](https://wordpress.org/support/topic/theme-for-multi-post-blog/page/2/?output_format=md) * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997295) * The way that I would do it is to create a static page, and use a plugin like [xili Post in Post](http://wordpress.org/plugins/xili-postinpost/) 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. * Thread Starter [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997377) * 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! * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997401) * 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="
" afterall="
"][xilipostinpost query="cat=4" showposts=20 beforeall="
" afterall="
"] ``` * 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. * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997417) * You know, since you are comfortable writing HTML & CSS, I should also mention a theme called [Montezuma](http://wordpress.org/themes/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](http://montezuma.inrgee.com/two-categories-blog-page/). If you want to give Montezuma a try, install the theme and I can guide you through the initial process. * Thread Starter [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997437) * Alright: done! The Montezuma theme is loaded. Thanks for the sample page: exactly what I need. Ready when you are… * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997476) * 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](http://montezuma.inrgee.com/two-categories-blog-page/two-categories-code/), 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. * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997491) * 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: * ```
``` * 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**. * Thread Starter [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997493) * Awesome! I was just going to write back that I got everything to work; see my test page here: [http://www.posimistisch.net/?page_id=16](http://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
and place that into the index page? * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997494) * 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](http://www.posimistisch.net/?page_id=16) page), show the blog excerpts at the bottom. Was that your intention? * Thread Starter [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997498) * No! I hadn’t even noticed that. Thanks for pointing it out. How can I get rid of that? * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997507) * 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…”. * Thread Starter [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997511) * 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! * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997512) * 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](http://www.htmldog.com/guides/css/intermediate/specificity/), 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](http://getfirebug.com/) or [Chrome Developer Tools](https://developers.google.com/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. * Thread Starter [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * (@uliuliuli) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997516) * 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! * [CrouchingBruin](https://wordpress.org/support/users/crouchingbruin/) * (@crouchingbruin) * [12 years, 2 months ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/#post-4997518) * If you want to set the background of the header to a particular image, you can do it by setting the [background-image](http://www.w3schools.com/cssref/pr_background-image.asp) 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](http://www.w3schools.com/cssref/css3_pr_background.asp), particularly [background-size](http://www.w3schools.com/cssref/css3_pr_background-size.asp) 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](http://www.posimistisch.net/?p=5), you’ll see the address is **[http://www.posimistisch.net/?p=5](http://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 ** [http://www.posimistisch.net/2014/06/12/the-red-house](http://www.posimistisch.net/2014/06/12/the-red-house)**, which is a bit easier to understand.. Viewing 15 replies - 1 through 15 (of 26 total) 1 [2](https://wordpress.org/support/topic/theme-for-multi-post-blog/page/2/?output_format=md) [→](https://wordpress.org/support/topic/theme-for-multi-post-blog/page/2/?output_format=md) The topic ‘theme for multi-post blog’ is closed to new replies. ## Tags * [theme ideas](https://wordpress.org/support/topic-tag/theme-ideas/) * [two columns](https://wordpress.org/support/topic-tag/two-columns/) * 26 replies * 2 participants * Last reply from: [uliuliuli](https://wordpress.org/support/users/uliuliuli/) * Last activity: [12 years ago](https://wordpress.org/support/topic/theme-for-multi-post-blog/page/2/#post-4997658) * Status: not resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics