25 Useful CSS/WordPress Snippets

  • 39 Comments | Posted on September 8th, 2010 in Web Design

25 usefull code snippets
Throughout my years of being involved in web design and development, I have come across a wide range of code snippets. The more useful ones, I tend to save for later use. I use Code Collector Pro to manage all of my snippets that I keep in one easy place. Here are a bunch of the snippets that I use on a regular basis to save time and be more efficient in coding. Feel free to leave a comment with a snippet that you use often, that I might have missed, or if there is a better coding solution to one that I cover :)

Some great resources (where most of these snippets are from) for smart code snippets are:
CSS Tricks – Snippets
Snipplr – Social Snippet Repository
DevSnippets

I realize not all of these may appear perfect in all browsers, so if you know of a work-around for a specific browser, please let me know and I will add it to the post, thanks!!

CSS

Easy @font-face

This is an example of the font Blackout

1
2
3
4
5
6

@font-face {
font-family: Blackout;
src: url("path-to-file/blackout.ttf") format("truetype");
}
 
h1 { font-family: Blackout, Impact, Helvetica, Sans-Serif; }

Visit the FontSquirrel.com @font-face generator to easily package all of the necessary files you will need for browser compatibility (along with a ton of free fonts to use with it as well).

Beautiful blockquotes

This is an example of the blockquote styling.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

blockquote {
     background:#f9f9f9;
     border-left:10px solid #ccc;
     margin:1.5em 10px;
     padding:.5em 10px;
     quotes:"\201C""\201D""\2018""\2019";
}
blockquote:before {
     color:#ccc;
     content:open-quote;
     font-size:4em;
     line-height:.1em;
     margin-right:.25em;
     vertical-align:-.4em;
}
blockquote p {
     display:inline;
}

Conditional comments

1
2
3

<!--[if gte IE 6]>  
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />  
<![endif]-->

Email link with an image

All email links will look like this: address@sample.com

1
2
3
4

a[href^="mailto:"] {
     background: url(images/email.png) no-repeat right top;
     padding-right:10px;
}

Fixed footer

1
2
3
4
5
6
7
8
9
10
11
12
13
14

#footer {
     position:fixed;
     left:0px;
     bottom:0px;
     height:30px;
     width:100%;
     background:#999;
}
 
/* IE 6 */
* html #footer {
     position:absolute;
     top:expression((0-(footer.offsetHeight)+(document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.clientHeight)+(ignoreMe = document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop))+'px');
}

Centering a website

1
2
3
4

#wrapper {   /* the main div that wraps all other divs */
     width: 960px;
     margin: 0 auto;
}

Pretty Ampersands

Ampersands are so pretty & cute

1
2
3
4
5

.amp {
     font-family: Baskerville, 'Goudy Old Style', Palatino, 'Book Antiqua', serif;
     font-style: italic;
     font-weight: normal;
}
1

<span class="amp">&amp;</span>

CSS reset

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

@charset "UTF-8";
 
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
     margin: 0;
     padding: 0;
     border: 0;
     outline: 0;
     font-weight: inherit;
     font-style: inherit;
     font-size: 100%;
     font-family: inherit;
     vertical-align: baseline;
}
 
:focus {
     outline: 0;
}
body {
     line-height: 1;
     color: black;
     background: white;
}
ol, ul {
     list-style: none;
}
 
table {
     border-collapse: separate;
     border-spacing: 0;
}
caption, th, td {
     text-align: left;
     font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
     content: "";
}
blockquote, q {
     quotes: "" "";
}
/* Remove padding and margin */
* {
     margin: 0;
     padding: 0;
}
/* Class for clearing floats */
.clear {
     clear:both;
}
/* Remove border around linked images */
img {
     border: 0;
}

Super awesome buttons

Sample Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

