Title: Help creating shortcode for inline style (CSS)
Last modified: August 20, 2016

---

# Help creating shortcode for inline style (CSS)

 *  [mattesque](https://wordpress.org/support/users/mattesque/)
 * (@mattesque)
 * [14 years, 8 months ago](https://wordpress.org/support/topic/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)

 *  [bcwp](https://wordpress.org/support/users/bcwp/)
 * (@bcwp)
 * [14 years, 8 months ago](https://wordpress.org/support/topic/help-creating-shortcode-for-inline-style-css/#post-2346904)
 * 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](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.
 *  Thread Starter [mattesque](https://wordpress.org/support/users/mattesque/)
 * (@mattesque)
 * [14 years, 8 months ago](https://wordpress.org/support/topic/help-creating-shortcode-for-inline-style-css/#post-2347051)
 * 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.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 2 replies
 * 2 participants
 * Last reply from: [mattesque](https://wordpress.org/support/users/mattesque/)
 * Last activity: [14 years, 8 months ago](https://wordpress.org/support/topic/help-creating-shortcode-for-inline-style-css/#post-2347051)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics