Support » Themes and Templates » Removing paragraphs/line breaks in asides (TwentyTen theme)

  • Resolved Joost Schuur


    I’m attempting to modify the TwentyTen theme to include the usual twentyten_posted_on right after a post in the ‘asides’ category (instead of a new line below it) to create a more compact experience and I’ve run into a problem with the way text from the_content is normally wrapped in paragraph tags, which causes anything after it to land in a new line with spacing around it.

    I know I can remove the wpautop filter from the_content to suppress this, but that removes it from all posts, both asides and regular ones, and I only want to stop that behavior for posts in the asides category. Removing paragraphs entirely also means replicating chunks of style definitions elsewhere that the paragraph tag otherwise inherited like font styles and margins.

    So it looks like I need to do one of two things:

    1. Modify the paragraph tag or the entry content CSS for asides, so that paragraphs simply don’t generate a line break when rendered.
    2. Call echo get_the_content() instead, which bypasses filters, and then replicate the old paragraph style in another div.

    Doing this in CSS seems more elegant. Is it possible? In style.css, I see definitions for .home #content .category-asides p e.g., but looking at some CSS guides, I don’t see a way to influence the line break behavior for paragraph tags.

Viewing 1 replies (of 1 total)
  • I ended up using a different approach, where I add another filter to my theme’s functions.php that simply replaces the last closing p tag with my additional HTML (just the permalink in a hash symbol in this example) plus the closing p tag again. If anyone is curious, here’s a few details.

    First off, the filter function code:

    function asides_inject_utility_links($content) {
    		// If it's an aside, find the last closing p tag and add our entry utility links to it.
    		if(in_category( _x('asides', 'asides category slug', 'twentyten') ) ) {
    			$html= '<a href="' . get_permalink() . '">#</a>';
    			$content = preg_replace("#^<p>(.*)</p>$#isU", "<p>$1 $html</p>", $content);
    		return trim($content);
    	add_filter('the_content', 'asides_inject_utility_links', 11);

    Key here was bumping up the priority on add_filter to 11, otherwise, it didn’t fire late enough for the p tags to already be in the content. Luckily mine went up to 11, so I had no problems there.

    I’m using a few preg_replace modifiers (based on some tips in this blog post) here anlong with # as the delimiter, so I don’t have to mess up the expression with quoted slashes. ‘i’ is a case insensitive match (just in case), ‘s’ tells ‘.’ to span newlines and ‘U’ dials down the ‘greediness’, to prevent ‘.*’ from also matching until the end of the string, including the closing tag.

    Since I’m handling my links this inside the filter, I stripped out the entire entry-utility div that is dedicated to handling the asides style (look for comments along the lines of ‘How to display posts in the asides category’).

    I’m also experimenting a little bit with changing the style of the asides further, so that it’s clear they’re not regular posts

    .home #content .category-asides p {
    		font-size: 14px;
    		line-height: 20px;
    		margin-bottom: 10px;
    		margin-top: 0;
    	.home .hentry.category-asides {
    		padding: 0;
    		margin-bottom: 20px;
    	.home #content .category-asides .entry-content {
    		padding-top: 0;
    		padding-left: 10px;
    		border-left: 1px solid #d0d0d0;

    If anyone sees any problems with the code or has other suggestions, I’d be happy to hear them.

    Finally, I’m also using another addition to function.php to make the links in an RSS

    function asides_external_rss_permalink($permalink) {
    	if($asides_url = get_post_meta(get_the_ID(), 'ASIDES_URL', true))
    		$permalink = $asides_url;
    	return $permalink;
    add_filter('the_permalink_rss', 'asides_external_rss_permalink');

    One thing to keep in mind is that even though the default asides style on the blog doesn’t use the post title, most news aggregators like to dispay something. So if your aside is a just commentary without a link, your title should be something brief enough that doesn’t sound too repetitive, so that your aside works with or without it. When you are using this to briefly comment on a link (AKA ‘Daring Fireball style’), then you need to find a way to have the non-RSS, web based view repeat the link. That means either introducing a linked title header after all, by adding a hyperlinked short phrase like ‘link’ at the end of your content or by just preceeding your content with the title in the same first paragraph, similar to Since the whole point of asides is to not use up as much screen real estate, so that you can do a few of them, I chose to do the latter.

    Of course, the latter means another change to our filter, to update the entry content within the enclosing p tags with the title, but given the above groundwork, that’s not too difficult.

Viewing 1 replies (of 1 total)
  • The topic ‘Removing paragraphs/line breaks in asides (TwentyTen theme)’ is closed to new replies.