Child Themes in WordPress

WordPress uses “themes” to display the content of the database. The theme determines what the end user sees. Deciding which theme to use is determined by the site requirements, and some research may be needed to find the perfect fit. Whether it’s a free or fee-based theme, a child theme is created to contain the customizations.

Once a suitable theme is decided upon,  a Child Theme is made that will reference the Parent, this is where all theme edits are done. This prevents any customization being lost when an update of the parent theme occurs.

To create a child theme, create a folder in the “wp-content/themes” folder with a unique name, a good practice is to add “-child” to the parent name:
For instance “twentyfourteen-child”.
(This makes it clear who the parent theme is.)

Create a new plain text css file and save it as “style.css”, place this inside the designated Child folder.
Copy the child theme sample code on:
http://codex.wordpress.org/Child_Themes
Copy/paste that into the style.css and modify the specs.

The child theme “style.css” file MUST include this at the top:

/*
Theme Name: your theme name
Theme URI: URL of the theme originator
Description: Child Theme of …
Author: Author of this theme
Author URI: Your author URL
Template: twentythirteen (The parent name)
Version: 1.0.0
*/
@import url(“../twentythirteen/style.css”);
/* =Theme customization starts below this ————- */

Upload the child theme folder into the themes folder in WordPress. Now it can be activated in the “Appearance/Themes” page in the WordPress admin area. As long as the ‘style.css’ file is set up correctly, it will access all the parent theme pages, functions and styles, and as no modifications have been done yet, the display will be identical to the parent theme.

Changes to the page display style is done by copying the css from the parent theme style, and pasting it into the child theme style.css file. Then modify that as needed. WordPress will give preference to the child theme style sheet.

CSS edits:

  • To locate the css name of an element, find the style ID or class name to change by using Firefox Firebug plugin.
  • Find the style in the parent theme style.css file
  • Copy the style into the child theme style.css file. Change the properties as needed and WordPress will give preference to the child theme styles, to override the parent theme style.

Sometimes the cascading inheritance of a style will prevent the customized style from displaying correctly. Try using the !important element before the closing semi-colon in the style settings.

For instance, to override a link style:

a {
color: #c00 !important;
}

Changes to the .php pages:

Any change to the code in a .php page is done by placing a copy of the .php page in the child theme, and making the edits there. They will override the parent theme.

WordPress uses template pages to display content. Sometimes we need to know which template is used for a specific display. To find out which template is used, place this code at the bottom of the functions.php page. The template path will be shown at the top of the page.

add_action(‘wp_head’, ‘show_template’);function show_template() { global $template; print_r($template);} 

Useful links:

http://underscores.me/

http://themeshaper.com/2012/10/22/the-themeshaper-wordpress-theme-tutorial-2nd-edition/

http://www.hongkiat.com/blog/wordpress-child-themes-dev/

Posted in Uncategorized, Web Design, WordPress | Tagged , | Leave a comment

April 15th, 2014 DACS SIG Meeting

wordpress-logoWordPress uses Themes to display the content, and once you’ve decided on a theme that best suits your purpose, it’s time to customize and make it your own. However, customizations are best done in a “Child Theme”. At this meeting I’ll demonstrate how to start a child theme based on one of the default themes that ships with WordPress. We’ll create the necessary folder and files, and start to create some content.
Join us and bring your questions!

Posted in Upcoming, Web Design, WordPress | Leave a comment

WordPress – CMS – Basics and More

Gone are the days when a website could get away using simple static HTML code. With the ever increasing use of  ‘alternate media’ websites now need to be responsive for a good viewer experience. They also need to be dynamic, easily managed (often by multiple contributors), SEO optimized,  and regularly updated.

This calls for a CMS installation. (Content Management System) There are several free CMS open source systems based on PHP. WordPress, Drupal, Joomla are the main players. Even though the general concepts are the same, each have their own learning curve.

They all pretend to be ‘easy’ to use for a non-programmer, however, in reality it is very helpful to have a rudimentary understanding of the PHP language, and a willingness to spend some time learning each systems unique admin configurations.

Setting up WordPress:

Establish the MYSQL database first. Download the latest version of WordPress from wordpress.org. Upload it into it’s own folder inside the root of your host. (or on your local server.) Enter the DB passwords in wp-config.php and upload. Run the “5-minute install”.

http://codex.wordpress.org/Installing_WordPress

The best place to find information, clarification and instructions is on the WordPress Codex:
http://codex.wordpress.org/

Themes:

