Customizing WordPress Child Theme

In this tutorial we will create Custom Post Types and add variables and functionality to them. Also we will add some styling for more user-friendly display in the dashboard.

Having set up our basic Child Theme structure we will now proceed with the customization. But before that we will do some basic WP configuration and go through the settings. You may be used to building WordPress based sites and therefore you may have some habits in as much as settings and configuration are concerned.

Semiomantics XO Custom Magazine for WordPress

Here is what I do in the dashboard:

1. Trash and permanently delete the Hello World Post.

2. Delete the default Links.

3. Set Permalinks to: /%category%/%postname%/

4. Under Settings General enter Blog Name and Tagline; for the purpose of this exercise I use  as a Title: WordPress TTP and as a Tagline: Tips, Themes and Plugins

5. Add some content to test content display by importing an RSS feed using a plugin such as Feedwordpress. I pulled into a new category called Blog the feed from my author-blog at:

http://yorgonestoridis.com/feed

We have set up a basic child theme for the purpose of modifying and customizing the Parent Theme. Creating structural modifications such as creating Custom Posts and Taxonomies are not strictly speaking theme relevant but should apply to all themes or as the case may be, to multiple themes in a Multi-user installation.

For this reason we will lodge the file which defines the custom posts outside any specific theme folder but inside wp-contents/themes.

We create a file called posttypes.php in wp-contents/themes. This file serves to define our custom post types and the way they integrate into the WP architecture.

In order to include the new Post Types in our Child theme, we include the posttype.php using an include function. This we doby adding a new file to our child theme; this file we call functions.php.

As you know, every WP theme contains a functions.php file; when creating a child theme which needs to expand the functions existing in the parent theme, then we just add a file with the same name, ‘functions.php’ to the child theme and append the functions defined in the parent theme.

Note: functions.php of the child theme does not override existing functions in the parent theme as is the case with styles (‘style.css)!

PHP allows us easily to include files in a script with the ‘include’ function and then by adding the URL to the file you wish to include.

Our ‘functions.php’ file will look as follows:

<?php
include_once (ABSPATH . 'wp-content/themes/posttypes.php');
?>

Please note that we use the ABSPATH function to construct the URL as the normal url path

 url(".../themes/posttypes.php") 

does not work here.

Save functions.php into your Child Theme Folder.

In order to set up our post types we proceed step by step:

1. Set up Custom Post Types
2. Add advanced Variables to Post Types
3. Add advanced custom post type functionality
4. Change the Menu Position (Dashboard) of the Custom Post Types
5. Add custom post type icon

Custom Post Types allow to separate different content from the traditional blog content. Blog content usually is edited as Posts and Pages, whereas Pages (static content) can be organized in a hierarchical way and posts are sorted by categories and tags. In order to display static content (pages) using customized layout, we can create different page templates easily.

Custom Post Types allow to sort content by Posts and Custom Post Types whereas custom post types are similar to posts but using custom taxonomies and as the case may be custom layouts or design adapted to the content. A typical example is a single product page from a shop compared to a single post page on the blog section of the website.

For the purpose of our exercise we will create 3 Custom Post Types

• WordPress Tips
• WordPress Themes
• WordPress Plugins

Setting up post types is relatively easy; while we could use plugins to create custom post types, I think hard-coding is a more solid and professional way of creating them. To create a new Custom Post Type we just need to add a few lines of code to the functions file or in our case to the abstraction file at posttypes.php which will then be included int the functions.php as per above where we have added the include function into functions.php.

We will create now the 3 Custom Post Types whereas the code used for each of them is the same except for the post type names and the function names.

To create the first post type, edit posttypes.php and paste in:

<?php

// Add new post type for WP Tips
add_action('init', 'wordpress_tips_init');
function wordpress_tips_init()
{
$args = array(
'label' => _x('WP Tips'),
'singular_label' => _x('WP Tip'),
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','comments')
);
register_post_type('wordpress_tips',$args);
}

Save the file.

