WordPress Essentials

Reset Admin Password through FTP

1. Log in to your site through FTP and open functions.php.
2. Add this code at the beginning, after the first <?php:

wp_set_password( 'password', 1 );

3. Enter a new password for the main admin user. “1” is the user ID number.
4.Remove this code or it will reset your password every time you try to log in.

Basic WordPress .htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
# END WordPress

Robot.txt for WordPress

User-agent: *
Disallow: /cgi-bin/
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins/
Disallow: /wp-content/cache/
Disallow: /wp-content/themes/
Disallow: /wp-login.php
Disallow: /wp-register.php

Child Theme

Not quite shortcode but, do yourself right when working with WordPress and make a
child theme before you do anything to modify your WordPress CSS. This will keep your custom CSS in a separate folder that will not be affected when you update the theme. For this illustration we will reference the Twenty Eleven theme.

  1. Go into your installed WordPress and make a folder in /wp-content/themes/ and name it something that relates to your theme, maybe “childof2011theme” if you are using the Twenty Eleven Theme that comes with WordPress.
  2. Create a new text file and name it style.css, then copy and paste the following: /* Theme Name: Twenty Eleven Child Theme URI: http://your_url.com/ Description: Child theme for the Twenty Eleven theme Author: Your Name Author URI: http://your_url.com/ Template: twentyeleven Version: 0.1.0 */ @import url(“../twentyeleven/style.css”);
  3. The last line, @import url(“../your _theme/style.css”); is the most important part of making a child theme. Change “your _theme” to match the name of the theme that you are making a child.
  4. Log into your WordPress Dashboard and go to Appearance → Themes
  5. Activate your child theme, in this case named “Twenty Eleven Child”

Shortcode to display gallery images full size

If you need your WordPress gallery to display images full size use this shortcode. Change the xxx to the your desired image Attachment ID which can be found in the Media Library for each image. This works well if you have animated and / or transparent GIFs because as of WordPress 3.5 thumbnails of GIFs do not retain transparency nor will they animate.






Valid values include “thumbnail”, “medium”, “large”, “full”

CSS to turn off WordPress home page title

.home .entry-title { display: none; }

Parallax background for WordPress using Web-Features.net

  1. Go to Web-Features.net
  2. Choose the first option, Full Scale Animated Background.
  3. Choose a color from the Background Color panel.
  4. Click the “New Layer” icon at the bottom of the Layers panel and either specify the url to your image or select an image from the images gallery.
  5. Select to repeat on the x-axis, y-axis or repeat both X/Y option) and set alternate offset if needed.
  6. To turn off repeat just select the Image option (Pattern is selected by default).
  7. In the left-hand panel you define your image’s behavior. You can make it react to mouse cursor movements and/or scrolling.
  8. In Mouse Move options their are 3 settings: Direction, Move on and Speed. The Direction settings allow you to move with or opposite your mouse cursor. The Move on setting specify whether your image moves on the x-axis, y-axis or both. The Speed settings specify how fast you want the image to move.
  9. Once you’re done select Get Embed Code and Copy to Clipboard.
  10. FTP to header.php and paste the code above </head>.

Logic Pro X


The A key toggles Automation view.

Automation Event List

To set exact numeric values to automation such as volume use the Automation Event List.
For some reason Logic has hidden access to the Automation Event List window leaving it only accessible via key-command.
The default key is Command-Control-E.

1. More than 1 region must be selected before using Command-Control-E.
NOTE: The widow is extremely volatile and will switch to a floating List Editor if you deselect the regions.
Close the compromised window, select the regions again and applying Command-Control-E.

2. The settings are essentially MIDI events, rather than 0-100 the range is 0-127.
3. The Value for a Volume of 0db is 90.

Copy Automation

1. Set the Locator to 0 and select the track to copy from.
2. Change to the Automation Select Tool and copy desired Automation Points.
3. Select the track you want to apply automation and paste using the Automation Select Tool.

Track Automation VS. Region Automation

If you set automation a part of the song that will be moved around or copied, use Region Automation.
If you are automating a fixed part of the song, perhaps a fade at the end, use Track Automation.
Track and Region automation can be moved or copied between the two by right clicking the desired region(s) and setting the Automation parameters, found near the bottom of the contextual menu list.



