Monthly Archives: September 2013

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 clone a site under MAMP

Throughout your development, you may want to duplicate a site.  E.g., if you want to try different themes without suffering from the trouble in flipping back and forth.

To copy a site in the same localhost, you need to copy the whole directory, copy the database (via export/import), update the wp-config.php file and some entries in the database.  Here are the detail steps:

  1. Open the start page from MAMP by clicking on the “Open start page”.
    130827o
  2. In the page, click phpMyAdmin -> Databases and create a new database for the new site.
    130827q
    In my example, I am going to clone “myDemo2″ to “myDemo3″, so I will create a new database named myDemo3.  Use whatever name suitable to you.
  3. From Finder, duplicate the whole directory.  For example, I stored the whole site under /Volumes/Public/project/MAMP/myDemo2 , so I need to copy the whole directory and name it as /Volumes/Public/project/MAMP/myDemo3
  4. Edit the wp-config.php file in the new web directory, in this case is the ”/Volumes/Public/project/MAMP/myDemo3/wp-config.php”.
  5. Update the entry about the database name.
    define('DB_NAME', 'myDemo3');
  6. From your MAMP start page, go to phpMyAdmin, select the database you are copying from, for example, in my case, it is myDemo2.  Export it, select custom, save output to a file. Click “Go”, it will generate a .sql file to your local HD.
  7. From your MAMP start page, go to phpMyAdmin, select the database you are copying to, for example, in my case, it is myDemo3.  Import from the .sql file you have just created.
  8. Download search and replace script.  Put it in the same directory where the wp-config.php is stored.
  9. Point your browser to there to execute the script, in my example, point the browser to
    localhost:8888/myDemo3/searchreplacedb.php
    Follow the instructions.  In my case, I will replace
    localhost:8888/myDemo2
    with
    localhost:8888/myDemo3
  10. After moving, the permalinks may be broken, you need to edit the wp-config.php file, add the following line at the end
    define('RELOCATE',true);
  11. Point your browser to the new web site’s login, in my example is http://192.168.1.103:8888/myDemo3/wp-login.php
    Login to the administrator account, use the same password as you original site, and go to Settings -> General, correct the site link to new link, in my example is http://192.168.1.103:8888/myDemo3
    Similarly, you should also update some custom link, e.g., I have custom link set in the menu items, so I need to update them accordingly.
    Go to Settings -> Permalinks. Click the save button.

Then, test your web site to see if everything is correct.

After moving, remove following line from the wp-config.php file

define('RELOCATE',true);

 

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

How to Add Custom Fonts to your WordPress Site

Sometimes, you or your client may want to use a font which is not in the system.  This is rather common for the menu font.  The simplest way to do this is using the WordPress Font Uploader.  This plugin lets you upload your own font files and apply them to any element of your website without requiring a knowledge of html or css.  All .otf and .ttf font files are supported.

After installation, you will see “Font Uploader” added to the “Appearance” panel.  Upload font from here and set the font accordingly.  E.g., in my case, I want to change the menu font, and I search in my theme directory to discover it is governed by the #topnav in the style.css, so the setting shown in following illustration:

130924m

Other references

How to style WordPress Menus & Dropdowns

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

 

How to disable youtube related videos at the end for WordPress widget

To achieve that, typically, you only need to add “?rel=0″ at the end of a youtube embedded code.  But that doesn’t work for me in a widget.  I have used a video widget in a theme where there is no control, and the widget always override the “?rel=0″ parameter.  And I couldn’t find any widget which works with that theme.

Actually, you don’t need specific widget to display youtube in sidebar, footer, etc.  You can code it in a text box:

  1. Add a Text widget.
  2. In the content area, fill in the following text and replace the “http://www.youtube.com/embed/x8skGEboyFY” with your youtube embedded code:

    130919m

  3. Save the widget.

If you want to use it in a post or page instead of sidebar or footer, simply key in the above codes. Outcome: