Author: TheSmithy

Staging sites and SEO

TheSmithy

Set up staging sites without hurting SEO

Duplicate content on the staging and live site may hurt the SEO ranking of your live website. To prevent this do one or more of the following:

  • Add a robots.txt file to the roots of the staging site.
    Prevent indexing of entire site:

    User-agent: *
Disallow: /
  • Restrict access with IP address restrictions

WordPress Custom colors in TinyMCE editor

TheSmithy

Source: HOW TO ADD CUSTOM COLOURS TO TINYMCE 4 IN WORDPRESS 3.9+

function my_mce4_options( $init ) {
	$default_colours = '
		"000000", "Zwart"
		';
	$custom_colours = '
		"959c51", "Groen",
		"754c24", "Bruin",
		"e89638", "Oranje",
		"5796b5", "Blauw"
		';
	$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
	$init['textcolor_rows'] = 1;
	$init['textcolor_cols'] = 5;
	return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Retina Sprites

TheSmithy

Updated June 3 2015

1. Make sure you have all png images in both the normal and the retina version.

2. Make sure the retina versions are exactly 2x bigger than the normal versions

3. Create 2 zip files. 1 for the normal images and 1 for the retina versions

4. Got to http://spritegen.website-performance.org/

5. Upload the normal zip file. Choose offset of 25px. Copy the css and download the file
Update: because of some Safari bug it may be better to use 50px for the normal and 100px for the @2x sprite

Drag the images to the generator. Choose padding of 5px. Choose a vertical layout. Click downloads and save the sprite and the stylesheet.

6. Upload the retina zip file. Choose offset of 50px. Do the same for the retina images, but choose a padding of 10px. Copy the css and download the file

Note 1: Read More

Optimizing WordPress

TheSmithy

This post is meant to be a log book of optimization tricks and how they affect performance of my Roots 7.0 installation

Note: YSlow, Pagespeed etc. complained about compressing with gzip. If your server runs on Apache below 2.3.7 (as was the case with me) remove the <IfModule mod_filter.c></If> in .htacces (under Compression). That solved it for me

Configuration 1: Read More

Fonts

TheSmithy

Source: awwwards.com/20-best-web-fonts-from-google-web-fonts-and-font-face

Basically, there are two implementation models:

1. Web font embedding services

2. Embedding fonts using the @font-face rule

Web font embedding services

Google Web Fonts (GWF) or Typekit are systems which allow the use of fonts hosted on their servers. One of the most valued characteristics of GWF is the option to download a desktop version of the fonts for use in the project design phase. Read More

WordPress – Localized

TheSmithy

A localized version (in this example Dutch) of WordPress is basically the same as the normal WordPress except for:

  • includes/version.php -> contains aan extra line at the end with 
    $wp_local_package = 'nl_NL';
  • The wp-content/languages folder

Basically, all you need to do is: Read More

Sublime Text 2: synchronize packages with Dropbox

TheSmithy

How to create symlinks to existing packages in Dropbox after fresh install of Sublime:
– Open sublime and close it again.
– Go to appdata/roaming/sublime

– For Sublime 2: remove the package folders: Installed Packages, Pristine Packages and Packages

– For Sublime 3: remove the package folders: Installed Packages and Packages
– Open cmd (as admin) and do this for the removed ‘Installed packages’. Repeat for the other packages

mklink /D "Installed Packages" "C:\path\to\Dropbox\appdata\sublime\Installed Packages"