Split single content column to 2 columns in Twenty Ten
-
Hi there,
Does anyone know how to split the defaulted single content column in Twenty Ten into 2 columns, which means having 2 posts placed side by side on the Home page as well as its sub-pages just like this website as reference, http://www.beautytalk.com.hk/. Many thanks.
-
It is quite easy to do, try this Tutorial, and add a height style to give the even look.
The files can be downloaded, you would need to add some code to your theme.
David
Hi David,
Thanks for your info.
I’m not sure if I’m following correctly as I’ve tried to follow the steps in the website but doesn’t show any effect on my home page. I’m not good in coding stuff at all but the following is what I’ve done:1) Copy and paste the style sheet part as shown in the website to my Twenty Ten Child theme style sheet.
2) Create a new php file named after loop-columns.php and paste all the attached code in the website to the file.
Please let me know which part have I done wrong. Many thanks.
Not at home so this is from memory.
Copy index.php to the child theme folder.
Find:
<php get_template_part('loop','index'); ?>Change to:
<php get_template_part('loop','columns'); ?>HTH
David
Hi David,
Seems like I’m getting closer as the change from “index” to “columns” did actually split the content into 2 without excerpt and thumbnail. However, as I’m using excerpt and standard thumbnail for my posts in the content, I would like to have them back after the split. For your information, I’m using the plugin, Thumbnail For Exceprt.
Could you please guide me through of how to go about this? Many thanks.
Regards,
StuartThe file has conditional code for the standard post_image(), “Featured Image”, I do not know how the Plugin Works, so I cannot really help with that.
The lop file outputs the thumbnail and Excerpt, or the excerpt only if no thumbnail exists, so I do not know how you are getting a full post.
Did you create your own loop-columns.php or use the one in the download?
I am out at the moment so cannot look at anything, just working from memory!
David
Hi David,
Thanks for your reply. I have resolved the excerpt and thumbnail issues already.
My only issue right now is the default twenty ten navigator (nav-below), which is supposed to be at the bottom left has now gone 2 rows UP to the most RIGHT of the content (not container). This has affected my alignment between post on the left and post on the right in my last 2 rows as they are not parked side by side. For your information, I have 5 rows in one page with 10 posts and there is no problem with posts on row 1 to 3.
Just wondering, out of your memory, have you came across navigator causing problem on the alignment? Many thanks.
Stuart
If it is a live site then run it through the validator, as it sounds 99% like bad HTML like a missing closing tag, this could be in your page changes, or in a posts HTML.
Paste your changed file to WordPress.pastebin.com and paste the link in a reply, is always a good and quick way to get an extra set on eyes on your code.
HTH
David
Hi David,
Still trying to get it right but no luck yet.
Actually, I didn’t really modify much from original twenty ten. For the tuitorial part, inorder for me to solve my previous excerpt and thumbnail problem, I have changed the following in the loop-columns.php:
Changed from:
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>To:
<?php if ( is_home() || is_front_page() || is_archive() || is_search() ) : // Display excerpts for home, archives and search.
global $more; $more = -1; //declare and set $more to show all, for uneffected excerpts ?>I have done the similar changes before in my loop.php. Therefore, I’m not sure if this could be the problem. Where could this problem be? in my CSS file? Really need your help. Thanks.
Stuart
Paste the page to pastebin, part of the code tells nothing!
A live link to a test site helps as well.
If you are not using gallery posts or asides, we can cut the code right down, and remove the condition, as this loop is only used in the index.php (home or blog).
David
Hi David,
Here is the link to my site, http://www.allabouthongkong.com/
The following are file of loop-columns.php. Thanks.
[Code moderated as per the Forum Rules. Please use the pastebin]
Hi David,
First time using pastebin, could you please guide me of how to use it? Many thanks.
Stuart
Hi Stuart a quick look with the validator and this link is not closed off
<a href="http://www.allabouthongkong.com/" title="All About Hong Kong" rel="home">That might cause a problem, fix that and run the url through the validator, there are only 7 errors and 1 warning.
I could not see a problem with the post footers?
David
Hi David,
I’m abit lost on this.
Did you mean you can’t see any problem with the alignment and the navigator? For your info, I’m using IE7, could this be the problem?Also, may I know how to close off the link correctly? I’m so sorry that I’m not good at all these. Thanks.
Stuart
Duh,
Just read the post again, the alignment will be affected by the long post titles, two of your post titles wrap to a second line, two choices keep the titles shorter or:#content .entry-title { min-height:35px; }This is also happening on the post footer with the tags wrapping to a second line you might want to remove the tags from the two column layout.
Still fix the validation, is this a ‘child theme setup’ or just a twenty ten copy folder, nice job!
HTH
David
The topic ‘Split single content column to 2 columns in Twenty Ten’ is closed to new replies.