WP-Twitter-Login

Who is this plugin for?

This plugin has been specially coded for intermediate to senior WordPress developers that want to develop a new web application using WordPress. The plugin can be configured easily and it has been coded to be very scalable. Users with no knowledge of PHP may find other solutions more helpful since this plugin doesn’t have any GUI. The main purpose of this plugin is to allow people to develop an app taking advantage of the high-converting one-click Twitter sign-up process and saving time in programming a User Authentication system.

How it works?

When a user accesses the URL ?tw=login in a WordPress website he is redirected to Twitter using Matt Harris’ OAuth library. Once authenticated, a new WordPress user is created picking all the information from the Twitter username. The WordPress username has a prefix (tw- by default) and his Twitter ID (the public username is not used here since it can be changed). The password is his Twitter ID with a custom salt. Extra information is stored in his user profile (nickname, full name, website, bio, etc.) as well as in custom user fields (oauth_token, oauth_token_secret, language, followers and friends count, profile image, etc.).

A caveat in WordPress is that it requires a valid and unique email address per user. Since Twitter does not provide you with the user’s email address, the plugin registers the user with an email address like tw-twitterid@domainname.com.

By default the plugin will not allow users to access WP-Admin which makes this plugin perfect for someone who will provide a service to registered users without ever showing the WordPress inner pages to them. You can enable access to WP-Admin changing a variable from true to false although you should disallow users from changing their password or they will not be able to log back in.

Download

Download the plugin from GitHub:

wp-twitter-login

License

This plugin is licensed under a MIT license. Feel free to use it in any commercial way.

Installation

1. Download the plugin and upload it to your plugins folder as you would do with any other WordPress plugin

2. Create a new app at Twitter here

3. Copy the Consumer Key and Consumer Secret and paste them in twitterlogin.php

4. Change the $salt variable to something long and complicated

5. Optionally, you can change the username prefix to something else to increase security

Retrieving user information

To see if a user is logged in through Twitter run is_user_logged_in() and then check if the username matches the Twitter prefix (tw- by default).

To retrieve the current user’s data do something like this:

global $current_user;
get_currentuserinfo();
echo 'Hello ' . $current_user->nickname;
echo 'User token: ' . $current_user->oauth_token;
echo '<img src="' . $current_user->profile_image_url . '" alt="" />';

To retrieve data from someone else do something like this:

$user_info = get_userdata($user_id);
echo 'Username: ' . $user_info->nickname;

Following my jQuery minimal plugin series I’ve now built a very functional and minimal jQuery plugin to create modal windows on the go, it weights exactly 572 Bytes (0.6KB). The modal windows have a slick design using a white rounded border square with a fine shadow:

The CSS style is fully customizable, only 8 properties used by default and you can modify most of them to customise it your way.

The script is unobtrusive and has a high-performance, meaning it only loads and modifies the DOM when required and it unloads everything completely when the modal window is closed. Closing the modal window can be done by either clicking outside of the window or by clicking any .mw_close element in the window content.

Download Simple Modal Window jQuery Plugin

Copy and paste this code below. Yes, ALL the plugin is in this small piece of code, you should just add it into a JavaScript file you have or directly into the page (inside the jQuery wrapper).

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) http://xaviesteve.com/?p=3054 */function mw_close(){$("#mw_win,#mw_mask,#mw_style").remove()}function mw_load(a){mw_mask="background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;";mw_win="background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;";$("head").append('<style id="mw_style">#mw_mask{'+mw_mask+"}#mw_win{"+mw_win+"}</style>");$("body").append('<div id="mw_mask"></div><div id="mw_win">'+a+"</div>");$("#mw_mask,.mw_close").unbind("click").bind("click",function(){mw_close()})}

Here’s the code without minifying:

