July 15, 2014 Image Optimizing & WordPress

Before uploading images or photos to a website, they need to be checked and optimized. This is important not only to avoid long downloads – especially important when viewed on alternate media  - and can to boost SEO results.

Things to consider and optimize as needed:

  • The actual size of the image in pixels – set it at the largest size it may be viewed on screen, but NO larger!
  • The actual file size in kb’s. Images should be run through an optimizing process that will convert the resolution to 72 dpi.
  • The image color space needs to be RGB, (sRGB) or “index” for .png’s.  Most photos will be RGB. (CMYK is used for print.)
  • Best file format options are .jpg, .gif and .png.
    • .jpg: best for photos and any graphic that has gradient colors. No transparency.
    • .gif: best for graphics with flat areas of color and animated gif’s. Transparency possible.
    • .png: suitable for both gradient and flat images, used more now. Transparency possible.

When an image needs a transparent background, a “matt” has to be set, this is a color closest to the anticipated background color that will show behind the image.

Process:

Check the image file properties. In Windows right-click an image and chose Properties. The “General” tab will show the file size, the “Details” tab will show the pixel dimensions. If the image is already 72 dpi or 92 dpi, and the pixel width is no larger than an “average” screen width of 800px, and the file size is under 300-kb or so, it may be ok to use as-is. But if the image is much larger, in weight or pixel size, it will need to be optimized.

Graphics editing software is useful to have, top choice is PhotoShop, but there are cheaper alternatives. The software has to be able to reduce the resolution, edit the pixel size, and optimize (compress) the file, and save as one of the chosen file types, without too much image quality loss. Each image should be optimized individually for best results.

Too much compression and pixelation starts to appear – too little compression and the file size is larger than necessary.

Never up-size a “too-small” image file in HTML pixel dimensions, it will look terrible.

Online options:

http://www.imageoptimizer.net/Pages/Home.aspx http://tools.dynamicdrive.com/imageoptimizer/
http://jpeg-optimizer.com/
http://mashable.com/2013/10/29/image-compressors/

There are also image optimizer plugins for WordPress, which will automatically reduce the file size.  Some are mentioned on this site:
http://premium.wpmudev.org/blog/10-best-image-optimization-plugins-to-speed-up-your-wordpress-site/

If your site has large images where quality is important, and you anticipate these being viewed on ‘Retina’ displays, this plugin will create duplicate images to be served when viewed in media with Retina display:
http://www.meow.fr/wp-retina-2x/

 

Posted in Image gallery, Image Optimizing, WordPress | Tagged | Leave a comment

June 17th, WordPress Widgets

Widgets are an integral part of any WordPress theme, and their locations and options change depending the theme structure. Widgets are small pieces of functionality (PHP code) that can be placed in widget locations within a theme. Widgets can be simple text (a text widget can contain hand-coded HTML or PHP), or ‘WYSIWYG’ functions with multiple settings to control the way they work. (No code wrangling required!)

Available widgets in default 2012 theme. (Click for enlargement)

Available widgets in default 2012 theme. (Click for enlargement)

A brand new default WordPress installation will use a default theme which comes with a limited set of widgets and widget locations. But as soon as you install and configure a custom theme, different types of widgets and other locations will become available. The theme designer will determine what widgets are available for use, and where they can be positioned on the site. Many plugins will also add plugin-specific widgets that can be placed in the available widget areas. The WordPress templates [used by pages or posts] specify which widget areas will be displayed when that specific template is in use. Most common is for widgets to display in a sidebar. But specific page templates can be coded to include “widgetized” areas elsewhere on a page.  For instance – a template that is “full width” won’t have a side bar location coded in, and therefore no place for a widget to display.

Available widget areas in the Responsive theme, and widgets added by a plugin

Available widget areas in the Responsive theme, and widgets added by a plugin. (Click for enlargement)

Its important to know how to recognize and use  the options available in your specific theme, as well as any widgets that are added as part of a plugin. To become familiar with a new theme, it’s helpful to add a text widget to each widget area, and title it the name of the widget location. The widget locations will become apparent when viewing the pages.

Posted in WordPress | Leave a comment

Configuring WordPress – Basic Structure and Menus

Populating the WordPress website, adding pages, posts, categories and setting up menus.

Pages are static pages that can be edited, but generally remain the same. Pages do not get archived, once edited the old content is overwritten.

Posts are texts that are displayed in a post template ‘page’.  They are saved in chronological order and (depending on the theme settings) can be displayed with short intros on a category “home” page. Clicking their ‘read more’ link displays the entire post . Posts are sorted into (already set up) categories. Posts can be searched by category and other identifiers such as date published, author, tags, etc.

Categories: WordPress ships with a default “Un-categorized” category, so before writing posts, it’s important to establish some additional categories to organize the site’s posts. The categories will depend on the content and organization of the site. A post is then assigned to one of the categories as appropriate. If no category is assigned, WordPress will give it the default “Un-categoriesed” category.

Tags: Post also need ‘Tags”. Tags are similar to ‘keywords’, they are words found in the post text, and are usually words that are used in multiple posts.   Menu interface

Menu options:
WordPress has a default menu system, and location depends on the theme, however,  most themes allow for custom menu(s).

Default menu: When creating a PAGE, WordPress has the option to set the location of the link by numerical order, and whether it’s a sub-link or not.

Custom menus: Custom menus are easy to set up, and allow full control over which and where each page/post/category link appears.

Open the Menu page, under “Appearance”. It will show the location options, depending on the theme. Menu items can be pages, categories, tags, URL’s etc. Select and insert them into the menu, and then drag them into the required order. Options include dragging them ‘offset’ to create a drop-down.

Many themes have additional locations specified for menus. Select which menu you need to edit. When choosing a theme consider how many menu links you’ll have, and whether the theme has enough menu locations built in. Most themes have a main menu and a footer menu, but some have secondary menu’s at the top of the design. A menu can also be used in a widget area.

Posted in WordPress | Leave a comment

Child Themes in WordPress

wordpress-logoWordPress 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