WordPress.org

Ready to get started?Download WordPress

Forums

Help creating shortcode for inline style (CSS) (3 posts)

  1. mattesque
    Member
    Posted 2 years 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?

  2. bcwp
    Member
    Posted 2 years 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.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.

  3. mattesque
    Member
    Posted 2 years 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.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.