/* Simplest Modal Window by Xavi Esteve (Creative Commons BY-SA) http://xaviesteve.com/?p=3054 */
$(function() {
  /* Modal window script in 9 lines */
  function mw_load(html) {
    mw_mask = 'background:#333;height:100%;opacity:0.33;position:fixed;top:0;left:0;width:100%;z-index:1000;';
    mw_win = 'background: white;border-radius: 5px;box-shadow: 0 1px 2px #666;left: 33%;padding: 2%;position: fixed;top: 33%;width: 33%;z-index: 1001;';
    $('head').append('<style id="mw_style">#mw_mask{'+mw_mask+'}#mw_win{'+mw_win+'}</style>');
    $('body').append('<div id="mw_mask"></div><div id="mw_win">'+html+'</div>');
    $('#mw_mask,.mw_close').unbind('click').bind('click', function() {mw_close();});
  }
  function mw_close() {$('#mw_win,#mw_mask,#mw_style').remove();}

You can load a new Modal Window through JavaScript by using this function:

mw_load('<p>Lorem ipsum dolor sit <a href="#" class="mw_close">amet</a>.</p>');

If you have any issues please let me know, note that the plugin’s purpose is to simply work, fancy features and extras should be coded apart specifically for your projects. The plugin requires jQuery and it hasn’t been tested in IE6.

One of the first and most important questions a new startup, business or company should have is how to divide the stock amongst its co-founders or stockholders.

Purpose of the Co-Founders Pie

The Co-Founder’s Pie can be used in two different ways:

A) Work and responsibility distributor

We always use the Co-Founder’s Pie to calculate how to distribute work and responsibilities between the co-founders. First we write in everything as it is and then tweak it to make it as balanced as possible so we keep the same equity for all the co-founders. That’s the best approach, if all the co-founders can have the same equity everything would be much better and simpler. If we end up with a 33% 32% 34% then we will agree and share them at 33% each. But if the distribution is quite unbalanced, something like 40% 35% 25% and we can’t tweak the spreadsheet further to balance work/responsibilities then we will go with that equity.

B) Calculate co-founder share equity

If you already have all the areas assigned then you can calculate the equity division with the spreadsheet and see exactly how much should every co-founder own.

Spreadsheet Guide

It is recommended to fill in the spreadsheet in a meeting, when all co-founders are present and do it all together, agreeing on each step. Also, please read this article (5 minute read) from Frank Demmler to learn the origins and reasoning of the Co-Founder’s Pie and the actual purpose of all this.

Co-Founder Pie Spreadsheet

1. Login to Google, follow the link above and click ‘Use this template’

A new copy of the Co-Founders Pie Spreadsheet will be created in your Google Docs. No one has access to it now, not even me. To allow people to collaborate click the Share button (top right corner).

2. Fill in the co-founder names at the top

You can write from 2 to 5 different co-founders.

3. Allocate the different items, tasks, areas in Column A

Examples are in there for demonstration purposes, create your own elements from scratch.

4. Fill in the Weight of each row

This is the most important step of all. Decide a relative importance for each element.
The minimum value is 1, higher is more important. Example: Finance=1 and Design=2 means Design has twice the amount of work or responsibility than Finance.

5. Fill in the amount of work/responsibility of each co-founder

Add a number from 0 to 10 for each player’s participation in each element. It should add up to 10, no more, no less. Use round values like: 3-7 or 1-5-4. If everyone has the same amount leave it blank.

6. Results in Row 2

Row 2 show how much each co-founder owns of the company. You can change all the numbers in the spreadsheet and it will automatically update.

Good to know

Please read this question (spanish translation) if you are unfamiliar with equity division, it is a completely different approach but a must-read which should be considered whenever work and responsibilities among co-founders is quite similar. Also, have a look at OnStartups Q&A site for many interesting information.

I’ve created a simple yet powerful free online tool to convert any image or file into a Base64 encoded string. The tool works by either providing a URL to a file or by uploading your file directly.

Why should you base64 encode?

Base64 encoding allows you to embed media into your HTML, CSS or JavaScript files which means you save one or more server requests. Keeping your website with as fewer requests as possible is one of the best ways of loading websites faster.

When not to base64 encode?

If your file is bigger than 20KB or appears in several pages of your site then it is best to load it as a separate file and let the user’s browser cache it.

Extra features

Apart from providing you the code to embed into your project, I’ve also made available copy-paste codes already with the base64 string in it so if you want to embed your code as a favicon, an image, JavaScript file, CSS sprite map or CSS image you are just a few keystrokes away:

Base64 encoder website

Ok, enough talking, here’s the link to the tool:

Online Base64 encoder

