WordPress.org

Ready to get started?Download WordPress

Forums

Ryu
[resolved] Custom genericon for category (5 posts)

  1. rossjamesparker
    Member
    Posted 11 months ago #

    I am using the plugins Keyring and Keyring Social Importers ('KSL') to import my tweets on to my WordPress blog, which uses 'Ken', my Ryu child theme in development.

    At the moment, KSL imports my tweets as separate posts in the category 'Tweets' with a post-type of aside. You can see the result on my site.

    I think it would be really in keeping with the spirit of Ryu to add two cool functions to these posts:

    1. Set their background colour to #9AE4E8. You may have noticed that this the dominant colour of a certain social media site ;)
    2. For this category of asides only, to replace the 'entry-format-badge genericon' with a similar round image containing the outline of a small bird.

    I think the first of these should be possible through simple CSS, although I am too simple to know what CSS line is required. I tried the following:

    .category-tweets .entry-wrap { background-color: #9AE4E8; }

    ...but I don't think .entry-wrap is the correct element, because the result is not what I would wish. Could anyone tell me the correct element please?

    On the second point, I imagine this might be harder. Any ideas on how I could achieve it?

  2. rossjamesparker
    Member
    Posted 11 months ago #

    I have now solved the first part (getting background colours) by using the following in styles.css:

    .category-tweets { background-color: #9AE4E8; }

    Now it's just whether I can use a custom genericon.

  3. Beau Lebens
    Member
    Posted 11 months ago #

    Hi Ross, that's pretty neat :) I'm the developer of Keyring and the Importers that use it, and I'm doing something similar on my (not launched website).

    FWIW, I'm working on an update to the importers package that will add a new custom taxonomy, and then all posts created through it will be marked with where they were imported from. That makes it a lot easier to query for, e.g. posts imported from Twitter, without requiring a specific tag/category be applied to them.

    For your immediate concern though, you *might* (untested) be able to do something purely with CSS.

    I grabbed a twitter icon that I found in a Google search (you'll want a local copy), and tinkered with this quickly, and came up with this, which I think will do something roughly like what you're trying to do. Basically override/remove the genericon for those posts in your twitter category, then add in a twitter icon instead.

    .category-tweets .entry-format-badge.genericon:before {
    content: "";
    }
    .category-tweets .entry-format-badge.genericon {
    background: url(http://gsablogs.gsa.gov/gsablog/files/2013/08/twitter-bird-light-bgs1.png);
    background-size: 50px;
    }

    HTH!

  4. rossjamesparker
    Member
    Posted 11 months ago #

    Beau - that is excellent, thank you! I have just tested that on the live site, and it works. I'll now work on getting a local bird icon in a Ryu-like format.

    Great work on KSI by the way (no idea why I called it KSL above!), it's a very smooth piece of software, which is surprising when you consider the scope of the plugin(s). There are some features it doesn't have - like auto-expanding Twitter images, and highlighting tags, but the plugins that do offer this don't seem so polished, and I prefer polish to features!

  5. Beau Lebens
    Member
    Posted 11 months ago #

    In the theme that I'm working on, I actually render the tweets using Twitter's official JS, so they show up with expanded images, retweet buttons, etc etc. I'll probably add something at some point that'll attempt to download media locally though (similar to the Instagram/Flickr ones), at least for twitpic URLs and maybe a few other popular ones.

    For tags, it should be detecting them and adding them as "real" WordPress tags, so you can link those, but I also have a snippet of code running on my site that auto-links them within the text. It's kind of buggy in some situations, but most of the time it works:

    <?php
    /*
    Plugin Name: Auto-Link Twitter Words
    Description: Automatically adds links to @mentions and #hashtags within your Posts & Pages to their appropriate places on Twitter. Don't do it when within the attributes of a tag.
    Version: 1.0
    Author: Beau Lebens
    Author URI: http://dentedreality.com.au
    */
    
    class AutoLinkTwitterWords {
    	static function link( $post_content ) {
    		// @todo Must NOT do these replacements when found within an attribute
    		// e.g. http://localhost/dev/wp-trunk/2012/09/11/advanced-javascript-session-for-automattic-ians-with-the-unstoppable-koop/
    
    		$post_content = preg_replace_callback( '/(^|[(\[\s\.])?@(\w+)/', array( 'AutoLinkTwitterWords', '_username' ), $post_content );
    		$post_content = preg_replace_callback( '/(^|[(\[\s\.])?(?<!&)#(\w+)/', array( 'AutoLinkTwitterWords', '_hashtag' ),  $post_content );
    		return $post_content;
    	}
    
    	static function _username( $matches ) { // $matches has already been through esc_html
    		return "$matches[1]<a href=\"" . esc_url( 'http://twitter.com/' . urlencode( $matches[2] ) ) . "\" rel=\"nofollow\">@{$matches[2]}</a>";
    	}
    
    	static function _hashtag( $matches ) { // $matches has already been through esc_html
    		return "$matches[1]<a href=\"" . esc_url( 'http://twitter.com/#!/search/%23' . urlencode( $matches[2] ) ) . "\" rel=\"nofollow\">#{$matches[2]}</a>";
    	}
    }
    add_filter( 'the_content', array( 'AutoLinkTwitterWords', 'link' ) );

Reply

You must log in to post.

About this Theme

About this Topic