Jump to content
Sign in to follow this  
bluetag

2 columns under post, need some advice

Recommended Posts

bluetag

Hi guys, My site is www.publicvoiceny.com/blog I'm displaying a post excerpt on the main page and a menu underneath the post. My problem is the menu under the post is too long and I want to make it a 2 column menu. Can someone help me do that with custom code? Or maybe give me advice on how to make 2 columns through the template setup.

Share this post


Link to post
Share on other sites
catrina
a menu underneath the post
What links will this menu contain exactly? Will this be a primary navigation menu or is it a completely different one?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bluetag

hi Catrina, it's going to be a different menu, not the primary nav menu

Share this post


Link to post
Share on other sites
Keith Vaugh

Had a similar problem last week where I wanted to two columns on a page. Here's what worked for me, thanks to a link from Adam In the Theme Functions php (in platform Pro its functions.php) add this code:

	function atlas_clean_shortcode_content( $content ) {
	
	    /* Parse nested shortcodes and add formatting. */
	    $content = trim( wpautop( do_shortcode( $content ) ) );
	
	    /* Remove '</p>' from the start of the string. */
	    if ( substr( $content, 0, 4 ) == '</p>' )
	        $content = substr( $content, 4 );
	
	    /* Remove '<p>' from the end of the string. */
	    if ( substr( $content, -3, 3 ) == '<p>' )
	        $content = substr( $content, 0, -3 );
	
	    /* Remove any instances of '<p></p>'. */
	    $content = str_replace( array( '<p></p>' ), '', $content );
	
	    return $content;
	}
	
	/**
	 * Flexible columns shortcode.
	 * @param array $atts array of shortcode attributes
	 * @param string $content the content between the shortcode tags
	 * @return string
	 */
	function atlas_column_shortcode( $atts, $content = '' ) {
	
	    /* Extract shortcode attributes. */
	    extract( shortcode_atts( array(
	      'width' => '45%',
	      'spacing' => '0',
	        ), $atts ) );
	
	    /* Parse any nested shortcodes and clean up the formatting. */
	    $content = atlas_clean_shortcode_content( $content );
	
	    /* Assemble the output. */
	    $style = "style='float: left; width: {$width}; margin-right: {$spacing};'";
	    $output = "<div {$style}>{$content}</div>";
	
	    return $output;
	}
	
	/**
	 * Clear shortcode columns.
	 * @return string
	 */
	function atlas_clear_columns_shortcode() {
	    return "<div style='clear: both;'></div>";
	}
	
	/* Register column shortcodes. */
	add_shortcode( 'column', 'atlas_column_shortcode' );
	add_shortcode( 'end-columns', 'atlas_clear_columns_shortcode' );
	
The in the page (and I'd imagine it'll work also in a post) add the following tags (changing the % to suit your needs)
	[column width='30.66%' spacing='4%']
	Your content goes here.
	[/column]
	
	[column width='30.66%' spacing='4%']
	Your content goes here.
	[/column]
	
	[column width='30.66%']
	Your content goes here.
	[/column]
	
	[end-columns]
	

For further information here is were I got the code: http://donalmacarthur.com/articles/flexible-column-shortcodes-for-wordpress/ Hope this helps.

Share this post


Link to post
Share on other sites
bluetag

thanks Keith. That code will be useful in posts and pages, and I'll probably use it when I enter content in the site. But I'm using a custom menu of the pages in my site. There are too many pages so the menu is also long. If I put the menu on the right side bar then it looks ok because it will display the page titles in a column. If I put the menu in the main content area under the 1st post it looks a little awkward to have a long menu like that. If there is a way to split the menu into two columns when it reaches 5 or 6 menu items, then that will look better.

Share this post


Link to post
Share on other sites
cmunns

Couldn't you create two menus to manually set two columns? Just a thought...

Share this post


Link to post
Share on other sites
bluetag

That might work Adam. How do I do that? But I still think the one menu split into two columns might look better.

Share this post


Link to post
Share on other sites
catrina

The two menus can be created separately and then HTML can be used to put them into column format (all using a hook).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bluetag

Can you help me with the hook Catrina?

Share this post


Link to post
Share on other sites
timlinson

i would just do this with css in platformpro > settings > custom code > custom css: ` #content_sidebar ul ul { column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; } `

Share this post


Link to post
Share on other sites
bluetag

Hey Tim, that worked very well. But now I have another problem. It works good on Firefox, but if you test it on Internet Explorer it doesn't divide into two columns. I tested it on Firefox, Google Chrome and Safari and the two columns are rendered by the CSS, except Internet Explorer. Can someone else test on IE for me? The site is www.publicvoiceny.com/blog

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×