At the top we type a comment explaining what the following code is all about (Add new Post Type for WP Tips). Then we call the function in to WordPress with ‘add_action’ and at the bottom we register the post type. As you can see the function consists of a number of arguments which we will look into later ($args).

Check out your Dashboard now and you will see that the new post type is added to the menu just above ‘Appearance’.

To add new post types, you just need to copy and paste the above code and make simple changes to the name and labels of the post type.

The above post types work, however they are not well refined. For this reason we will add some more variables. As the new posts are still called “Post” in the editor for example we will need to relabel to display the real name of the post type. For this we will write a label variable which can take an array of labels and we thus relabel all instances of our Custom Post Type.

The variable we create with the array of labels looks as follows:

$wordpress_tips_labels = array(
'name' => _x('WP Tips', 'post type general name'),
'singular_name' => _x('WP Tip', 'post type singular name'),
'all_items' => __('All WP Tips'),
'add_new' => _x('Add new WP Tip', 'wordpress_tips'),
'add_new_item' => __('Add new WP Tip'),
'edit_item' => __('Edit WP Tip'),
'new_item' => __('New WP Tip'),
'view_item' => __('View WP Tip'),
'search_items' => __('Search in WP Tips'),
'not_found' =>  __('No WP Tips found'),
'not_found_in_trash' => __('No WP Tips found in trash'),
'parent_item_colon' => ''
);

We will insert this piece of code just before our block of arguments and then change the arguments accordingly as follows:

<?php

// Add new post type for WP Tips
add_action('init', 'wordpress_tips_init');
function wordpress_tips_init()
{

$wordpress_tips_labels = array(
'name' => _x('WP Tips', 'post type general name'),
'singular_name' => _x('WP Tip', 'post type singular name'),
'all_items' => __('All WP Tips'),
'add_new' => _x('Add new WP Tip', 'wordpress_tips'),
'add_new_item' => __('Add new WP Tip'),
'edit_item' => __('Edit WP Tip'),
'new_item' => __('New WP Tip'),
'view_item' => __('View WP Tip'),
'search_items' => __('Search in WP Tips'),
'not_found' =>  __('No WP Tips found'),
'not_found_in_trash' => __('No WP Tips found in trash'),
'parent_item_colon' => ''
);
$args = array(

/*      'label' => _x('WP Tips'), */
'labels' => $wordpress_tips_labels,
/*      'singular_label' => _x('WP Tips'),   */
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','comments')
);
register_post_type('wordpress_tips',$args);
}

As you can see from the two commented lines, we have changed ‘label’ to ‘labels and defined with the variable from above ‘$wordpress_tips_labels’ and we have deleted the ‘singular label’ as it is replaced wby ‘singular name’ from the label variable.

For the other new post types it’s the same game, just copy and paste and change the labels accordingly.

Save posttypes.php and check it out in your dashboard.

You will now see all labels added and your site becomes a lot more user-friendly and less confusing.

We can define the functionalities of our new post types with an array under the variable ‘supports’; basically the ‘supports’ line defines which functionalities should be supported, i.e. which content should be displayed.

In our example, the line above looks like this:

'supports' => array('title','editor','comments')

When you go to your dashboard, and add a new WP Tip you will see the editor shows the ‘title’, ‘content’ and ‘comments’ fields.

While we can go crazy on adding supported functionality, we will here just look at some standard functionalities. To add more functionality we just need to append the array in the supports variable like so:

'supports' => array('title','editor','author','thumbnail','excerpt','comments','custom-fields'),
'has_archive' => 'wordpress_tips'

By adding the above functionalities to the supports variable, we get something pretty close to the standard post editor, since we add the author, excerpts and custom fields as well as the featured picture functionality.

Also we can add a new variable, such as ‘has archive’ and then name the archive, in our example ‘WordPress Tips’.

This archive variable allows us to create an index page just for the WP Tips post  types.

Our Code for the WP Tips Custom Post Type is as follows:

<?php