Kohana’s official documentation is pretty complete and useful as well as well written. I have been studying it for a few days but wanted to read the tutorials also whenever I had no Internet connectivity. Searching on the Internet for PDFs or ePubs on Kohana didn’t really show much so I developed a little tool that extracts the official documentation and outputs it in one single file so you can read the official Kohana guide anywhere anytime.

You can download the documentation both in ePub, PDF and HTML formats. The ePub format does not have the images in it (I used an online tool and it removed them, there aren’t a lot anyway) but works great in the iPad, Kindle and Android tablets.

Kohana 3.2 Documentation in PDF format (mirror) (3.3MB)

Kohana 3.2 Documentation in ePub format (mirror) (240KB)

Kohana 3.2 Documentation in HTML format (mirror) (310KB)

I have done my best with the crawling tool but it hasn’t been 100% tested so some sections may have been skipped, please let me know in the comments if that’s the case.

Thanks to all the contributors to the Kohana Documentation, as I am still learning Kohana accept this as my little contribution to the framework :)

I mostly use the iPad for reading email, news and blogs although I am still perplexed at how few apps there are for actually doing some work. Well, to be honest, there are many apps to do some work. But I believe in platform-agnostic web-apps or SAAS to be the future of our world and the amount, variety and features of current web apps for web development is still quite scarce.

One of the big gaps that I found was regarding code editors. The lack of fast symbol typing in the keyboard is very frustrating and slow (you need to use iOS’s default keyboard and type 3 keys just to get a “<” sign, plus another one to get back). This is why I came up with a proof of concept on additional keyboard rows with extra keys for touch screen devices and added all symbols frequently used for coding and programming so you don’t need to keep switching from one keyboard set to another. It has been optimised for the iPad in portrait mode although with some responsive CSS queries and device detection it can be adapted anywhere.

The code itself is basic HTML, CSS and a bit of JavaScript and jQuery. I’ve kept it simple to aid scalability and customisation. This is how it looks:

Demo and download

Click the following link to open the Code Editor. To test it properly you will need an iPad in portrait mode.

iPad web-based code editor with extra symbols keyboard

License

Public Domain, keeping the Internet open. You can use it commercially and distribute it as much as you want without being forced to credit the author.

Changelog

If you have developed it further send me an email and I will include it in the next release and you in the Credits.

8 February 2012 (v1.0)

• First release

If you haven’t seen my iPad HTML/CSS template you must see it now.

Si nos falta el tiempo y el dinero para poder ejecutar un estudio de usabilidad de nuestra página web siempre podemos recurrir a sistemas caseros que son rápidos y económicos.

Escoger la lista de perfiles

Muchos usuarios visitarán nuestra web en el futuro. Entre éstos tenemos que identificar los diferentes perfiles de usuario (llamados “personas” en inglés) y de estos perfiles escoger los dos o tres principales, si hay algo que está claro es que la página web nunca será del agrado de todos nuestros usuarios ya que es imposible que agrade a todo el mundo aunque sí que podemos adaptarla a la mayoría que nos interese. Un perfil de usuario sería algo así:

Persona de entre 25 y 35 años con poder adquisitivo medio-alto, educación universitaria, que vive en una ciudad, no tiene hijos, con conocimientos medios de informática, que navega entre 30 minutos y 2 horas al día por Internet vía un ordenador portátil o de escritorio. Realiza actividades de ocio entre 4 y 8 veces al mes.

Una vez tengamos los perfiles principales deberemos encontrar gente que se adapte a ellos. Si nuestro presupuesto es bajo podemos recurrir a favores de amigos, familiares y conocidos. Lo importante es que puedan estar presencialmente con nosotros.

Test de usabilidad

Una vez tengamos una lista de los diferentes perfiles de usuario, situaremos al primero delante del ordenador y dejaremos unos minutos para que el usuario se acomode y familiarice con él, encuentre el icono del navegador web y lo abra. Si puedes realizar el test desde el ordenador del usuario muchísimo mejor.

Misión

El siguiente paso es el más importante y es que sólo le encomendamos una misión no más larga que una oración y cuya tarea debe durar menos de 15-30 minutos (podemos encomendarle varias misiones, una a una, pero una sola a la vez). Por ejemplo:

