This is a little compilation I’ve made of my most used code snippets every time I build a prototype, website or theme. By following these steps you can save 80% of coding time for any HTML/CSS website or WordPress theme. For some of my projects I use the Zen Coding plugin to develop the HTML. Most of the CSS itself is optimized already using short names and what some people call OOCSS (Object Oriented CSS).
1. CSS Reset and Minimal Grid
Yahoo CSS Reset
/* Copyright (c) 2011, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 2.9.0 */ html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,button,caption,cite,code,dfn,em,input,optgroup,option,select,strong,textarea,th,var{font:inherit}del,ins{text-decoration:none}li{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:baseline}sub{vertical-align:baseline}legend{color:#000}
960px Grid (12 cols, 60px width, 20px gutter)
/* Minimal Grid */ .g1{width:60px;}.g2{width:140px;}.g3{width:220px;}.g4{width:300px;}.g5{width:380px;}.g6{width:460px;}.g7{width:540px;}.g8{width:620px;}.g9{width:700px;}.g10{width:780px;}.g11{width:860px;}.g12{width:940px;}.g1,.g2,.g3,.g4,.g5,.g6,.g7,.g8,.g9,.g10,.g11,.g12{overflow:hidden;float:left;display:inline;margin:0 10px;}.r{width:960px;overflow:hidden;margin:0 auto;}.r .r{width:auto;display:inline-block;margin:0 -10px;}
CSS 100% box model
Padding, borders, margins and width equals 100%:
* {-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing: border-box;}
Common CSS
/* Common CSS */ html {}body {font-family:Arial,sans-serif;font-size:14px;} a{color:#0085d5;text-decoration:none}a:hover{} li{display:inline} h1,h2,h3,h4,h5,h6 {} strong,.strong {font-weight:900}em,.em {font-style:italic} .right{text-align:right}.center {text-align:center} .fright{float:right}.fleft{float:left} .hide{display:none}
Sprite map
/* Sprite */ #logo,.button, .sprite{background:transparent url('images/sprite.jpg') no-repeat;} .ico {display:inline-block;height:16px;width:16px} .ico.aa {background-position:-px -px}
Forms and buttons
.button{background:#eee;border:1px solid #ccc;cursor:pointer;font-weight:900;padding:5px 10px;text-decoration:none}
CSS for the coming HTML template
/* Main structure */ #wrap {} #header {} #logo {} #logo span {display:none} #s {} #topnav {} #nav {} #nav li {display:inline} #container {} #container a {text-decoration:underline} #container li {display:list-item} .main {} .main h1 {} .main h2 {} .main p {} .side {} .side h4 {} .side h5 {} .side p {} #footer {} #footer p {} #footer p a {}
Overlap design watermark for pixel perfect CSS
<style> #watermark {position:fixed;top:0;left:0;width:100%;background:url(images/watermark.jpg) top center;height:5px;opacity:0.2} #watermark:hover {height:1000px;opacity:0.5} </style> <div id="watermark"></div>
2. HTML Zen Coding shortcuts
Typical HTML website structure
With the power of Zen Coding, I can code a full HTML website in one line of code, then press the shortcut (Ctrl+, in Dreamweaver) and voila, there you have all the HTML ready:
html:xt>(div#wrap>(div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide))+(div#topnav.r>div.g12>ul.nav>li*5>a)+(div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a))+(div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)))
Here’s the fragmented HTML:
html:xt div#wrap div#header.r>div.g6*2 div#header.r>(div.g6>p#logo>span)+(div.g6>form#search>input[type=text]#s+input[type=submit].hide) div#topnav.r>div.g12>ul.nav>li*5>a div#container.r>(div.main.g8>div.post>h1+p+img[src=http://dummyimage.com/150x150])+(div.side.g4>h4+p>ul>li*5>a) div#footer.r>(div.g6>p>a*1)+(div.g6>p>a*4)
Forms and tables
form>label+input:text+input:submit select#items>option[value=item-$]*3 table>(tr>th*2)+(tr>td*2)
Listings
div.list-vert>(img[src=http://dummyimage.com/100x100]+h3+p.brand+span.rating-5+p.price+(p>a.button-m))
3. WordPress theme
- Download the Starter Theme
- Add TimThumb
- Then grab snippets from WP Snippets
- Start coding and customizing
4. WordPress customization
In the functions.php
date_default_timezone_set('Europe/Madrid'); date_default_timezone_set('Europe/London');
TimThumb shortcut
function timthumb($src, $w, $h, $q=90, $zc=1) { return get_bloginfo('template_url').'/thumb.php?src='.$src.'&w='.$w.'&h='.$h.'&q='.$q.'&zc='.$zc; }
Custom field shortcut
function customfield($name, $id="") { $value = get_post_custom_values($name, $id); return $value[0]; }
Extract images of a post
function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ $first_img = "/images/default.jpg"; } return $first_img; }
Nice excerpts
/* This function will trim text without cutting it in the middle of the word and adding … if longer */ function trimtext($text, $length) { $words = explode(" ", strip_tags($text)); $newtext = ""; $addhellip = ""; foreach ($words as $word) { if (strlen($newtext." ".$word) < $length) { $newtext .= " ".$word; }else{ $addhellip = 1; break; } } if ($addhellip) {$newtext .= "…";} return $newtext; }
Get exact current page URL
function curPageURL() { $pageURL = 'http'; if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";} $pageURL .= "://"; if ($_SERVER["SERVER_PORT"] != "80") { $pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"]; } else { $pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"]; } return $pageURL; }
Optimize WYSIWYG editor for SEO
if (isset($wp_version)) { add_filter("mce_buttons", "extended_editor_mce_buttons", 0); add_filter("mce_buttons_2", "extended_editor_mce_buttons_2", 0); add_filter('tiny_mce_before_init', 'extended_editor_change_mce_buttons', 0); } function extended_editor_mce_buttons($buttons) { return array( "formatselect", "separator", "bold", "italic", "separator", "bullist", "numlist", "blockquote", "separator", "link", "unlink", "separator", "charmap", "separator", "pasteword", "separator", "fullscreen", "separator", ); } function extended_editor_mce_buttons_2($buttons) { // the second toolbar line return array(); } function extended_editor_change_mce_buttons( $initArray ) { $initArray['theme_advanced_blockformats'] = 'p,h2,h3,h4,h5,h6,pre'; return $initArray; }
In the wp-config.php
Disable/limit revisions
# Maximum 5 revisions define('WP_POST_REVISIONS', 5); # Disable revisions define('WP_POST_REVISIONS', false);
5. WordPress must-have plugins
Related posts
Photo by CoffeGeek
No comments yet