WordPress.org

1. mattesque
   Member
   Posted 1 year 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 1 year 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 1 year 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.