WordPress 4.8 and its shiny widgets

Today wordPress 4.8 has been rolled out. Among numerous additions and fixes what most will notice are the new widgets. This is very welcomed addition so we can stop using workarounds and hacks.

You can now add: Video Widget, Audio Widget, Rich Text Widget, Image Widget

Content can be added from either uploaded media library or the external source. It can embed videos from Youtube as well.

Media selector allows you to choose media source folder from uploaded files. Below few screenshots display how they appear with content.

How to add content to the new widgets

Content can be added from wordpress Media Library or external sources given you can provide URL for the files. Youtube linking works.

wp4.8-wodgets-vidimg_01

Just to clarify, Rich Text widget replaced basic text widget. and now has a “text” tab where you can format it with html.

Audio and rich Text widget

 

Easy way to Manage Multiple WordPress Sites

One of the challenges of maintaining latest updates and good performance of WordPress sites is that the WordPress plugins and themes get updated quite often and lot of times they are meant to cover security issues.

Obviously they need to be patched and updated but when you run several WordPress sites this can get tedious. Luckily there are several services that can let you manage WordPress from one back-office.

One of these services is ManageWP. This company has both free and paid tiers of service.

Each WordPress needs ManageWP plugin installed first, which allows secure “handshake” between ManageWP and your WordPress installations.

You can update WordPress core, plugins, themes and even have access to admin window in one click.

ManageWP Back office Overview

screenshot
ManageWP – Free WordPress Management Service

As you can see the back office of this service shows what is outdated and needs an update. It can update all blogs in one click.

Among other things this service allows you to add and maintain your clients you maintain WordPress sites for.

It can also check for security vulnerabilities and performance rating.

Premium and Free Features

Back up, security and performance management are some of the premium features.

managewp-backoffice-premium.png
ManageWP Backoffice – Premium and free features

You can check them out at managewp.com

 

How to create a better WordPress Child Theme

What is WordPress Child Theme?

Let’s say you’ve purchased a great theme but you want to add some modifications to it. You went ahead and altered css, functions etc.  Then developer releases a theme update. It will overwrite changes you’ve worked so hard for or even paid a developer to do them for you.

Now you are forced to either stick with altered old theme or update the theme to its latest version and lose and redo all changes made to it.

This is where Child Theme comes to save the day. Child theme is a WordPress theme that is meant to work alongside its parent theme. AnyWordPress theme can have a child theme.

How exactly does Child Theme work?

Simply put, Child theme allows you to append code and override its parent theme, thus altering parent’s look and/or functionality without changing its code. Child theme can be used for minimal alterations as well as major overrides.

How to create a better Child Theme?

Are there many ways to do that? Actually there are couple ways to do that. Old way and a better new way.