Visita la página xaviesteve.com y compra el aparato de música de entre 100 y 200 euros que más te guste.

En esa frase queda implícito que el usuario deberá: buscar el producto, registrarse para poder comprar, confirmar un enlace de activación de la cuenta en su correo, hacer click en Comprar, introducir sus datos de la tarjeta de crédito (una vez saque su tarjeta de crédito le proporcionaremos una nuestra de prueba) y finalmente confirmar. Otro ejemplo sería:

Mañana quieres ir a cenar a un restaurante japonés, haz una reserva para 2 en la web helloplan.com y encuentra donde está ubicado.

Nuestro papel

Lo importante es que el usuario lo deduzca todo por él mismo sin que tengamos que explicarle nada. Si nos hace preguntas le diremos que no se preocupe, que intente descubrirlo él mismo. Si vemos que duda demasiado o empieza a frustrarse le ayudaremos.

Pensando en voz alta

Al usuario le pediremos que piense en voz alta durante el proceso, es decir, que vaya contando todo lo que piensa, hace y por qué, por ejemplo:

Espero a que la página se cargue, a ver… ¡Ahá! Aquí pone Electrónica, los aparatos de música estarán dentro, ah no, hay otro que se llama Música, debe ser este mejor, hago clic… Ok este es, bien, a ver, aquí centrado hay las mejore ofertas… aquí a la izquierda me sale una lista con subcategorías… voy a clicar aquí…

Analizar con detalle

Si disponemos de una cámara de vídeo o programa de screencasts, nos ayudará muchísimo para poder analizar mas tarde cualquier duda que el usuario haya podido tener y descurir las dudas y micro-gestos que ha tenido y que ocurren en milisegundos (estas son las que cuestan más de detectar y las que tenemos que solucionar) o aquellas donde el usuario duda de entre varias opciones.

Objetivo del test

Nuestro objetivo final del test de usabilidad es detectar qué podemos cambiar o mejorar para que nuestros usuarios reales tengan que pensar o dudar lo mínimo. Cuanto menos hagamos pensar a nuestro usuario menor será su nivel de frustración y mayor el de autorealización. Una web usable es aquella donde el usuario cumple su objetivo por intuición sin tener que pensar demasiado. Para acabar, una cita de uno de los genios en usabilidad web, os recomiendo su libro.

Una web poco usable no es aquella web que no se usará pero sí aquella que se usará menos.
–Steve Krug en ‘Don’t make me Think’

iPad/iPhone template made in pure HTML and CSS (no JavaScript needed) that works perfectly on any modern browser (iPad (including iPad 3), iPhone, tablets, mobiles, laptops, etc.). The template uses responsive queries to hide the sidebar in iPad portrait mode and in the iPhone and smaller screens (you can disable that easily if you want to).

Here’s how it looks in the iPhone (click image to view full size):

This template is the perfect start for any front-end or back-end developer to build complex web apps without spending time on developing the main structure. Or even to create a mobile version of your current site.

The code has been developed so that there is no “divitis”, completely optimized, semantically correct and minimal HTML code. There are no images or animations at all, everything has been coded using some of the latest CSS3 available features and tested it in most modern browsers. Ready for you to download and start developing. These are some of the template’s features:

Features

App-ready

You can install this template as a normal App Store app, removing the Safari top navigation bar and enjoying the full screen.

Responsive Web Design

Hides the sidebar in iPhone, mobiles and iPad portrait mode. Adapts nicely to the full screen.

No images

The whole template has been built without requiring any images which means less server queries and increased bandwidth savings.

Heading styles

Two different heading styles: the main black one and the smaller blueish.

Anchor texts (links)

The whole clickable area is active so that even fat fingers can click comfortably.

Scrollable

Both the sidebar and the main content can be scrolled separately in the iPad and other touch screen tablets.

Tables

Fully flexible and liquid tables that allow you to include more information while keeping the same look and feel as in any Apple app.

Forms

Fillable textboxes, password fields, select dropdowns and buttons.

Fully tested in several devices

Works great in: iPhone 4, iPhone 3GS, iPad 2, Samsung Galaxy Tab (GT-P7510), Safari 5, Chrome 16 and Firefox 9.

Graceful degradation: IE9 (no rounded corners), IE8.

