WordPress.org

Support

Support » Plugins and Hacks » Hacks » Help creating shortcode for inline style (CSS)

Help creating shortcode for inline style (CSS)

  • I am trying to wrap my head around the API, to no avail… (it isn’t helping that I am very fresh to PHP & CSS as well) and have searched various sites for help, so now I am turning to the good folks in this community.

    My site is going to end up using a lot of cited material, and I’d like to create a shortcode to style the citation text. I have the CSS, what I can’t figure out is how to implement it with a shortcode.

    Here’s what I had from a blog:

    function citation ( $atts, $content = null ) {<br />
    	extract(shortcode_atts(array(<br />
    		'float' => '$right',<br />
    	), $atts));<br />
    	return '<quote class="citation ' . $float . '">' . $content . '</citation>';<br />
    	}</p>
    <p>add_shortcode('cite', 'citation')

    and here’s the CSS:

    quote.citation {<br />
    	padding: 0 0 20px 0;<br />
    	width: 45%;<br />
    	text-align: right;<br />
    	margin: 0 10px 40px 10px;<br />
    	font-size: 11px;<br />
    	color: #f0f3f7;<br />
    }

    And of course, it is not working (well actually the color and font-size attributes are working, but the padding, etc. isn’t). Sorry to be such a noob. I’m stuck…

    How can I get this to work?

Viewing 2 replies - 1 through 2 (of 2 total)
  • Off the top of my head, I’d suggest changing this line:

    return '<quote class="citation ' . $float . '">' . $content . '</citation>';<br />

    You’re opening with a <quote> tag and closing with a </citation> tag. Change the </citation> to </quote> and see if it clears up the problem.

    You might also want to check into Post Formats:

    http://codex.wordpress.org/Post_Formats

    I haven’t used them, but they may prove to be a cleaner solution. If you’re developing a site for yourself or someone who is familiar with markup, then it’s probably not a big deal, but many internet users will find adding markup tags confusing.

    If you’re developing for a client, I’d recommend adding custom formats to tinymce, filtering the content with a hook, using jQuery, or some other method to add the necessary styling and markup behind the scenes.

    Thanks for the help bcwp.
    I must be doing something really wrong, cos it’s still not completely working. Oh well, back to the books!

    Thanks again.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Help creating shortcode for inline style (CSS)’ is closed to new replies.
Skip to toolbar