Old way overrides parent stylesheet by importing @import url(..  it to itself and then overwriting it. This creates unnecessary burden since browser has to read the styles twice. Remember if child theme folder doesn’t have functions.php it means it uses old way.

Let’s create a child theme

Create a folder for child theme.

Name it whatever the parent theme name is and add “-child”. It’d be easier to track your folder.

screenshot.png
Example: Parent theme and Child theme

create style.css and functions.php files inside the child theme folder

screenshot.png

open style.css and create header for it. Easy way is to copy/paste from parent theme’s style.css. Edit it and add “Child” to your theme name. Simply replace “mywordpresstheme” with your actual theme name. See example below.

/*
Theme Name: mywordpresstheme Child
Theme URI: http://www.myuri-example.com
Author: Author Name
Author URI: http://www.myurl-example.com
Template:mywordpresstheme
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Tags:         light, dark
Text Domain:  mywordpresstheme-child */

Template: mywordpresstheme” This line tells child theme where to look for its parent theme. Make sure your parent theme name appears here exactly as written in its style.css header line “Theme Name:”

Now we need to edit functions.php inside your child theme and tell it to load styles from its parent. Add code below to the file (between php tags)

add_action( 'wp_enqueue_scripts', 'child_theme_scripts' );
 function child_theme_scripts() {
     wp_enqueue_style( 'mywordpresstheme-style', get_template_directory_uri() . '/style.css' );
 }

The only thing you need to change here is replace “mywordpresstheme” with your theme name.

Activating the Child Theme

Time to activate the child theme. We need to upload and install both parent and child themes, but only activate child theme. Now your theme is ready to be customized.

What is a Custom Post Type and a Taxonomy

Post Type

Custom Post Type is a specific post type (content type) added by a developer. So in addition to posts, theme now has a new type of post that has been named for example a “declaration” or a “portfolio” or an “article” or “movies”, whatever options are needed for the specific website.

This enhances WordPress usability and flexibility extending its qualifications as a capable CMS.

Creating-Post

There is some confusion around this term “Custom Post Type”, since Post is a “Post Type” itself

Post is classified as a post type and this naming convention is a bit confusing.

Better description for “post type” would probably be “content type”. I’m assuming that this was unaccounted for since posts were the only possible “post type” until WordPress version 3 and the concept wasn’t future-proofed.

Taxonomy

Taxonomy is simply a way to group/categorize content. (posts, custom post types, etc.) They come in handy especially when a content type has several meta data it can be sorted with.

Couple of most used taxonomies that are included in WordPress are “categories” and “tags”.

Developers can create “Custom Taxonomies” for WordPress themes. Custom taxonomies can be very powerful way to organize specific content where default categories and tags don’t really fit.

Slightly Different Beast

WordPress has built-in “post format” option in core, such as Aside, image etc. which can somewhat be considered as content types, but they are “taxonomies”.

“post formats” were added later in WordPress 3.1 and allows designers to customize them. They are intended more for design customization rather then grouping, a bit of a different approach from basic taxonomies. Post Formats have their suggested design based on their type and intended use.

Included supported post formats are

wp-post-formats

A theme developer has full flexibility and is not restricted on design choices for post formats and can add or exclude post formats and custom taxonomies from a theme.

Understanding WordPress Template Hierarchy

What is WordPress hierarchy? The way I’d explain WordPress hierarchy is a priority sequence where it decides which template file to use depending on information requested by a user.

To Illustrate this first let’s see the visual chart of it and we go through it step by step.

wordPress-template-hierarchy.png
WordPress Template hierarchy

How to correctly view and analyze this image?

First thing we have to understand is it’s color-coding. Let’s begin.

  1. Anything in black box is an explanation a page type, a purpose of the corresponding WordPress template files that are connected with a line to blue and orange boxes.
  2. Anything in orange and blue are actual files located in a typical WordPress theme.
  3. Official terms are.
    1. Black – Page Type
    2. Blue – Primary Template
    3. Light Blue – Secondary Template
    4. Orange – Variable Template

So why are these labels and file names starting from opposite ends?

Let’s understand this from a user perspective.  When a visitor views a WordPress site and clicks a menu link, WordPress tries to retrieve the information visitor requested in a chain of requests through it’s hierarchy.

Left, black boxed side is a “user requested click” – right orange/blue side is what template file WordPress answers with.

Why is the black box page type explanation connected with multiple files horizontally?

This is where hierarchy takes meaning. WordPress checks availability of the first file – black boxed page type is connected to. In case there is no such file in the theme directory, it checks the next file  connected to its right. Last fallback template file is index.php and is used when no other template file available in a request chain. This file must be present in every WordPress theme.

Purpose of having multiple variation of the same request type is customization.

What customization?

WordPress will first pick Variable TemplateSecondary Template >Primary Template .

Let’s take a look at the example based on post “category

wordpress category template hierarchy

Custom category template files give opportunity to display certain category archives in different ways.

For example category of posts can be designed by category.php and will be exclusively used by categories only.

To finish up the explanation lets get specific.

To design exclusive category archive template for the category “german cars” we’d create template file: “category-german-cars.php”

To design exclusive category archive template for all the categories of the theme, we’d create “category.php”

This is where category customization stops.

I’ll be writing more tutorials and guides in the future. Stay tuned.