WordPress.org

Ready to get started?Download WordPress

Forums

theme for multi-post blog (27 posts)

  1. uliuliuli
    Member
    Posted 2 months ago #

    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/. (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

  2. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  3. uliuliuli
    Member
    Posted 2 months ago #

    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!

  4. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  5. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  6. uliuliuli
    Member
    Posted 2 months ago #

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

  7. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  8. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  9. uliuliuli
    Member
    Posted 2 months ago #

    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 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?

  10. CrouchingBruin
    Member
    Posted 2 months ago #

    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?

  11. uliuliuli
    Member
    Posted 2 months ago #

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

  12. CrouchingBruin
    Member
    Posted 2 months ago #

    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...".

  13. uliuliuli
    Member
    Posted 2 months ago #

    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!

  14. CrouchingBruin
    Member
    Posted 2 months ago #

    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.

  15. uliuliuli
    Member
    Posted 2 months ago #

    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!

  16. CrouchingBruin
    Member
    Posted 2 months ago #

    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 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, which is a bit easier to understand..

  17. uliuliuli
    Member
    Posted 2 months ago #

    First of all, thanks for the hint on the pretty permalinks! I changed that.
    I did manage to get the background image to display, but I wasn't able to use the url like you described. I had to use the full http address - none of the prescribed placeholders: %tpldir%, %tplupldir% or %upldir% worked for the location. Any ideas why that would be?

  18. CrouchingBruin
    Member
    Posted 2 months ago #

    Not sure. You tried %upldir%/2014/06/header.jpg? The full URL is fine, although if you plan on migrating to another web site, you'll have to change the value, but no big deal.

  19. uliuliuli
    Member
    Posted 2 months ago #

    Thanks again and sorry for the delay! I'm having a visitor, so I'm a little distracted. I was sure I had tried all permutations, but when I just copied your suggestion it worked! Now I'm struggling with 2 more things:
    1. The white bar that covers part of the image in the banner area. How can I get rid of that?
    2. How can I get the height to adjust to the size of the image? I've tried all sorts of options, but only seem to be able to either have the full width of the image and parts of the height cut off, or have the height squeezed into the provided banner and have the image be tiny and only cover some part of the total width. I guess, in essence I want the banner to adjust to the image, rather than the other way around.

  20. CrouchingBruin
    Member
    Posted 2 months ago #

    1. The white bar that covers part of the image in the banner area. How can I get rid of that?

    That white bar is the navigation menu. Since you don't have any menu items, it's empty, but the space for it still appears. Three ways to handle it: you can either make it transparent so the image behind shows through (in case you are thinking about having a menu in the future), you can hide it from view, or you can remove it from the header.php subtemplate.

    To make the menu transparent, add this CSS:

    #menu1-wrapper {
       background: transparent;
    }

    To hide it, add this CSS:

    #menu1-wrapper {
       display: none;
    }

    If you remove the section for wp_nav_menu from the header.php sub template, then you can change the class for logo-area from col5 to col12 so that the logo-area (which contains the site title) will stretch across the entire width of the header.

    2. How can I get the height to adjust to the size of the image?

    You will have to insert an image element into the header instead of setting the background of banner-bg. I created a tutorial here. Let me know when you're done examining and implementing this, because afterwards I want to move it into the BytesForAll Gold Forum (for users who make a donation to the theme). BytesForAll is the developer of the Montezuma theme.

  21. uliuliuli
    Member
    Posted 2 months ago #

    Great - I used your tutorial - again with great success! Thank you once more. I saw that you used my photo for the test page. Do you intend to use it for your tutorial?
    I have one more question, if I may. It seems that the most recent post headline becomes the headline for the blog. I'm not sure, if I like that... If I just remove the DIV that it's in, would that take are of the problem? Or am I inviting other issues with that approach? I guess I would want to remove the bookmark link that's being created, but I haven't been able to figure out, how to do that.
    I'll find the donation button when I'm done with this job :)
    Thank you very much for all your help!

  22. CrouchingBruin
    Member
    Posted 2 months ago #

    I don't intend to use that image in the tutorial, I just used it so you could see how it would work with your own site.

    You should be able to remove this section, which outputs the post/page title, from the template without any problem, but I would leave the rest of the DIV intact, in case you want to add any text later using the page editor:

    <h1>
       <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a>
       <?php bfa_comments_number(); ?>
    </h1>

    Glad you like the theme. I think the more you work with it, and the more you find out what you can do with it, the more you'll like it.

  23. uliuliuli
    Member
    Posted 2 months ago #

    Thank you, thank you, thank you! I'll respond in more detail tomorrow. I had more visitors come and go - my head's spinning... :)

  24. uliuliuli
    Member
    Posted 2 months ago #

    Here it is now: the blog that all this was meant for: berlin-brooklyn.com. The other one was just a test site I set up to practice on - though for possible later use. As you can see, I changed everything to red (#b00b0b) - including all the icons. I'd be happy to share those files with you, if you're interested in a red Montezuma version.
    I had to ask about the photo - I never got permission from the artist(s), so I couldn't just let you use it for commercial purposes. I'd be happy to let you use another photo of mine though as a little thank you gift!
    Also, I did donate - because: yes, I do like the theme! And because I was so impressed with your generosity of support and advice!
    Thank you very, very much!
    uliuliuli

  25. uliuliuli
    Member
    Posted 3 weeks ago #

    Hello again,
    I hope you can help me with this big, new problem! The person who I had created the blog for asked me to get rid of the dates or move them to the right. I found the code for it, commented it out and it worked. But when I looked into the css to see if I could float them to the right, I couldn't save my changes. The error message I got was that the database seemed to have no capacity or was otherwise not reachable at the moment. When it finally was and I hit save, I checked the page: every change I had ever made had disappeared! No more 2 columns, the dates are back, etc. etc. All the changes I had made to the virtual structure were gone. The only thing that's left are the color changes I had made directly into the existing (not various.css) css files.
    So I went ahead and implemented all the changes again, thinking I must have hit a reset button somewhere by accident. A few days later, the same thing happened all over again!
    I called the host company, but they couldn't help with the database issue.
    The only other thing I should add is that the database already housed a wordpress blog. I made sure there was no confusion by adding BB to the prefix. Do you think that could be the problem? I could create a new database, but before I put in hours and hours of work again, just to find out that nothing "sticks", I wanted to see if you had some insight.
    The testblog I did, BTW, does not show the same problem, and the only difference between the two is that the test blog does not share a database.
    I really hope you can help once again with this vexing problem!
    Thanks in advance - I truly appreciate all the help you have given so far!
    uliuliuli

  26. CrouchingBruin
    Member
    Posted 3 weeks ago #

    Unfortunately I don't know what the problem might be that would reset your Montezuma options. You can save yourself a lot of aggravation, however, by saving your Montezuma settings to an external file so if something goes wrong, you can restore the settings very easily.

    Go to Appearance > Montezuma Options > Export Import > Export Settings. You can copy the contents of the Current Montezuma Settings field to a text editor and save it, and if you need to restore those settings, just paste them into the Import Settings field.

    Since your test site is very similar to your production site, what you can try doing to save yourself some time is copying the Montezuma settings from the test site into your Production site, and then make any specific changes like file names.

  27. uliuliuli
    Member
    Posted 3 weeks ago #

    Thank you very much as always! Your quick and detailed response is very much appreciated!

    I did download the settings as you described, so I won't I have to redo the site yet again. Good to know this option exists – I will keep it in mind for future sites. However, I'm worried that the incompatibility with the database could also affect the blog entries in the long run. Curiously, I have not been able to recreate the problem to take down the exact wording of the error message.

    Thanks – all the best,
    uliuliuli

Reply

You must log in to post.

About this Topic