// Add new post type for WP Tips
add_action('init', 'wordpress_tips_init');
function wordpress_tips_init()
{

$wordpress_tips_labels = array(
'name' => _x('WP Tips', 'post type general name'),
'singular_name' => _x('WP Tip', 'post type singular name'),
'all_items' => __('All WP Tips'),
'add_new' => _x('Add new WP Tip', 'wordpress_tips'),
'add_new_item' => __('Add new WP Tip'),
'edit_item' => __('Edit WP Tip'),
'new_item' => __('New WP Tip'),
'view_item' => __('View WP Tip'),
'search_items' => __('Search in WP Tips'),
'not_found' =>  __('No WP Tips found'),
'not_found_in_trash' => __('No WP Tips found in trash'),
'parent_item_colon' => ''
);
$args = array(

/*      'label' => _x('WP Tips'), */
'labels' => $wordpress_tips_labels,
/*      'singular_label' => _x('WP Tips'),   */
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author','thumbnail','excerpt','comments','custom-fields'),
'has_archive' => 'wordpress_tips'
);
register_post_type('wordpress_tips',$args);
}

Copy and paste with the necessary changes for the other custom post types and save the file.

Check it out from the Dashboard Menu and the Editor.

As per now, our custom posts menu in the dashboard is positioned just above appearance and below comments. As custom posts are similar to posts, we want to move the custom post tabs just below the Posts tab.

As you can see from our code above, the menu position is set to ‘null’. The value ‘null’ makes that the custom post types are added at the bottom of the first section of the dashboard menu.

Depending of where you want to position your custom posts, you will need to change the value ‘null’ to another value according to the below reference scale:

0 — at the very top
5 — below Posts
10 — below Media
15 — below Links
20 — below Pages
25 — below comments
60 — below first separator
65 — below Plugins
70 — below Users
75 — below Tools
80 — below Settings
100 — below second separator

As we aim the spot below “Posts” we will use the value ‘5’, which will result in

...

'menu_position' => 5,

...

If you want to set a particular order, you can also use 3 different numbers, like 4,5 and 6 respectively.

Do the modification inside the arguments of each post type and save.

By repositioning the custom post type menu items , we signal priority and importance.

Check it out from the dashboard and note that our custom posts are right below ‘Posts’ now.

In order to make our custom post types stick out from the menu and to add user-friendly visual identifiers, we replace the default icons with custom icons.

There are two sizes needed, 16px and 32 px for the menu and the page title area respectively.

I have created sample icons and psd files for your convenience: please download from HERE.

Decompress the downloaded rar file and copy the image folder into wp-contents/themes (as we had done with posttypes.php, as we want to make these images available to all themes.

To add these icons we introduce a new function to posttypes.php with a function batch including some css/html code for styling purposes:

// Add new Custom Post Type icons
add_action( 'admin_head', 'wordpress_icons' );
function wordpress_icons() {
?>
<style type="text/css" media="screen">
#menu-posts-wordpress_tips .wp-menu-image {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/tips-16x16.png) no-repeat 6px !important;
}
.icon32-posts-wordpress_tips {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/tips-32x32.png) no-repeat !important;
}
#menu-posts-wordpress_themes .wp-menu-image {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/themes-16x16.png) no-repeat 6px !important;
}
.icon32-posts-wordpress_themes {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/themes-32x32.png) no-repeat !important;
}
#menu-posts-wordpress_plugins .wp-menu-image {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/plugins-16x16.png) no-repeat 6px !important;
}
.icon32-posts-wordpress_plugins {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/plugins-32x32.png) no-repeat !important;
}

</style>
<?php }

Note the incomplete php delimiter at the end which is needed to switch back to php from css/html code.

At this stage, your posttypes.php looks as follows:

<?php

