Category Archives: Uncategorized

Customise WordPress: environment

get_template_part

Assuming the theme folder is wp-content/themes, that the parent theme is twentyten, and the child theme is twentytenchild, then the following code –

get_template_part( 'content', get_post_format() );

that will look for files like content-link.php, content-gallery.php and so on.  In fact, it will do a PHP require() for the first file that exists among these, in this priority:

  1. wp-content/themes/twentytenchild/content-link.php
  2. wp-content/themes/twentyten/content-link.php
  3. wp-content/themes/twentytenchild/content.php
  4. wp-content/themes/twentyten/content.php
  5. wp-content/themes/twentyten/index.php

Now, imagine you’re working on a child theme. You created content.php and content-gallery.php. You expect gallery posts to pick up content-gallery.php, which is correct.

You also expect a link post to pick up your content.php file because there is no content-link.php in your child theme, right? This is also correct, unless your parent theme has a content-link.php file, which will be of higher priority to the template loader, despite the child-parent relationship between the two themes.

It does make sense, otherwise a simple index.php file in your child theme would override all of the parent theme’s templates, because index.php is a fallback for everything. That would render child themes useless.

To use this function with subfolders in your theme directory, simply prepend the folder name before the slug.  For example, if you have a folder called “partials” in your theme directory and a template part called “content-page.php” in that sub-folder, you would use get_template_part() like this:

get_template_part( 'partials/content', 'page' );

Customise wooCommerce: remove shipping calculator from cart page.

In this example, your company offers free shipping, so you want to remove the shipping calculator from cart page.  The default layout is like:

131008p

And you don’t need the “Calculate Shipping” anymore.  What you need to do is:

  1. Create a woocommerce directory in your theme at the root if you haven’t already.
  2. Go to the woocommerce plugin folder under your site
    wp-content/plugins/woocommerce/templates/cart
  3. Find the cart.php template file.
  4. Copy that file to your woocommerce directory within your theme under the directory path (woocommerce/cart/cart.php) – Meaning you have to have a folder of cart within the woocommerce folder.
  5. This copy of cart.php now overrides the file in the plugin directory.
  6. Look at the bottom of the cart.php file that you are now editing. At the very bottom is the following code:

    131008q
    The part that says woocommerce_shipping_calculater can be moved around.

  7. Remove the woocommerce_shipping_calculater line.
Result:

131008o

Customise wooCommerce: move your title to above the thumbnail in product page.

In your product page, if you want to move the product title from

131008m

to

131008n

In this example, we want to move the product title out of the summary section and position it above the main product image or somewhere at the top of the page.  We need to look at the content-single-product.php template file.  Here are the two sections we we need to look at in that file:

131008r

The part that outputs the main product image is woocommerce_before_single_product_summary

The part that outputs the product title is woocommerce_single_product_summary

Let’s pull the title out of the summary block and place it in the block that precedes it so the product title is above the product images.  So, place this in your functions.php file or the custom functions file.

/*---Move Product Title*/
remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
add_action( 'woocommerce_before_single_product_summary', 'woocommerce_template_single_title', 5 );

See also Customising wooCommerce for more hints in how to organise these settings.

References

Most basic customisation seems impossible

Resize photo to larger size

Most people know to use software to adjust a photo to smaller size, or larger compression ratio, in order to reduce the file size.  Sometimes, we need do it the other way around, i.e., to adjust tolarger dimension. For example, to upload a picture to some sites, they may require that your pixel size can not be too small.

Freeware ImageMagick have this feature. Use the convert command in this package, you can convert image to larger size. There are several options to achieve the above aims:

-sample
-resample
-scale
-resize
-adaptive-resize
-thumbnail

resize

Example, -resize 400x300+20+30 (like the -scale and -sample) converts an input to an output image with pixel dimensions of 400x300. The +20+30 shifts the output by 20 pixels to the right and by 30 pixels to the bottom. There are a few differences to -scale:

  • -resize does support an additional setting of -filter (which should occur on the commandline before using -resize!).
  • -filter determines the exact algorithm to be used for the colors of added pixels in the case of magnification, or for the colors to be used for the remaining pixels when some of their neighbors are removed in case of reduction.
  • For a list of supported filters, simply run convert -list filter.
  • -filter point -resize 400x300 creates exactly the same result as -sample 400x300, but it runs still a bit slower.
  • If not set alongside (before) -resize, the conversion will silently default to -filter Lanczos which is slower, but which generates a much better quality (because it takes into account the colors of all surrounding pixels for any newly added ones) than -filter point produces (which uses the nearest neighbor rule to determine the color of a newly added pixels).