Group tracks on the Mixer to edit multiple Comp Takes

Note: All track Takes MUST be the same length to be effectively added to a group.

1. Open the mixer and select desired tracks to group.

Use Shift or Command to select multiple tracks.

2. Add tracks to an existing group or add a new group (up to 32).

Open Group Settings.

3. Open Group Settings. Confirm desired group is active and select Editing (Selection).

Mixer Group Settings window.


Takes Folder Quick Swipe

Use Option Q to toggle between Scissors and Quick Swipe on a selected Takes folder.


Zoom Tracks

The Z key will fit the selected tracks to the window or fit all tracks to the window if no tracks are selected.


Make ALL Tracks the Same Height

Click between 2 Track Headers holding the Shift key to make all tracks the same height.
Track height is based on the Vertical Auto Zoom button on the top right.

Track Headers
Track Headers
Vertical Auto Zoom Button
Vertical Auto Zoom Button


Import Tracks and Track Settings from another Project

Go to File>Import>Logic Projects… and locate the Project that has the track information you want to add to your current Project.
Select the checkbox for the settings of each track you want to import.
Click the Add button.

Import Project Settings
Import Project Settings


Time Stretch

  1. Get the 1 on the 1.
  2. Open the Editor for the desired track.
  3. Click on the Flex button and select a type. Start with rhythmic.
  4. Open Inspector column.
  5. Under Region: MIDI Thru set Quantize to 1/4 notes. This is a good starting point.
  6. If anything sounds off open the track’s Editor window and adjust the Flex Hit Points by selecting and moving the Hit Point or turning the Hit Point off by clicking on the X at the top of the point.
Logic X Hit Point
Logic X Hit Point
Logic X Quantize Amount
Logic X Quantize Amount


Get Drummer to play along

If Drummer is off time you may need to turn on Plug-In Latency.
Open Logic Pro>Preferences>Audio>General in the middle of the window is Plug-in Latency and confirm if Compensation is enabled.
NOTE: This is a universal preference. If you use Drummer on other songs recorded without Latency Compensation this will effect them and therefore should be turned off until adjustments are made to the audio placement.

Logic X Plugin Latency
Logic X Plugin Latency.

Photoshop: Masking Hair

Clients and friends alike regularly ask me to help them superimpose the image of a person onto another background.


The first problem is hair and the opacity between the hairs. Adobe Photoshop offers a tool called the “magic wand”. While this tool can get you a quick idea of the composition, you will soon realize the selection is rarely perfect, even if you “feather” the selection to soften the edges.


This tutorial will get you terrific results using alpha channels that have been available in Photoshop since it’s earliest days.


Thanks to Ed Layne for putting this together for me.


Good luck and good imaging!


1. Select the Blue Channel (channel with the highest contrast).
2. With the magic wand tool select the background.
3. Invert the selection (command+shift+i).
4. With the marquee tool, hold down the option key to remove the edges of the hair from your selection.

5. From the Paths window pull-down menu, select Make Work Path… and deselect the Work Path.

6. With the marquee tool, select the area to be masked, loose hair around head.
7. Select the Blue Channel and copy the selected area.

8. Create a new alpha channel and paste your selection into the new alpha channel.
9. Choose the Burn Tool to darken the hair to nearly black (set shadows with exposure less than 18% in the adjustment palette).
10. Choose the Dodge Tool to lighten the background to white, careful to allow loose hair to remain grey.


11. Invert your selection (command+i) and deselect (command+d).

12. Turn on your Work Path, select the path, Load Path As Selection and fill with white.
13. Paint areas of face and hair that were not burned to white.

14. Load your alpha channel as a selection.

15. Select your RGB channel and extract your image.

16. Once your image is placed into your new image temporarily turn on the stroke in your adjustment layers palette to find and erase any ghost pixels.

HTML Special Characters