button.awesome, .button.awesome {
     background: #222 url(/images/overlay-button.png) repeat-x;
     display: inline-block;
     padding: 5px 10px 6px;
     color: #fff;
     text-decoration: none;
     font-weight: bold;
     line-height: 1;
     -moz-border-radius: 5px;
     -webkit-border-radius: 5px;
     -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
     text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
     border-bottom: 1px solid rgba(0,0,0,0.25);
     position: relative;
     cursor: pointer;
}

Download the overlay-button.png file here (841)

Transparency (cross browser)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

.transparent_class {
  /* IE 8 */
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 
  /* IE 5-7 */
     filter: alpha(opacity=50);
 
  /* Netscape */
      -moz-opacity: 0.5;
 
  /* Safari 1.x */
     -khtml-opacity: 0.5;
 
  /* Good browsers */
     opacity: 0.5;
}

Easy Current Page Targeting

1
2
3
4
5

<ul id="nav">
    <li <?php if($curr_page == "HOME") echo "class=\"current-nav\"";?> ><a href="index.php">HOME</a></li>
    <li <?php if($curr_page == "ABOUT") echo "class=\"current-nav\"";?>><a href="about.php">ABOUT</a></li>
    <li <?php if($curr_page == "CONTACT") echo "class=\"current-nav\"";?>><a href="contact.php">CONTACT</a></li>
  </ul>

Then put this at the top of each page

1
2
3

<?php 
$curr_page = "CONTACT";  // this value changes depending on which page you are on, so for your About page, $curr_page = "ABOUT" , etc.
?>

Then apply some CSS to make your current page a little more stylish (which will change depending on however you want it to look)

1
2
3
4

.current-nav { 
     background:#cccccc;
     text-decoration:underline;
 }

CSS only Tooltips

This great snippetThis is just an example of what you can do with this CSS tooltip. is from SixRevisions

1

<a class="tooltip" href="#">great snippet<span class="classic">This is just an example of what you can do with this CSS tooltip.</span></a>

Then add some CSS styling to it

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.tooltip {
     color:#066; outline: none;
     text-decoration: underline;
     position: relative;
}
.tooltip span {
     margin-left: -999em;
     position: absolute;
}
.tooltip:hover span {
     border-radius: 5px 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; 
     box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); 
     -moz-box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
     position: absolute; left: 10px; top: 25px; z-index: 99;
     margin-left: 0; width: 230px;
}
.classic { 
     padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; }
     * html a:hover { background: transparent;  /* to help IE6 */
}

Simple Print Stylesheet

If you think your users might want to print some of your content out, most likely you will need a “Print Stylesheet” to make certain things look a bit nicer when printed.

Simply include your print.css at the Head of your web page (Note that the media is set to print and not screen).

1

<link rel="stylesheet" href="yourpath/print.css" type="text/css" media="print" />

Then starts the styling. Your margin/padding will need to be reset back to 0, as well as declaring a new font (unless your current font will look perfect when printed).

1
2

/*Reset Style*/
body {margin:0; padding:0; line-height: 1.4em; word-spacing:1px; letter-spacing:0.2px; font: 13px Arial, Helvetica,"Lucida Grande", serif; color: #000;}

Any extra elements that you think will not print well, such as the logo, search bar, nav bar, etc; need to be set to “display:none.”

1
2

/*Remove Elements*/
#logo, #nav, #sidenav, #advertisements, #commentform, .comments {display:none;}  /* these will change depending on your site */

Links will have to be shown as a URL instead of a link (since users will not be able to click on the link once its printed out)

1
2
3
4

/* Show URL */
a:link, a:visited {background: transparent; color:#333; text-decoration:none;}
a:link[href^="http://"]:after, a[href^="http://"]:visited:after {content: " (" attr(href) ") "; font-size: 11px;}
a[href^="http://"] {color:#000;}

WordPress

Apple-like Breadcrumbs

1
2
3
4
5

<ul id="breadcrumb">
<li><a href="/" title="Home"><img src="/images/home.png" alt="Home" class="home" /></a></li>
<li><?php the_category(', ') ?></li>
<li><?php the_title(); ?></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

#breadcrumb {
     font: 11px Arial, Helvetica, sans-serif;
     height:30px;
     line-height:30px;
     color:#9b9b9b;
     border:solid 1px #cacaca;
     width:100%;
     overflow:hidden;
     margin:0px;
     padding:0px;
}
#breadcrumb li {
     list-style-type:none;
     float:left;
     padding-left:10px;
}
#breadcrumb a {
     height:30px;
     display:block;
     background-image:url(/images/bc_separator.png);
     background-repeat:no-repeat;
     background-position:right;
     padding-right: 15px;
     text-decoration: none;
     color:#000;
}
.home {
     border:none;
     margin: 8px 0px;
}
#breadcrumb a:hover {
     color:#35acc5;
}