Not working: (none tested yet).

License

The best of it, I am releasing it under a Public Domain license. This means it is free to use as many times as you want (even for commercial projects) and you do not need to give me credits if you don’t want to. I would appreciate if you do so or if you send me a link to your creation, it will motivate me to develop it further and make me happy.

Download the template

To download the most recent version of the Xavi iPad template click the link below:

Xavi iPad template

And then go to File > Save as… The CSS has been coded in a <style> tag to keep everything in a single file.

For a better experience open the template in an iPad and test how cool Responsive Web Design is by rotating the iPad.

Comments, improvements, feedback, feature requests and bugs

If you have any comments, doubts or would like to point out a bug or a feature request you can write a comment below or tweet me at @xaviesteve in Twitter. If you code your own improvements and would like to share them with everyone let me know and I will include them in the next release. Bear in mind that the purpose of this plugin is to remain as simple as possible so drag’n'drops, special effects and lengthy scripts should be avoided.

Changelog

Version 1.0 (31 January 2012)

• Moved sidebar to the bottom of the HTML.
• Fixed content header left and right link clickable area
• Added commented <link rel="stylesheet">, <script> and favicon for faster development
• Disabled the callout shown when you touch and hold a touch target (thanks 185)
• Added -webkit-user-select: none (thanks Josiah)

Version 0.9b (27 January 2012)

• First release.

I’m currently developing a WordPress plugin that needs to show a virtual page generated by my plugin (such as a form or a message) and I wanted to avoid adding a new Page and modifying the current WordPress installation, so every plugin form, message or page had to be generated on the fly without touching the database.

Some WordPress plugins or themes create new pages in the website’s installation to add advanced functionalities. As an example, WooCommerce adds new pages to the wp_posts database that help set up the website to work with it. In my opinion this is a mess, if you already have a WordPress website running, installing this theme/plugin will mess with your current page structures and whenever you want to uninstall it or deactivate it you will need to manually remove those pages created previously by the plugin. I once wanted to test an advanced WordPress theme that deleted all the current pages I had… that was the most annoying thing ever, since I already had written the content for the website and lost it (yes, I should have backed up but, who would expect a theme to delete and install pages without even a warning?).

A few weeks ago I posted a question in WordPress StackExchange but couldn’t really get the answer I was looking for, there was this solution to create fake posts but I wanted generate unlimited pages with simple code as possible and using friendly URLs like: http://example.com/?plugin_page=myfakepage (I could then easily use mod_rewrite to make them look even better). Today I kept investigating and finally came with the solution.

Step by step guide

We will load the page at http://example.com/ but modify its title, content and select a blank theme template so it looks like a complete new page.

Custom page content

First of all we create a function that will overwrite the content:

function plugin_myown_content() {
  $return = '
<p>Fill in this form:</p>
<form action="?" method="post">
  <input type="text" name="foo" value="bar" />
  <input type="submit" value="Connect" />
</form>
';
  return $return;
}

Custom page title

Now we overwrite the title of the page with this function:

function plugin_myown_title() {
  return "On the fly foobar form";
}

Default page template

With this function we force WordPress to load the default page template of the current active theme:

function plugin_myown_template() {
  include(TEMPLATEPATH."/page.php");
  exit;
}

Hook actions and filters

Finally, we add a simple ifto check if the user is requesting the plugin’s fake page and run WordPress hooks to load the 3 functions mentioned before and force WordPress into displaying the virtual page we have just generated.

if ($_GET['plugin_page'] == "myfakepage") {
  add_filter('the_title','plugin_myown_title');
  add_filter('the_content','plugin_myown_content');
  add_action('template_redirect', 'plugin_myown_template');
}

The code is pretty basic, from here you can add your desired PHP code to make it do whatever you want. You can also add more hooks to customize the page even further. I hope you get the idea. This code has been tested with the latest version of WordPress (3.3.1).

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

1. Download the Starter Theme
2. Add TimThumb
3. Then grab snippets from WP Snippets
4. 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

• Admin Helper
• All-in-one SEO
• Google XML Sitemap
• HTML Sitemap

Related posts

• WordPress code snippets, tricks and cheat sheet
• WordPress Performance

Photo by CoffeGeek