© Copy Right &#169;
℗ Published &#8471;
® Registered &#174;
™ Trade Mark &amp#8482;
№ Number &#8470;
¼ Quarter &frac14;
½ Half &frac12;
¾ Three Quarters &frac34;
¿ Inverted Question Mark &#191;
¡ Inverted Exclamation Mark &#161;
& Ampersand &amp;
¢ Cent 162;
€ Euro &#8364;
£ Pound &#163;
| Pipe &#124;
¦ Broken Pipe &#166;
― Horizontal Bar &#8213;
[ Left Bracket &#91;
] Right Bracket &#93;
‘ Single Quote &amp#39;
• Bullet &#8226;
° Degree Sign &#176;
○ Hollow Bullet &#9675;
· Middle Dot &#183;
← Left Arrow &#8592;
→ Right Arrow &#8594;
↑ Up Arrow &#8593;
↓ Down Arrow &#8595;
◄ Left Delta &#9668;
► Right Delta &#9658;
▲ Up Delta &#9650;
« Left Angle Double Quote &#171;
» Right Angle Double Quote &#187;
‹ Left Angle Quote &#8249;
› Right Angle Quote &#8250;
> Greater Than &#62;
< Less Than &#60;
☺ Smiley &#9786;
☻ Grey Smiley &#9787;
♠ Spade &#9824;
♣ Club &#9827;
♥ Heart &#9829;
♦ Diamond &#9830;
♪ Eighth Note &#9834;
♫ Beamed Eighth Note &#9835;
π pi &#960;
∞ Infinity &#8734;
√ Square Root &#8730;
☼ Sun &#9788;
♀ Female &#9792;
♂ Male &#9794;
◊ Hollow Diamond &#9674;
† Cross &#8224;
Ω Omega &#8486;
⌂ House &#8962;

CSS / HTML Cheat Sheet

No Break Space


CSS class vs. ID

The ID selector specifies a style for a unique element, defined with a “#”. Do not start an ID with a number!
The Class selector specifies a style for a group of elements, defined with a “.”


Put the offending style into brackets [ ].
[.stylename] {font-size: 12px;}


[.nav-menu .navmenu] {
overflow: none !important;

Disable links

pointer-events: none !important;
cursor: default !important;

Make an .htaccess file with these parameters to display the entire file name of content in a directory without using an index file

Options +Indexes
IndexOptions FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=*

Basic text link

a:link {text-decoration: none; color: #000;}
a:visited {text-decoration: none; color: #000;}
a:hover {text-decoration: none; color: #777;}
a:active {text-decoration: none; color: #777;}

For an alternate link style

a.alt:link {text-decoration: none; color: #000; font-weight:bold;}
a.alt:visited {text-decoration: none; color: #000; font-weight:bold;}
a.alt:hover {text-decoration: none; color: #777; font-weight:bold;}
a.alt:active {text-decoration: none; color: #777; font-weight:bold;}
and the HTML is:
<a href=”yourlink.html” class=”alt”>link</a>


<a href=”mailto:johndoe@website.com”>Contact John</a>

Inline Style

<div style=”margin-left:50px;”></div>
or add a style to any tag
<p style=”margin-left:50px;”></p>

Text Styling

font-size: 12px;
font-weight: bold;
text-decoration: none;
color: #000;
letter-spacing: 0px;
line-height: 0px;

Horizontal Rule

hr {background:#000; width:100px; height: 1px;}

Centering can be frustrating! Put this in your HTML

<div align=”center”></div>


<span class=“xxx”></span>

Text Shadow

rgba is: red (0-255), green (0-255), blue (0-255), alpha (0.0-1)
The 3 positions (shown as px) are: X axis for centering left and right, Y axis for centering top and bottom, and the amount of blur. You can use negative numbers for the position and even apply multiple shadows at different positions and opacity for effect!
text-shadow: 1px 1px .5px rgba(0, 0, 0, 0.5);

Box Shadows – Make sure you cover all of the browsers!

-moz-box-shadow: 3px 3px 4px #444;
-webkit-box-shadow: 3px 3px 4px #444;
box-shadow: 3px 3px 4px #444;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′)”;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color=’#444444′);

Box Shadows OFF!

-moz-box-shadow: 0px 0px 0px #444 !important;
-webkit-box-shadow: 0px 0px 0px #444 !important;
box-shadow: 0px 0px 0px #444 !important;
-ms-filter: “progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′)” !important;
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=0, Direction=135, Color=’#444444′) !important;

Leave yourself notes in CSS

/* Enclosing a reminder about your CSS code within a /* */ comment is a great idea */

Leave yourself notes in HTML

<!– Enclosing a reminder about your CSS code within a <!– –> comment is a great idea –>

CSS Override (add this to the end of a CSS string to override any existing CSS)


Want to turn an element off?

display: none;

Turn off that hyphenation!

-webkit-hyphens: none;
-moz-hyphens: none;
hyphens: none;
word-wrap: normal;

Gradient Backgrounds

background: rgb(110,0,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(110,0,0,1) 0%, rgba(176,0,16,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(110,0,0,1)), color-stop(100%,rgba(176,0,16,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* IE10+ */
background: linear-gradient(top bottom, rgba(110,0,0,1) 0%,rgba(176,0,16,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#6e0000′, endColorstr=’#b00010′,GradientType=0 ); /* IE6-9 */

Background Image No-Repeat

background-image: url(‘images/logo.png’);
background-repeat: no-repeat;

Float & Clear

If you float left or right you will generally want to clear the float so that text will wrap under the object you are floating. Unfortunately, there is still no float center.
<div style=”float:left;”>&nbsp;</div>
<div style=”float:right;”>&nbsp;</div>
<div style=”clear:left;”>&nbsp;</div>
<div style=”clear:right;”>&nbsp;</div>
<div style=”clear:both;”>&nbsp;</div>

Round Corners or Radius

-moz-border-radius:5px 5px 5px 5px;
-webkit-border-radius:5px 5px 5px 5px;
border-radius:5px 5px 5px 5px;
border:1px solid #fff;

Text Selection Color

::-moz-selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;

::selection {
background: none repeat scroll 0% 0% #888888;
color: #fff;

Woocommerce Variations (Sizes, Colors, etc.)

Go to the Product

  1. Scroll to Product Data.
  2. Change drop-down menu to Variable product.


  1. Select the Attributes tab on the left.
  2. Change drop-down menu to Custom product attributes and click the Add button.
  3. Name the attribute. In this case “Sizes”.
  4. Enter the Values separated by a “pipe” |. In this case “Small | Medium | Large”.
  5. Select Visible on the product page.
  6. Select Used for variations.
  7. Save Attributes.


Here are some vatriations you can copy and paste

  • Small | Medium | Large | XLarge | XXLarge
  • Red | White | Blue | Black




You can have different information for each variation, i.e. price.
For this example I will assume all variations will share information.

  1. Select the Variations tab on the left.
  2. Change drop-down menu to Add variations and click the Go button.
  3. Select a Default Form Value. In this case “Small”.
  4. You can select specific variations. For the example “Any Sizes” is selected.
  5. Click on Expand variation or click on the down arrow when you rollover the “Any Sizes” variation.

Here are some vatriations you can copy and paste

  1. Small | Medium | Large | XLarge | XXLarge
  2. Red | White | Blue | Black

Woocommerce Variations window closed



Variations – expanded

  1. Regular Price is the only required field.
  2. If there is specific differences in variations, i.e. price, weight, stock, that will affect price or shipping select Add variation for each difference.

Woocommerce Variations window open

Woocommerce Products Step-by-Step

From the left side of your wp-admin page click on Products then choose Add Products or select the product you want to edit.

Center Column

  1. Add Product Name
  2. Ignore the main text widow
  3. Fill in Product Short Description

Center Column > Product Data – Simple Product

  1. Choose Simple Product from the drop-down menu
  2. Select the General tab
  3. SKU and Price must be filled in
  4. Select the Inventory tab
  5. Confirm Stock status is In stock
  6. Select the Shipping tab
  7. Input Weight and Dimensions
  8. Apply a Shipping class (I have defined this on Products > Shipping Classes and set the cost of each rate on Woocommerce > Settings)
  9. click on the Shipping tab then click the link Flat Rate below the tab.

Center Column > Product Data – Variable Product

Use this if the product has variations such as different sizes or colors.

All of the above Product Data for a simple product still applies.

  1. Choose Variable Product from the drop-down menu
  2. Select Attributes
  3. Click the Add button for Custom Product Attributes
  4. Name the attribute and give it values separated by pipes. i.e. Small|Medium|Large
  5. Check the Used for variations box
  6. Select Variations
  7. Choose Add Variations and click the Go button for each variation
  8. Choose a default variation
  9. From the drop-down select each variation
  10. On the right of the drop-down there are 3 options. The three bar icon is to arrange the variations. Up arrow is to expand the variation window to edit options. Remove should be clear.
  11. Click the expand icon
  12. Price is  the only required field

Right Column

  1. Select all applicable Product Categories. (These are defined under Products > Categories)
  2. Enter Product Tags. These are keywords that will help filter this product
  3. Upload your product image. Images should be at least 1000×1000 pixels. Square is easiest to manage.
  4. If there are multiple images add the remaining images to Product Gallery. You can move these images to rearrange.

Woocommerce Cheat Sheet

Add CSS only on the Shop page

change .xxx to the specific CSS element you want to change

.archive.post-type-archive-product.woocommerce .xxx {
background-color: pink;

Increase Your PHP Memory

Add this to wp-config.php

// Increase PHP Memory as recommended by Woocommerce
define( ‘WP_MEMORY_LIMIT’, ’64M’ );

Move WooCommerce Product Tabs under Product Summary

Add this to functions.php

// Remove tabs from the original location
remove_action( ‘woocommerce_after_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 10 );


// Insert tabs under Product Summary
add_action( ‘woocommerce_single_product_summary’, ‘woocommerce_output_product_data_tabs’, 60 );

Remove sidebar from Woocommerce

Remove this from wp-content/plugins/woocommerce/single-product.php

* woocommerce_sidebar hook
* @hooked woocommerce_get_sidebar – 10

Remove this from wp-content/plugins/woocommerce/archive-product.php

* woocommerce_sidebar hook
* @hooked woocommerce_get_sidebar – 10

Add this to style.css

#content-woocommerce {

Change the number of Woocommerce related products and columns
Add this to functions.php

* Change number of related products on product page
* Set your own value for ‘posts_per_page’
function woo_related_products_limit() {
global $product;

$args[‘posts_per_page’] = 6;
return $args;
add_filter( ‘woocommerce_output_related_products_args’, ‘jk_related_products_args’ );
function jk_related_products_args( $args ) {
$args[‘posts_per_page’] = 3; // 3 related products
$args[‘columns’] = 3; // arranged in 3 columns
return $args;

Remove Woocommerce checkout fields

// Woo remove checkout fields

add_filter( ‘woocommerce_checkout_fields’, ‘remove_woo_fields’, 9999 );
function remove_woo_fields( $woo_checkout_fields_array ) {
// leave these fields in checkout
// unset( $woo_checkout_fields_array[‘billing’][‘billing_first_name’] );
// unset( $woo_checkout_fields_array[‘billing’][‘billing_last_name’] );
// unset( $woo_checkout_fields_array[‘billing’][‘billing_address_1’] );
// unset( $woo_checkout_fields_array[‘billing’][‘billing_phone’] );
// unset( $woo_checkout_fields_array[‘billing’][‘billing_email’] );
// unset( $woo_checkout_fields_array[‘order’][‘order_comments’] ); // remove order notes
// unset( $woo_checkout_fields_array[‘billing’][‘billing_city’] );
// unset( $woo_checkout_fields_array[‘billing’][‘billing_state’] ); // remove state field
// unset( $woo_checkout_fields_array[‘billing’][‘billing_postcode’] ); // remove zip code field
// remove the billing fields below
unset( $woo_checkout_fields_array[‘billing’][‘billing_company’] ); // remove company field
unset( $woo_checkout_fields_array[‘billing’][‘billing_country’] );
unset( $woo_checkout_fields_array[‘billing’][‘billing_address_2’] );
return $woo_checkout_fields_array;

Require Woocommerce checkout fields

// Woo required checkout fields
add_filter(‘woocommerce_billing_fields’, ‘force_billing_fields’, 1000, 1);
function force_billing_fields($fields) {
  $fields[‘billing_first_name’][‘required’] = true;
  $fields[‘billing_last_name’][‘required’] = true;
  $fields[‘billing_address_1’][‘required’] = false;
  $fields[‘billing_city’][‘required’] = false;
  $fields[‘billing_postcode’][‘required’] = false;
  $fields[‘billing_country’][‘required’] = false;
  $fields[‘billing_state’][‘required’] = false;
  $fields[‘billing_email’][‘required’] = true;
  $fields[‘billing_phone’][‘required’] = true;
  return $fields;


Field names for Woocommerce checkout

Shipping Fields

Order Fields