Download the breadcrumb images here (1049)

Simple breadcrumbs

1

<?php bloginfo(‘home’); ?> / <?php the_category(); ?> / <?php the_title(); ?>

Display author info

1
2
3
4
5

<div class="author-box">
   <div class="author-pic"><?php echo get_avatar( get_the_author_email(), '80' ); ?></div>
   <div class="author-name"><?php the_author_meta( "display_name" ); ?></div>
   <div class="author-bio"><?php the_author_meta( "user_description" ); ?></div>
</div>

Dynamic title

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<title>
<?php
if (is_home()) {
echo bloginfo('name');
} elseif (is_404()) {
echo '404 Not Found';
} elseif (is_category()) {
echo 'Category:'; wp_title('');
} elseif (is_search()) {
echo 'Search Results';
} elseif ( is_day() || is_month() || is_year() ) {
echo 'Archives:'; wp_title('');
} else {
echo wp_title('');
}
?>
</title>

Google analytics without editing theme

Insert this code in your function.php file

1
2
3
4
5
6

<?php
add_action('wp_footer', 'ga');
 
function ga() { ?>
    // Paste your Google Analytics code here
<?php } ?>

RSS feed

1

<div id="rss"> <a href="<?php bloginfo('rss2_url'); ?>" title="Subscribe to us"></a> </div>

Social Media Links

Love this one :) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

// bookmark on Delicious
<a rel="nofollow" href="http://delicious.com/post?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Bookmark this post at Delicious">Bookmark at Delicious</a>
 
// submit to Digg
<a rel="nofollow" href="http://digg.com/submit?phase=2&amp;url=<?php the_permalink(); ?>" title="Submit this post to Digg">Digg this!</a>
 
// tweet on Twitter
<a rel="nofollow" href="http://twitter.com/home?status=<?php echo urlencode("Currently reading: "); ?><?php the_permalink(); ?>" title="Share this article with your Twitter followers">Tweet this!</a>
 
// submit to StumbleUpon
<a rel="nofollow" href="http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post at StumbleUpon">Stumble this!</a>
 
// share on Facebook
<a rel="nofollow" href="http://www.facebook.com/sharer.php?u=<?php the_permalink();?>&amp;t=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Facebook">Share on Facebook</a>
 
// submit to Blinklist
<a rel="nofollow" href="http://blinklist.com/index.php?Action=Blink/addblink.php&amp;url=<?php the_permalink(); ?>&amp;Title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Blinklist" >Blink This!</a>
 
// store on Furl
<a rel="nofollow" href="http://furl.net/storeIt.jsp?t=<?php echo urlencode(get_the_title($id)); ?>&amp;u=<?php the_permalink(); ?>" title="Share this post on Furl">Furl This!</a>
 
// submit to Reddit
<a rel="nofollow" href="http://reddit.com/submit?url=<?php the_permalink(); ?>&amp;title=<?php echo urlencode(get_the_title($id)); ?>" title="Share this post on Reddit">Share on Reddit</a>