sample

Example, -sample 400x300 converts an input image to an output images which has the pixel dimensions of 400x300.  The differences to -resize:

  • -sample does not support additional setting of -filter-filter is simply ignored.
  • When magnifying (the input image size smaller than 400x300), pixels are replicated in blocks.
  • When reducing (the input image size larger than 400x300), pixels are sub-sampled with a very simple algorithm: some rows and columns are simply skipped over.
  • The geometry argument to -resize doesn’t support any offset part.
  • The output will never have more (different) colors than the input image had; it may have fewer colors though.

Therefore -sample is faster than -resize, but output quality is usually worse: you can easily get extreme blocking and aliasing effects in the resulting output.

scale

Example, -scale 400x300 produces the equivalent result (but is faster, because it avoids all the filter processing) as does using -filter box -resize 400x300. It also ignores any current -filter setting.

  • When reducing, it changes the image size simply by replacing pixel colors by averaging the respective input pixel colors together.
  • When magnifying, it simply replicates the respective input pixels for the required additional pixels.

adaptive-resize

Example, -adaptive-resize 400x300 does not support the offset part of geometry parameter and also ignores the -gravity setting.

  • It uses by default data-dependent triangulation when resizing (unless the resize method is overridden by additionally specifying -filter [something]).

thumbnail

Example, -thumbnail works just like -resize does, with a few differences:

  • It is optimized for speed.
  • It also removes any embedded color profiles to reduce the filesize of the thumbnails.
References

What the difference of sample/resample/scale/resize/adaptive-resize/thumbnail ImageMagick convert?

ImageMagick crop command not giving perfect result

WordPress overview

WordPress is a popular software for building websites. You can get a free account at wordpress.com and try it out.

Following created by Tracey Holinka of Chaos To Clarity™ gives you an overview.

/Volumes/HDA/Users/skwong/Documents/2013/09/misc/how-wordpress-works-600.jpg

WordPress Anatomy
  1. WordPress core has the main software files (php & javascript) & database (MySQL).
  2. Theme conrols the look and feel of your site. You can buy a theme or have a custom one created by yourself.
  3. Plugins add features and functionality beyond the core installation.

You need the WordPress core and a theme for WordPress to work. Plugins are optional.

How It Works Together
  1. Content is added to your website / blog through Administration Panel (part of the core).
  2. Everything you changed/entered are stored in a MySQL database.
  3. Your website shows the stored database content. The appearance is controlled by the Theme.

You may want to disable show or side widgets on specific pages.

To be cont’d…

References

how wordpress works

how wordpress works

25 Responsive WordPress Theme Tutorial

How to use WordPress Jetpack on localhost

After you installed the Jetpack plugin on localhost, you should ended up with something like:

phpmyadmin_jetpack1

When you click on “Connect to WordPress.com”, you will get error messages.  Jetpack requires a publicly accessible website in order to work.  The way we are going to make this work is making Jetpack believes that it has been connected to WordPress.

