Help creating shortcode for inline style (CSS)

  • mattesque

    (@mattesque)


    14 years, 8 months ago

    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)
  • bcwp

    (@bcwp)

    14 years, 8 months ago

    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.ww.wp.xz.cn/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.

    Thread Starter mattesque

    (@mattesque)

    14 years, 8 months ago

    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.