Tag Cloud

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<?php wp_tag_cloud( array(
 
    'smallest' => 8,          // font size for the least used tag
    'largest'  => 22,         // font size for the most used tag
    'unit'     => 'px',       // font sizing choice (pt, em, px, etc)
    'number'   => 45,         // maximum number of tags to show
    'format'   => 'flat',     // flat, list, or array. flat = spaces between; list = in li tags; array = does not echo results, returns array
    'orderby'  => 'name',     // name = alphabetical by name; count = by popularity
    'order'    => 'ASC',      // starting from A, or starting from highest count
    'exclude'  => 12,         // ID's of tags to exclude, displays all except these
    'include'  => 13,         // ID's of tags to include, displays none except these
    'link'     => 'view',     // view = links to tag view; edit = link to edit tag
    'taxonomy' => 'post_tag', // post_tag, link_category, category - create tag clouds of any of these things
    'echo'     => true        // set to false to return an array, not echo it
 
) ); ?>

Add a Dynamic Sidebar

Add this code to your functions.php file. Notice the (2), which will give you two sidebars; change this to your liking.

1
2
3
4

<?php
if ( function_exists('register_sidebars') )
register_sidebars(2);
?>

Then add this to your sidebar.php file

1
2

<?php if ( function_exists('dynamic_sidebar') && dynamic_sidebar(2) ) : else : ?>
<?php endif; ?>

Auto-updating Date

1

Copyright &copy; 2009-<?php echo date('Y'); ?>

Resize images using Timthumb

Copy the TimThumb script and save it to your scripts/javascript folder

1

<img src="/scripts/timthumb.php?src=/images/whatever.jpg&amp;h=150&amp;w=150&amp;zc=1" alt="" />

Popular Posts based on Comment Count

1
2
3
4
5
6
7
8
9
10
11
12
13

<h2>Popular Posts</h2>
<ul>
<?php $result = $wpdb->get_results("SELECT comment_count,ID,post_title FROM $wpdb->posts ORDER BY comment_count DESC LIMIT 0 , 10");
foreach ($result as $post) {
setup_postdata($post);
$postid = $post->ID;
$title = $post->post_title;
$commentcount = $post->comment_count;
if ($commentcount != 0) { ?>
<li><a href="<?php echo get_permalink($postid); ?>" title="<?php echo $title ?>">
<?php echo $title ?></a> {<?php echo $commentcount ?>}</li>
<?php } } ?>
</ul>

You Might Enjoy These Posts As Well

sharing is caring lee gustin creative designs
Share

Like what you see? Want to stay up to date on the newest posts?Subscribe by RSS Subscribe by Email

Written by Lee Gustin

Lee is the creator and designer of LeeGustin.com. He is a freelance Graphic/Web Designer who loves learning new things about designing and art. Feel free to follow him on twitter at ltgustin

Comments

Claudia

September 9, 2010 at 12:48 pm

That’s quite an interesting post, I’ve been in need of some snippets for long but now that you filled a page with, I’m defitely happy =)

Thanks a lot =)

[Reply]

Lee Gustin Reply:
September 9th, 2010 at 6:15 pm

Thanks for the nice words Claudia :) I’m glad you can get some use out of the code.

[Reply]

Patrick Offczorz

September 9, 2010 at 6:10 pm

Thanks m8 for this Snippets

[Reply]

Lee Gustin Reply:
September 9th, 2010 at 6:14 pm

No problem, glad they can be useful to you Patrick

[Reply]

Matthew Orley of Akron, OH

September 12, 2010 at 10:35 am

Great post Mr. Lee. Lots of time savers here, a lot easier to delicious your post than memorize it. Matt Orley, Akron, OH.

[Reply]

Lee Gustin Reply:
September 12th, 2010 at 12:24 pm

Thanks Matt, I have actually opened up this post a couple times since I posted it to see the snippets haha. Glad you find it useful

[Reply]

vinay

September 13, 2010 at 2:25 pm

very useful wordpress snippets…. thanks for share… It helped me a lot….

[Reply]

Scott Ludtke

December 26, 2010 at 6:30 am

I’ve been searching for days for the media print solution for a clients wordpress site — to print coupons.
This post may have solved all my problems?
Thanks!

~Scott

[Reply]

Lee Gustin Reply:
December 27th, 2010 at 10:36 am