WordPress will activate it’s current default theme but also ships with the previous 2 themes. (2012, 2013, 2014) Each of these themes target a different use – 2013 is more of a blog format, 2014 offers more contemporary image based layouts. The theme controls the way the website appears on screen, (by CSS and theme-specific php) and some themes include additional features and/or plugin functions, or even offer entire ‘page layout builder’ interfaces. Each theme designer/company has their own way of constructing their themes, but multiple themes by the same designer usually function the same way.

The www.wordpress.org website offers many free themes. But commercial themes also have advantages, such as better designs, tech support and superior coding. Prices vary, but range in the $35-80.

Download and install a chosen theme into the wp-content/themes folder. Delete any unused themes. However, always keep at least 1 default WP theme in case of a theme crash. (!)

Always use a Child theme – based on your chosen theme. Any customization of the CSS or PHP needs to be done in the Child theme. This avoids changes being lost with parent theme updates.
http://codex.wordpress.org/Child_Themes

It is important to become familiar with the default WordPress admin interface before activating a new theme. Know how to handle Pages, Posts, Menus, Widgets, Plugins, Media uploads and the various options under “Settings”.

Plugins: 

Plugins add additional functionality to a WordPress installation. There are thousands available, but it’s prudent to download only those on the wordpress.org plugin repository.
http://wordpress.org/plugins/ Respected commercial plugin authors also have at least one free plugin in the WP repository.

Plugins are easiest to install right inside the plugins window in the WP admin area.

My favorite and essential plugins:

  • WordFence Security
  • BackWPup
  • WordPress SEO by Yoast or All In One Seo Pack
  • Widget Logic (if theme does not provide page-specific widget options)
  • Simplified Social Sharing (or any preferred social sharing plugin)

Possibly useful depending on site requirements:

  • NextGEN Gallery (photo galleries with ‘overlay’ effect for enlargements)
  • Subscribe2 (automatic email send of new posts to subscriber list)
  • Business Directory Plugin (free or paid business directory)
  • The Events Calendar
  • Akismet licence (blocks spam, small fee required for activation key.)
  • Fast Secure Contact Form
  • Websimon Tables (to easily display table data)
  • BackupBuddy (popular fee-based backup plugin, but check host compatibility)
  • Broken Links Checker

Updating software:

WordPress releases a core files update every few months.
It is critical that WordPress core files are updated!
(Often the updates address new security issues, and not updating increases the risk of being hacked.)
As soon as WordPress releases core updates, the plugin authors scramble to update their plugins to maintain compatibility. It is wise to run the plugin updates as soon as they become available – however, it is also sensible to check the WP forums first regarding any possible plugin compatibility problems.

Backups:

A WordPress website has two parts:

  • The WP core files, and the customized theme folders, plugins and uploads (photos/PDF files etc.)
  • The MYSQL database (the actual texts, user info, settings etc.)

Both should be backed up, but scheduling depends on how often a website is updated or changed.

Use a plugin to run backups automatically. Backups can be saved in the root folder, emailed (only the database) or uploaded to a Dropbox account, or other cloud server such as Amazon s3. For very large sites, a cloud server such as Amazon s3 may be the only option for the files backup. (Dropbox has a size limit for remote uploads.)

Learn how to backup, restore or move a WordPress site manually:
http://www.wpbeginner.com/wp-tutorials/how-to-move-wordpress-from-local-server-to-live-site/

http://www.jasonbobich.com/web-design/moving-wordpress-to-a-new-server/

To search and replace in the MsQL file:
https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

Other possible add-ons:

  • Sucuri Malware detection, alerting, cleanup
  • InfiniteWP Manage multiple sites from one interface
  • BackupBuddy Commercial backup plugin, very popular, but will it work? (Check their hosting compatibility list in the Help files.)

See malicious attacks in real time:
http://www.wordfence.com/

More goodies:
Easy way to embed video’s:  http://codex.wordpress.org/Embeds
Hints: http://remkusdevries.com/10-things-you-did-not-know-about-wordpress/

Hint:
Running WAMP server (localhost) on Windows 8 may not work if Skype is open. Skype needs to be fully shutdown.

Posted in WordPress | Tagged , , | Leave a comment

October 15, 2013 DACS SIG meeting subject: Google Analytics

When it comes to Search Engine Optimizing, knowing how a site is performing is critical. One of the top tools these days is Google Analytics. This free software is constantly evolving and offering more information – which can be quite a challenge to decipher. Let’s go over the initial setup, and then dive into an existing Google Analytics account to explore the interface, and interpret some of the data available.

Posted in SEO, Upcoming, Web Design | Leave a comment