// Add new post type for WP Tips
add_action('init', 'wordpress_tips_init');
function wordpress_tips_init()
{
$wordpress_tips_labels = array(
'name' => _x('WP Tips', 'post type general name'),
'singular_name' => _x('WP Tip', 'post type singular name'),
'all_items' => __('All WP Tips'),
'add_new' => _x('Add new WP Tip', 'wordpress_tips'),
'add_new_item' => __('Add new WP Tip'),
'edit_item' => __('Edit WP Tip'),
'new_item' => __('New WP Tip'),
'view_item' => __('View WP Tip'),
'search_items' => __('Search in WP Tips'),
'not_found' =>  __('No WP Tips found'),
'not_found_in_trash' => __('No WP Tips found in trash'),
'parent_item_colon' => ''
);
$args = array(
/*        'label' => _x('WP Tips'), */
'labels' => $wordpress_tips_labels,
/*        'singular_label' => _x('WP Tips'),   */
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title','editor','author','thumbnail','excerpt','comments','custom-fields'),
'has_archive' => 'wordpress_tips'
);
register_post_type('wordpress_tips',$args);
}

// Add new post type for WP Themes
add_action('init', 'wordpress_themes_init');
function wordpress_themes_init()
{

$wordpress_themes_labels = array(
'name' => _x('WP Themes', 'post type general name'),
'singular_name' => _x('WP Theme', 'post type singular name'),
'all_items' => __('All WP Themes'),
'add_new' => _x('Add new WP Theme', 'wordpress_themes'),
'add_new_item' => __('Add new WP Theme'),
'edit_item' => __('Edit WP Theme'),
'new_item' => __('New WP Theme'),
'view_item' => __('View WP Theme'),
'search_items' => __('Search in WP Themes'),
'not_found' =>  __('No WP Theme found'),
'not_found_in_trash' => __('No WP Theme found in trash'),
'parent_item_colon' => ''
);

$args = array(
'labels' => $wordpress_themes_labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title','editor','author','thumbnail','excerpt','comments','custom-fields'),
'has_archive' => 'wordpress_themes'
);
register_post_type('wordpress_themes',$args);
}

// Add new post type for WP Plugins
add_action('init', 'wordpress_plugins_init');
function wordpress_plugins_init()
{

$wordpress_plugins_labels = array(
'name' => _x('WP Plugins', 'post type general name'),
'singular_name' => _x('WP Plugin', 'post type singular name'),
'all_items' => __('All WP Plugins'),
'add_new' => _x('Add new WP Plugin', 'wordpress_plugins'),
'add_new_item' => __('Add new WP Plugin'),
'edit_item' => __('Edit WP Plugin'),
'new_item' => __('New WP Plugin'),
'view_item' => __('View WP Plugin'),
'search_items' => __('Search in WP Plugins'),
'not_found' =>  __('No WP Plugin found'),
'not_found_in_trash' => __('No WP Plugin found in trash'),
'parent_item_colon' => ''
);

$args = array(
'labels' => $wordpress_plugins_labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => 5,
'supports' => array('title','editor','author','thumbnail','excerpt','comments','custom-fields'),
'has_archive' => 'wordpress_plugins'
);
register_post_type('wordpress_plugins',$args);
}

// Add new Custom Post Type icons
add_action( 'admin_head', 'wordpress_icons' );
function wordpress_icons() {
?>
<style type="text/css" media="screen">
#menu-posts-wordpress_tips .wp-menu-image {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/tips-16x16.png) no-repeat 6px !important;
}
.icon32-posts-wordpress_tips {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/tips-32x32.png) no-repeat !important;
}
#menu-posts-wordpress_themes .wp-menu-image {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/themes-16x16.png) no-repeat 6px !important;
}
.icon32-posts-wordpress_themes {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/themes-32x32.png) no-repeat !important;
}
#menu-posts-wordpress_plugins .wp-menu-image {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/plugins-16x16.png) no-repeat 6px !important;
}
.icon32-posts-wordpress_plugins {
background: url(<?php bloginfo('url') ?>/wp-content/themes/images/plugins-32x32.png) no-repeat !important;
}

</style>
<?php }

?>

Check it out from your dashboard and you should see something similar to this:

Custom Post Types with Custom Icons

Related posts:

1. How to build a Custom WordPress Site 2
2. How to build a custom WordPress Site
3. Custom Widgets for WordPress
4. WordPress 3.4 Beta
5. Facebook Strategy with WordPress