Scott, the print style sheet isn’t perfect, but it should get the job done :) Glad the post was useful!

[Reply]

Brett Widmann

January 28, 2011 at 1:00 am

These were really helpful. I’m glad you put this together. Keep ‘em coming!

[Reply]

Lee Gustin Reply:
January 28th, 2011 at 11:23 pm

Thanks, glad they are useful to you :)

[Reply]

facebook poker chips

May 23, 2011 at 8:05 am

Top post. I look forward to reading more. Cheers

[Reply]

Alex

June 6, 2011 at 2:11 pm

Thank you very much, saves me a lot of time!!!!!

[Reply]

Lee Gustin Reply:
June 6th, 2011 at 2:14 pm

Glad I could help Alex :)

cheers

[Reply]

sary

September 12, 2011 at 7:48 pm

This can be a honestly very good read for me, Have to admit that you simply are among the most effective bloggers I ever saw.Thanks for posting this informative article.

[Reply]

Sam

March 12, 2012 at 12:07 am

Thanks for the cool snippets. I will definitely gonna try them out…

[Reply]

Vivian Dsena

May 10, 2012 at 11:27 pm

The footer problem was what brought to this amazing post..Did not know it was such an easy fix. Thank you, Gustin.

[Reply]

captcha filler

August 1, 2012 at 10:20 pm

Thanks designed for sharing such a fastidious thought, article is pleasant, thats
why i have read it entirely

[Reply]

bypasscaptcha key

August 3, 2012 at 7:57 pm

What’s up, all is going well here and ofcourse every one is sharing facts, that’s really excellent, keep up writing.

[Reply]

Alexis

November 20, 2012 at 2:09 am

Somebody necessarily assist to make severely posts I would state.
That is the very first time I frequented your website
page and so far? I amazed with the analysis you made to make this particular
put up extraordinary. Wonderful activity!

[Reply]

Rita

November 20, 2012 at 7:00 pm

You can definitely see your expertise within the work you write.
The arena hopes for even more passionate writers like you who aren’t afraid to say how they believe. At all times go after your heart.

[Reply]

Muhammad Wajid

November 25, 2012 at 1:58 am

Thats a nice work you have done a great piece of code can someone tell me i want to style my paragraph text is comming from database i have make a paragraph but i want to fix the width and height and automatically make new paragraph after that width and height exceeds thanks everyone

[Reply]

youtube.com

December 14, 2012 at 9:58 pm

I am regular reader, how are you everybody? This article posted at this web page
is actually good.

[Reply]

alman ilan

January 27, 2013 at 8:23 am

Thanks nice shared.

[Reply]

samar

February 7, 2013 at 7:07 am

COOL SNIPPETS :-)

[Reply]

www.PenisGrowthGuideReview.org

March 9, 2013 at 5:03 pm

I blog often and I truly thank you for your information.
Your article has truly peaked my interest. I’m going to bookmark your website and keep checking for new details about once per week. I subscribed to your RSS feed as well.

[Reply]

Trackbacks

  1. 140+ Highly Useful Articles for Web Designers and Developers — tripwire magazine
  2. Simple CSS Tooltip - Web Design WordPress | Chief Alchemist
  3. Master your CSS3! Ultimate CSS code snippets | djavupixel.com
  4. Weekly WordPress Review » WPCanada
  5. Shun the Plugin: 100 WordPress Code Snippets from Across the Net | WordPress, Multisite and BuddyPress plugins, themes, news and help – WPMU.org
  6. CSS Snippets for Your Coding | prosoxi.com
  7. Anusvaar
  8. 101 Useful WordPress Snippets | Resources and Tools
  9. fav favourites Everything « Donals "How to"
  10. 100 WordPress Code Snippets from Across the Net « Tech Snippets
  11. Modifier facilement son thème WordPress avec du CSS
  12. Modifier facilement son thème WordPress avec du CSS
  13. Enlaces rápidos « Luis Molina

Leave a response

←
→