Steps
  1. Go to the plugin directory.  This depends on your installation, in my case:
    cd /MAMP/myDemo2/wp-content/plugins/jetpack
  2. Search file for the class definition of jetpack_data
    As I am using Mac (or Unix), I use:

    grep -R jetpack_data *
    ...
    class.jetpack-data.php:class Jetpack_Data {
    ...
  3. As in last step, found the file as class.jetpack-data.php, edit the file and make it always return true, in my example, I add a line and the file looks like:
    ...
    public static function get_access_token( $user_id = false ) {
    return true;
    ...

Then your Jetpack should now works.

This fix works for WP 3.6 + Jetpack 2.5

WordPress Plugin

Instead of changing the core of WordPress, you can add functionality with WordPress Plugins.  Plugin is a set of function(s), in PHP scripting language, that adds features / services to the WordPress , which can be seamlessly integrated with the weblog using access points and methods provided by the WordPress Plugin Application Program Interface (API).

Before you write a new plugin, search from the web to see if someone has already created a WordPress Plugin that suits your needs.

Pre-requisite: familiar with the basic functionality of WordPress, PHP programming.

Steps:
  1. Check Plugins and do a Google search to make sure your name is unique.  Plugin name can be multiple words.
  2. Create a PHP file with a name derived from your chosen Plugin name.  Try to choose a unique name. People who install your Plugin will be putting this PHP file into the WordPress Plugins directory in their installation (usually wp-content/plugins/), no two Plugins they are using can have the same PHP file name.
    You can also split your Plugin into multiple files. Your WordPress Plugin must have at least one PHP file; it could also contain JavaScript files, CSS files, image files, language files, etc.
    If there are multiple files, pick a unique name for a directory, put all your Plugin’s files into that directory, your Plugin will be installed as a whole directory under wp-content/plugins/. Notice that WordPress installation can be configured for wp-content/plugins/ directory to be moved, so you must use plugin_dir_path() and plugins_url() for absolute paths and URLs. See:http://codex.wordpress.org/Determining_Plugin_and_Content_Directories for more details.
  3. Top of your Plugin’s main PHP file must be a standard Plugin header. This header lets WordPress recognize your Plugin, add it to the Plugin management screen so it can be activated, loaded; and run its functions.  Without the header, your Plugin will not be activated and run. Here is the header format:

    The order of the lines is not important.  The minimum information is the “Plugin Name” line. The rest of the information (if present) will be used to the information into the Plugin management screen.

    “Verison:” line is for the upgrade mechanism to read the version of your plugin.  You can use any format of: x.x or x.x.x or xx.xx.xxx  But you need to stick with it throughout all your releases.

    The License slug should be a short common identifier for the license the plugin is under and is meant to be a simple way of being explicit about the license of the code.

    Important: file must be in UTF-8 encoding.

Publish your plugin
  1. If you want to host your Plugin on http://wordpress.org/extend/plugins/, you need to create a readme.txt file in standard format, and include it with your Plugin. See http://wordpress.org/extend/plugins/about/readme.txt for a description of the format.
    The WordPress plugin repository takes the “Requires” and “Tested up to” versions from the readme.txt in the stable tag.
  2. Create a web page to act as the home page for your WordPress Plugin. This page  describes how to install the Plugin, what it does, what versions of WordPress it is compatible with, what has changed from version to version of your Plugin, and how to use the Plugin.

To be cont’d…

References

Writing a Plugin

Hello Dolly is a good example to learn the basics about how WordPress Plugins are written, view the source code for well-written Plugins.

Plugin Resources

 

WordPress: how to change menu after login

It is quite common you want to have different menu being shown up before and after login. E.g., you don’t want the member to see a login menu item after s/he had been logged in.  The modification involved really depends on the theme you are using.  Instead of telling you step by step on where to make the changes, I need to tell you the steps to figure out where to make the changes.

Since you should not make changes to the theme directly, I assume you are working on the child theme (see xxx for making a child theme if needed).

  1. From Dashboard, go to the menus, create one menu for use before login, one for use after login.  In my example, I used ‘visitor’ and ‘member’ respectively as the name of the two menus.
  2. Go to the parent theme directory, find out which php file(s) runs the wp_nav_menu() function.  You should locate a line similar to the following
    wp_nav_menu( array'container_class' => 'menu-header''theme_location' => 'primary' ) );
  3. Copy those php file(s) to your child theme directory.  Whenever you have php file with same name in child and parent, the child one takes precedence.  So, you don’t need to care the original file anymore.
  4. Add the following conditional statements before the above line
    if( is_user_logged_in() ) {
        $menu = 'member';
    } else {
        $menu = 'visitor';
    }
  5. Change the original wp_nav_menu() call to
    wp_nav_menu( array'menu' => $menu'container_class' => 'menu-header''theme_location' => 'primary' ) );

    where you had added the ‘menu’ argument.

References:

http://www.butlerblog.com/2011/11/21/show-menu-based-on-wordpress-login-status/

http://wordpress.stackexchange.com/questions/7999/change-front-end-menu-depending-on-user-login