Build a Custom WP with Semiomantics XO

This post focuses on setting up our Main Theme and a Child Theme. For the purpose of this exercise we will use Semiomantics XO as the parent theme because it’s flexible, user-friendly and highly optimized. In fact you can use most any decent WP theme to follow this tutorial, namely the TwentyEleven which comes with the WP installation.

Semiomantics XO for WordPress — Custom Magazine

Like on any live site, our test site on BitNami allows us to add themes either from the Dashboard (upload the theme’s zip file) or by pasting the theme into the themes folder in wp-contents.

Access your BitNami environment using Windows Explorer and surf to the themes folder. You will see the same folders and files structure under htdocs as you are used to when accessing your WordPress folder on a server using an FTP client.

Folders on BitNamy WP Stack

In order to add Themes, we just drop theme folders into the ‘themes’ folder as per above. As you can see, I have amongst others) added my Semiomantics XO (the ‘xo’ folder under themes). XO will serve as the parent theme of the new website. Instead however of customizing XO directly, I will create a child theme which will contain all modifications. The advantage is clear: when an update or upgrade of the theme becomes available, the parent theme can be updated without destroying the child and restarting the customization job from scratch.

A WordPress child theme consists first of all of a Folder to which we add a style-sheet.

This style-sheet contains a commented header which defines the parent theme folder as well as other optional data and it usually imports the parent theme’s style-sheet with a simple line of code (no need to copy paste the whole style-sheet). Also we will add a screenshot which will serve as a thumbnail in the Themes tab of our WP Dashboard.

Style-sheet for Child Theme

As you can see above, I am editing my files using the free PSPad which is handy to edit the various files we need to develop.

1. Add a new folder to the WP Themes folder under wp-contents/themes; name it as you like your theme to be named, in my case: yorgo12

2. Create a new file called style.css using your editor and save it into the new theme folder.

3. Edit the style.css file by adding a commented section defining:

• Theme Name  (yorgo12 in the above case)
• Theme URI    (this is optional and can be your website where you may talk about your theme; in my case: semiomantics.com)
• Description    (Optional; I have added a simple description, but you may well describe your Child theme, for example: 3 column minimalist child theme for Semiomantics XO.
• Author:           (Optional; put your name.)
• Template:  This is important: put the FOLDER NAME of the parent theme, in my case xo.
• Version:          (Optional: I start with version 1.0)

You could add other data as some authors do, such as Author’s URI and more, but that’s not necessary.

NOTE: All the above information sits between comment tags (/*.….….*/)

Next, we import the style-sheet of the parent theme with the following line of code:

@import url("../xo/style.css");

I have then added a comment to remind that you should not edit above unless you know what you do.

Your style.css file reads now similar to the following:

/*
Theme Name:       yorgo12
Theme URI:        http://semiomantics.com
Description:      Child Theme for Semiomantics XO 12
Author:           Yorgo Nestoridis
Template:         xo
Version:          1.0
*/
@import url("../xo/style.css");
/* Edit here below*/

Save the file into the new Child Theme folder.

4. Add a Thumbnail

Usually the image represents a screenshot of the new site but it can also be a brand logo or any other image. Important: the image should be called ‘screenshot’ and be in png format to fit into WP. Use image size 300px x 225px for best display.

screenshot.png

Drop the image into the Child Theme folder.

Let’s now activate our new Child Theme from the WP Dashboard under Appearance/Themes.

What you will see is an out of the box XO when looking at the front-end of the site.

Having set the base for our custom development, we will start now to adapt the site to the needs of the hypothetical customer. Continue reading the next post.

Related posts:

1. How to build a custom WordPress Site
2. Semiomantics XO Transparent WordPress Drafts
3. How to make WordPress Themes Responsive
4. WordPress Themes and Development
5. WordPress 3.4 Beta

Common Changes

This post lists some CSS snippets to customize WPTouch Pro.

Note: When removing the page title area we recommend using a child theme’s stylesheet and applying the code below to its corresponding stylesheet, per the instructions on applying custom CSS.

In the iPhone theme:

.page-title-area { display:none !important; }

In the iPad theme:

.page .title-area {display: none;}

.idevice .post .thumbnail-wrap { -webkit-box-reflect: none; }
.idevice .calendar-box { -webkit-box-reflect: none; }

Change every instance of 46px to your desired size

.post .thumbnail-wrap { height: 46px; width: 46px; } .post img.attachment-post-thumbnail { width: 46px; height: 46px; }

.post img.attachment-post-thumbnail { -webkit-mask-box-image: none; }

p.nocomments, #respond { display:none !important; }

#respond, ol.commentlist, a.com-toggle { display: none !important; }

.comment-bubble { display:none !important; }

.archive-text { display: none !important; }

#header { background-color: #ffffff !important; }

where #ffffff can be customized to suit.

#hellobar-container, #hellobar-wrapper, #hellobar-pusher {display: none;} 

Related posts:

1. XO Mobile Theme with WPTouch Pro
2. Customizing WP Shop Theme
3. Customizing Post Editing
4. Best WP Business Theme
5. Hosting South Africa Fun Theme

Best Portfolio and Photo Custom Theme: Semiomantics EVO

WordPress offers a perfect backbone for Media Publishing and eCommerce on a single site.

Semiomantics Developments for WordPress assemble the best modules available to offer custom solutions to satisfy the needs of professionals. EVO is a theme base for custom design and development focusing namely on media producers, photographers, graphic and web designers.

Semiomantics EVO is based and inspired by the work of the best designers and developers out there who take advantage of the latest developments of WordPress, HTML5, CSS3, Java, Ajax and the mobile web.

Code and Scripts have been adapted and modified to satisfy Semiomantics’ highest standards of optimization for excellent publishing, targeting Search Engines and Social Networks.

Semiomantics EVO replaces the flash template Semiomantics Evo and constitutes a second cord on Semiomantics Arc.

The recent release of XO Edition 2012 remains the blockbuster product of Semiomantics in 2012; however we are working on a new XO which will replace XO 12. A new architecture will allow to eliminate some of the heavy plugins we are using at present with XO namely to satisfy the standards of mobile development.

Semiomantics EVO is the ideal platform for high quality editing, media publishing and eCommerce. Semiomantics Developers and Designers are invited to join the Ycademy February Online Seminar which is held this coming week-end.

Shoot Images and Videos with your camera or mobile device, load them to your EVO (can be done from the mobile device directly) and let EVO share your content with your friends and acquaintances on Social Networks without losing the control over your media or products. The shop is easily accessible, fully integrated and can also be added to your Facebook page for example.

Look out for more soon.

• showcase portfolio
• wordpress photography themes

Related posts:

1. XO Photo Press WordPress Theme
2. The 1001 Faces of Semiomantics XO
3. Glossy WordPress Theme Development
4. Ycademy Online Seminar Photo Publishing with Evo for WordPress
5. Best Car Dealer Theme for WordPress

Semiomantics EVO Developer Theme

2 years ago, about at the same time of the year, we have built Evo, an Action script driven Flash photo and portfolio website.

This time we will make use of HTML5, CSS3 and Java Script to customize Semiomantics EVO, a Semiomantics development for Developers.

Flash is not anymore a smart option for development for as long as Apple mobile devices are as popular as they are and for as long as mobile Apple devices will not display Flash. Therefore we have been looking for an alternative to produce smashing and eye-catching sites based on HTML5.

Of course the good old Evo Flash driven sites still look great. As a lot of work has been put into them we will try to use namely all the edited images and footage in the new EVO version.

Semiomantics Evo Flash Version 2009

Semiomantics Evo Flash Version 2009

The biggest changes are:

• EVO is now powered by WordPress
• EVO does not use any Flash but is a responsive HTML5, CSS3 and Java script theme.

The new EVO assembles the ultimate in WordPress design and features for modern media display. Ideal for photographers, EVO features not less than 6 different Gallery Types. Galleries can be displayed most anywhere and the number is unlimited.

EVO can also display EXIF and location data.

The high resolution background slider will assure clean display also beyond resolutions of 2500 px equivalent.

Custom sidebars for pages and categories.

Finally: the script is eCommerce ready!

Semiomantics EVO 2012 Developer Edition

Semiomantics EVO 2012 Developer Edition Light

Become familiar with a new generation WordPress Theme and develop on the given bases a personal template for further customization.

Learn how to replace the existing Evo sites with the WordPress based responsive EVO.

(More to come.)

Licensed Software is provided.

To build the new site, add a sub-domain to your main site (author blog) and call it for example media, photo or portfolio or similar. (We will discuss this at the pre-seminar call on Tuesday February 21, 2012.

Ticket price $85, the usual discounts for Ycademy Pros apply. Please ask Bianca for the discount code: bianca(at)ycademy.com.

Click to Get your Ticket

• online seminars wordpress theme
• seminar photo

Related posts:

1. Ycademy Online Publishing Seminar
2. Ycademy Online Publishing Seminar
3. Ycademy Online Seminar January 2012
4. Ycademy Online Seminar March 2011
5. Ycademy Online Seminar May 2011

Thumbnail sizes are set in your dashboard under Settings > Media.  When we change the thumbs’ sizes, the change will apply only to new content. These thumbnails are used by default in the XO Basic Home Page Layout.

In order to modify thumbnails created previously to a change in WordPress settings, we use the “Regenerate Thumbnails” plugin; install from your dashboard and then just run it: this will create thumbnails corresponding to the new WP Media settings for all images in the library and galleries.

The Regenerate Thumbnails plugin will have no impact on syndicated posts unless you also pull in the images to your library when syndicating.

When we upload an image from our dashboard in XO, XO creates 12 thumbnails adapted to the needs of the site and stores them in the default uploads folder for faster loading. If we change the layout settings in XO advanced home page settings, or if we change thumbnail sizes under the layout settings, the previously created thumbnails may not fit anymore.

Using the Regenerate Thumbnails plugin will create a new set of thumbnails corresponding to the new settings. Syndicated content will not be altered by the plugin, unless you pull in the images while syndicating and store them in your library.

Basically we are looking at two elements: the image and the caption.

Also XO allows for different styling of images

Yorgo Logo

inserted into a post and galleries or images and thumbs used in Custom Formats, such as Images and  Gallery Posts.

The example shows XO default style which sets borders with rounded corners, a background and some padding.

These settings can easily be modified with custom CSS, for example by adding and customizing a CSS3 property, such as some shadow:

This example uses inset box-shadow and a hover effect decreasing opacity by 30%.

For box-shadow to work in IE, we use the PIE support:

The example pulls in the PIE script; as done in previous examples (on the menu) make sure that you load the PIE.php and PIE.htc files into your child theme and link to the absolute or relative URI with the behavior property.

Captions can be customized by modifying the following selectors, for example:

You could of course chose a font-family, display the text with a reduced, fixed width or pull the caption into the image using a semi-transparent background and a negative top-margin. The limit is … your imagination.

To style Gallery Thumbnails just customize, for example:

Related posts:

Enjoy Your Valentine and Make it a Great Day!

No related posts.

Enjoy Your Valentine and Make it a Great Day!

No related posts.

Related posts:
Happy New Year After Effects
How to Customize your WordPress Typography
12 Principles of Animation with After Effects

• renaldo ricketts

Related posts:

1. Happy Valentine Gals and Guys
2. Happy New Year After Effects
3. How to Customize your WordPress Typography
4. Happy New Year
5. 12 Principles of Animation with After Effects

Author Name Style on Semiomantics XO

We want to display the author’s name underneath the main title in small but remarkable fonts:

Note: we just use letter-spacing to gain visibility.

]]> http://myvouliagmeni.net/vouliagmeni/yorgo-nestoridis/meta-tag-styling-on-wordpress/feed/ 0