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

How to build a Local Website

Go Local is the name of the game in 2011/12 and the success of bringing the global web developments back home is a trend of the time. First it was about tagging people, now we tag locations, be it on social networks such as Facebook or on Photo sites, such as Picasa or Flickr.

Based on the fact that surfers search for and prefer local business to cross border transactions, social networks namely have built in the local tags and stimulate users to hook media and events to geographically tagged locations.

In order to dominate the local market, you need to assess the use of the internet your neighbors make; chances are that they mostly hang out on social media, search Google and use email. This is of course an extremely simplified view but it gives an indication about where we need to build high visibility.

You also want to have an idea about how people access the net and websites; you will notice an increased use of mobile deices, which means that your content needs to be formatted and optimized  for desktops as well as for tablets and mobile phones.

Finally you may notice that surfers prefer visual content to text, which impacts on editing and publishing for multiple platforms.

In order to build high visibility on search returns, you need

• a local website.
• make use of all possible Google Listings pertaining to the geographic location.
• great content and consistent publishing to provide useful information and trigger conversation.

To dominate social networks (Facebook, Google+, Twitter, LinkedIn) we need

• optimized profiles.
• Facebook Pages.
• a consistent flow of information to trigger attention and conversation.
• an optimized set-up to assure traffic back to our websites (let the social networks work for us instead of the opposite).

To dominate the mobile web we need

• mobile versions of our websites (tablets and smartphones).
• mobile search optimization.
• ideally an App.
• easy to use interactive functions.

The answer is similar to managing a business online. There are three main elements I like to focus on:

• an optimized workflow to assure maximum productivity.
• high quality content and content providers.
• an integrated publishing network to hit all the important targets with per platform optimized content.

• Ads from Local Business.
• Ads from external Business wanting to do business locally.
• Eventually by integrating a local directory.
• Eventually by integrating a real estate classifieds feature.
• Eventually by integrating a service and products exchange.
•  … and more.

Just a few ideas:

• Talk about people.
• Talk about events.
• Talk about stories concerning the community.
• Talk about Local Sports, Clubs, Associations.
• Publish Pictures (people like to see their face and place).
• Talk about local business.
• Integrate a news wire from the major’s office.
• Have a local Gossip column.
• Let visitors contribute and discuss content.
• Don’t forget rating.
• Create competitions, contests, top 3 lists.
• Exchange advertising space with local media to promote your site quickly an consistently.
• Bring the conversation from social networks back to your site.
• … and so much more!

I hope this post helps your brainstorming when creating your local project. I will publish shortly a detailed project for my demo community, Vouliagmeni.

Related posts:

1. How to Optimize your Impact on Social and Mobile Networks
2. Facebook Strategy with WordPress
3. Google Top 10 Dominate your Keyword 3
4. 3 Web Design Trends in 2011
5. New Facebook Pages Publishing Concept

Mobile WordPress and Social Media

The fast evolution of the mobile web has created new needs for publishers, whereas the objective remains to integrate mobile web targets into an existing workflow and to optimize productivity with the help of automated conversion scripts and tools.

At Semiomantics the starting point for our development is the most comprehensive conversion plugin, called WPTouch Pro. WPTouch has released its latest version end of March 2012 with some adjustments for iOS 5.1 and many other fixes and developments:

• * Added: Custom advertising options for iPad

• * Added: Simple caching of desktop functions.php

• * Added: Russian language file

• * Added: Automatic archiving of previous settings in wptouch-data directory

• * Added: Compatibility setting for BuddyPress Mobile AJAX support

• * Fixed: Changing user-agent matching that may have interfered with advertising in certain scenarios

• * Changed: Replaced include with locate_template in theme files, should allow child overrides of custom WPtouch Pro template files

• * Changed: Algorithm to reload settings; may have caused settings to be lost in a certain scenario

• * Updated: All translations based on 2.6 strings

• * Fixed: An issue with Register and Lost password links in Classic

• * Fixed: Video issues with jwPlayer and other video sources and plugins

• * Fixed: An issue which could cause the Share button not to show in Classic mobile theme

• * Fixed: Improved appearance for Embedded Google maps

• * Fixed: Issues with Tweet text encoding in sharing options for Classic

• * Fixed: Search form issues with Skeleton theme

• * Fixed: Admin issues for non-English languages

• * Fixed: Issue where style.min.css was never loaded in child themes of Classic

• * Fixed: Broken admin icons when SSL was enabled in the admin

• * Added: Hungarian language

• * Changed: Adjustments for memory management in Classic iPad theme

• * Fixed: An issue with MapPress embeds

• * Fixed: An issue with JetPack videos

• * Fixed: An issue with Smart Youtube plugin videos

• * Fixed: Issue with blank spaces in custom user agent string

The above recent change-logs indicate the extent of considerations necessary for a serious development of an integrated mobile WP based solution. The reason for such complexity lies amongst others in the following:

1. Increasing WordPress complexity and advanced plugin developments.
2. The multitude of mobile operating systems, browsers and devices of different sizes, display resolutions and aspect ratios.
3. The improved algorithms of Mobile Search.
4. The complexity of Semiomantics’ unbeaten optimization for conventional and mobile search.
5. The popularity of mobile and smart devices and the automated Mobile Search privileging mobile site versions.
6. The popularity of Social Networks and their ever changing integration parameters.

At Semiomantics we aim to make complex matters simple for day to day use. As an author or business, you don’t want to spend your time with technical issues or sitting logged into social networks to keep up with the continuous stream of information and exchanges. You want to do your business and be assured that your message gets spread broadly and that visitors requests are piped to proper destination without your intervention.

Semiomantics Developers are trained to build high end customer specific solutions assuring optimized productivity and workflow.

Based on the above, the Seminar will provide all necessary updates and upgrades for existing and new installations of high end websites, namely those built on Semiomantics XO and EVO frameworks.

During numerous Workshops we will knock participants personal sites into shape to comply with the highest standards.

We will go step by step through the set-up and development of the customized version of each participants author site. This includes the following workshops:

1. Build a Mobile Child Theme for your Website.

2. Build OS specific Icons.

3. Build a Start up screen (image).

4. Build Mobile specific WP 3.0 menus.

5. Custom Links and Icons.

6. Integrate Advertizing: Adsense, Admob, Custom Ads.

7. Custom Post formats for the Mobile theme.

8. Test Plugin compatibility and create your mobile plugin menu.

9. Embed media for Mobile content, YouTube, Vimeo or self-hosted standard h.264 encoded media.

10. Specifics for tablet computing, namely for the iPad and other touch tablets.

We will focus on Facebook in particular. Mobile Facebook is quite restrictive; it is therefore important to learn about what is visible on mobile FB and what cannot be accessed, respectively, how we may work around some of these restrictions.

In fact: Mobile Facebook is quite disappointing, be it whether you access it via the App or the browser. Custom content on app driven canvas pages and page favorites don’t display! Even promoting their link on the wall will not trigger any display. There are some workarounds by using different browsers where you can modify browser settings and simulate a desktop browser, but that’s not a solution for the masses.

Facebook is not here to promote YOUR site but just to grab your content for it’s own purpose.

• We will show you how to work around the problem and take advantage of the FB App and Mobile Site to get most out of it. The goal is to achieve that Facebook works for you and not you for Facebook.

• We will also come back to the desktop version of Facebook, showing how to build the most neutral and minimalist Facebook page for full and perfect control of all your content.

The Ycademy Online Seminar will take place on April 28/29, 2012 starting daily as usual at 1 p.m. London Time and closing at 9 p.m. London time.

All materials and scripts are provided and included.

The cost for this seminar is $85; discounts as usual for Ycademy Pros (please mail Bianca at bianca(at)ycademy.com for the coupon code.

Click on the below image to get your ticket.

• mobile content caching strategies
• mobile developer seminars

Related posts:

1. Facebook and Mobile Web Seminar by Ycademy
2. Ycademy Online Seminar January 2012
3. Ycademy Online Seminar May 2011
4. Facebook Online Seminar by Ycademy
5. Facebook Strategy with WordPress

WordPress 3.4 Beta Custom Headers and Backgrounds

The release of WordPress 3.4 Beta raises a number of problemsquestions for theme designers in as much as Custom Headers and Custom Backgrounds are concerned.

The implementation methods via add_custom_background() and add_custom_image_header() will be depreciated and replaced by a more powerful method via add_theme_support().

Due to the depreciation of the old calls, we will need to update the themes and make the modifications needed to take advantage of the new features provided by WordPress 3.4. The new theme versions will work with WP 3.4 minimum and must not be used with previous WP versions.

Custom developments and child themes may need a special treatment, depending on the degree of customization. I will arrange for some developers calls or set up some tutorials in due course. For the time being I am testing WP 3.4 Beta to check backwards compatibility using our themes.

I will keep you posted on results and updates.

• wordpress 3 4
• custom backgrounds wordpress 3 4 backward compatible
• wordpress 3 4 beta
• wp beta 3 4

Related posts:

1. Semiomantics XO Transparent WordPress Drafts
2. How to Customize your WordPress Typography
3. WordPress Themes and Development
4. Showcase Portfolio Photo Theme for WordPress
5. YORGOO Blaster YB271 Beta

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

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

Basic CSS3 to Customize your WordPress Theme

With the increasing browser compatibility of CSS3, additional customization of websites is in the reach of most anyone (Even a Monkey can do it, according to Nikos Advertizopoulos …). Tonight we will start with a series of calls to become familiar with the possibilities arising from the use of CSS3 on WordPress to improve typography and font styles.

You may follow the progress of the work at the Ycademy Demo Site which features the Semiomantics XO Theme.

Looking forward to seeing you on YorgoLive tonight.

• wordpress Typography
• custom typography wordpress
• how to customize typography
• how to customize your wordpress team
• typography customization wordpress
• typography wordpress 2012

Related posts:

1. How to Customize WordPress 2
2. How to Customize WordPress
3. Semiomantics XO Transparent WordPress Drafts
4. Customize WordPress with Semiomantics XO
5. XO Photo Press WordPress Theme

Transparent WordPress Custom Theme

Playing with the XO Theme Version 3.3.x from Semiomantics and CSS3, I notice how easy it is for most anyone to customize the XO Theme by adding transparencies and other CSS3 elements. Here below you find some drafts. You may visit the test site from : http://globalthebrand.com.

On the test site we use the Semiomantics Widgets and Theme Handler plug-in as well as a modified Supersized plug-in; the latter needs some more work to make it more responsive. Also we use TubePress which behaves fine also on mobile.

The Theme is Semiomantics XO with 3 custom child-themes; any theme can be associated with any page, post, category, tag or sidebar.

• xo theme wordpress
• theme blog
• theme wordpress typography
• xo wordpress theme
• wordpress semiomantics
• windows 8 theme for wordpress
• wordpress transpert theme
• wordpress transparent responsive theme
• wordpress theme windows 8
• transparent wordpress theme css

Related posts:

1. Transparent WordPress Semiomantics XO
2. Transparent WordPress Theme Design
3. The 1001 Faces of Semiomantics XO
4. Sober WordPress with Semiomantics XO
5. XO Photo Press WordPress Theme

New Semiomantics XO Theme for WordPress

The above Screenshots represent just some of the pages, features and looks the 2012 Edition of the high performance XO Theme for WordPress has up its sleeves. The above site is the fruit of the 2 Days Ycademy Online Seminar for Semiomantics Developers and designers.

The 2012 Edition of XO is focused on even more flexibility in as much as editing, cross-browser and cross-platform compatibility are concerned.

The Site displays perfectly on Mobile devices, showing responsiveness also of the plugged in scripts chosen of which some have been adapted to satisfy the high standards of Semiomantics Publishing Scripts for Excellence.

The site elaborated at the Ycademy Online Seminar this past week-end features some smashing features, such as:

• Background Slideshow, customizable for each page, post or archive
• Built in Directory
• Media Library for YouTube and Vimeo
• Pro-sliders which can be deployed anywhere on the site
• In addition to the responsive design, a separate light Mobile Version is available
• Bold and Efficient Navigation
• Built in Custom Fonts
• Social Network connectivity and publishing
• and much more.

The XO script is well commented and offers designers a clean and straight forward environment for custom developments. XO uses best practices for WordPress development and makes the best use of the possibilities offered by the WP back-bone, assuring smooth integration and optimized conflict handling.

XO is a great playground for designers. The DIY version allows anyone to adapt layout and colors to taste right from the back-office; there is no need to have any knowledge about coding or designing. The theme behaves like a Chameleon and adapts to specific needs with just a few clicks of the mouse: pre-configured layout elements transform your XO quickly into a Magazine, Newspaper, personal Author Blog, a Media Hub, a Shop, a Marketing Machine, a Social Media Publisher, a Product Promoter or a Fan Site or most anything your imagination dictates.

For the professional designer, XO offers a well commented environment. Custom code can be added right from the dashboard or, as I prefer using a child theme. XO is tuned for HTML5 and CSS3 use, making it a modern and inspiring framework for exceptional design effects.

Out of the box, the XO Theme for WordPress provides a stable and reliable, robust and optimized solution for common use. It provides built in features such a slider with multiple transitions and a one click selector for easy use.

Layouts can be easily adapted to needs and purpose of the site. In fact, most custom designers rely on the theme engine to format efficiently layouts.

The site featured in the above gallery uses a few pro plug-ins to add functionality in function of customer requirements. The integration of such add on scripts is a relatively simple process for designers and developers.

XO has been developed for high performance, productivity, excellence in publishing and flexibility. For the professional users, the XO Theme constitues a solid base with a huge potential for customization and creative artistic expression.

The release of XO Version 3.3.x is planned for the first week of February. The present Release Candidate has been thoroughly tested. A few minor issues will be taken care off before XO will be available to the public.

If your site is running on Semiomantics XO suing basic customization, the theme can just be overwritten. (Save your custom CSS beforehand.)

If you are using a custom version with custom developments or a child theme, some of your customization will need to be adapted to the enhancements of XO 2012. This concerns namely custom headers and footers as well as custom functions.

Support for developers and designers is available as usual at our Ycademy Online Calls and Seminars or through Semiomantics Pro Support.

• wordpress xo theme
• 1001 font mouse fruit faces
• 1001 фейс
• xo theme
• xotheme

Related posts:

1. Semiomantics XO Blog
2. Facebook Strategy with WordPress
3. Ycademy Online Seminar January 2012
4. Semiomantics XO 2010 Edition
5. WordPress Shop Version 3 by Semiomantics

Semiomantics XO with CSS3 and HTML5

Time has come to learn about new technologies available for web designers and developers. All common browsers are increasingly able to read and interpret CSS 3 and HTML5 and about all computers are equipped to read java and jQuery. Therefore new possibilities become available to XO developers which we will focus on during the January Seminar.

XO has evolved over the past 4 years along with WordPress Developments. The theme has become responsive and shows perfectly on smart phones and tablets.

Subsequent to the release of WordPress 3.3.x XO needed some adjustments and updates which we have implemented and tested. New design functions become available for advanced customization. XO remains the most flexible theme for custom development, accessible to most anyone.

The goal of the seminar is to become familiar with XO and it’s new features as well as to learn how CSS3, HTML5 and jQuery allow to adapt XO to most any customer’s needs.

Some of the technical issues we will have a detailed look at are:

• Transparencies with CSS3
• Background Sliders
• Mobile Verions using WPTouch Pro
• Content and Frame sliders with Pro Slider and SlideDeck Pro
• Social Network connectivity with FacePages
• How to make a WP theme responsive (adapting to different screen sizes such as Smart Phones Tablets and bigger)

The most obvious expansions are via plug-ins. We will show how to make the best use of plug-ins for the Mobile Web, Social Networking, Social Media Publishing, Social Network Marketing as well as for more attractive display. Time permitting we will look into additional functions, such as shopping cart or marketing specific scripts.

We also will start looking into another important chapter:

How to convert your XO sites into a Mobile App!

In order to make the understanding easier, we will build a new site during the 2 days event. Please join our pre-seminar call on Thursday to prepare the event by setting up a new XO powered site.

All materials will be provided. You will just need some images/photos, videos and other content you may want to use to populate the XO site.

Saturday and Sunday, 28/29 January, 2012 from 1 pm London time till 9 pm London time.

Tickets are available on our new shop at HIOD.com. Please click on the below image to order.

Discounts as usual for Ycademy Pros: Please mail Bianca at bianca(at)ycademy.com for the coupon code.

• русские темы для wordpress 3 3

Related posts:

1. Ycademy Online Seminar January 2010
2. Ycademy Online Seminar May 2011
3. Ycademy Online Seminar
4. Ycademy Online Seminar April 2011
5. Ycademy Online Publishing Seminar

Christmas Media Design at Ycademy

The Ycademy Seminar in December will focus on Christmas Media, namely on working with Adobe After Effects.In stead of producing static Christmas cards participants will be able to add motion, sound and other effects to produce a stunning customized Christmas Clip.

The above draft for a UVUYO video is a typical example for what After Effects can do for you.

The Christmas Media Design Seminar will take place on December 17, 201, starting at 1 pm London time and closing at 9 pm London time.

As we have only one day available for the December Seminar, we will use all Daily Call sessions for an introduction into the secrets of After Effects. All pre-seminar calls will be recorded as well and video tutorials will be made available to seminar participants.

Acquire enough After Effects related knowledge to be able to work with After Effects templates and to customize, adapt or modify them.

All participants will create a customized Christmas Clip.

Participants need Adobe’s After Effects, preferably CS 5.5 64 bit version, however CS4 running on 32 bit will do.

For Customization, you may want to use some of your family photos or, if you create a business clip, some business related pictures , screen-shots or graphics.

All other materials, namely professional templates, will be provided.

Special Christmas price: $45

Discounts as usual for Ycademy Pros.

Click to get your Ticket

• after effects seminar greece
• desain seminar
• what are the media effects during christmas

Related posts:

1. Digital Media Design Online Seminar
2. Yorgo Media Design
3. Photo Media Stock Seminar
4. Online Media Production Ycademy
5. Social Media Marketing Seminar

Facebook Business Account

What is the difference between a Business and a Personal Account? Which is the ideal solution for you and what are the implications of your choice?

First of all, be aware that according to Facebook rules you are not allowed to use multiple Facebook Accounts. However, you may create multiple Advertizing Accounts as a Managed Advertiser having a dedicated Facebook Representative.

You can set up a Facebook Business Account, if you don’t already have a standard account,

Business Accounts are mainly designed for Advertisers and to manage pages.

To create a business account you start by setting up a Facebook Ad or a Facebook Page.Once you have provided the required information, you will be taken to the log-in page and you will be asked if you have already a Facebook Account.  Select “I do not have a Facebook account” and continue by providing email and date of birth.

As the owner of a Business Account you can view and edit your pages and ads, add photos or videos and consult stats relating to your pages and ads.

You cannot see other users profiles or timelines as Business Accounts have limited access to information of Facebook.

You cannot see Facebook content that does not live on your pages.

Business accounts cannot be found on search or added as friends.

Business accounts cannot send or receive Friends Requests.

A business account can be converted into a regular account. Once done, the process cannot be reversed.

The big disadvantage of Business Accounts are their absence from the internal search and friend feature, making it almost compulsory to spend big time and/or money to promote the content.

• facebook business account
• facebook
• business not allowed in facebook
• disadvantage of business account in facebook
• facebook managed advertisers who have a dedicated facebook representative
• what can buisness accounts do on facebook
• what is a business account on facebook
• what is a facebook business account

Related posts:

1. Facebook and Home Business
2. Facebook Strategy with WordPress
3. Facebook Marketing 2
4. Best Facebook Pages
5. Facebook Marketing

10 Steps to Implement your Facebook Strategy with WordPress

Implementing your Facebook Strategy will be at the center of the November Ycademy Seminar. This hands-on Seminar and Workshop will stretch over two days and build with participants an eye-ball-twisting Facebook presence. See the seminar schedule at the bottom of the post.

The Seminar is designed for WordPress Developers and WP users who are looking for high productivity and customized publishing and marketing solutions.

This topic deals with efficient strategies which will efficiently improve your Facebook presence.

Visit the Semiomantics Facebook Page

Surfing through Facebook we notice some common errors well intended people commit when building their Facebook presence. We will discuss these issues and show you how to eliminate them from your personal or business Facebook.

While content is king, there are different ways of making it accessible to visitors. We will discuss the recent changes Facebook has implemented and show you where the focus should be in order to improve your visibility, traffic and business or network expansion on Facebook.

Function of your strategy we will define and optimize privacy settings in order to grant potentially interested visitors access to relevant information. Privacy, Accessibility and List-building as well as Targeted Communication are the essentials of this key session.

For people looking for you, your business, services or products, your Profile and Info page are of the utmost importance, the more that your info is visible from outside Facebook and therefore Google efficient. We will set up with participants an efficient Info Page.

We will discuss the recent changes implemented by Facebook and how they impact on our strategies.  Friends, Fans and Subscription features impact on the way we expand our network and influence on Facebook.

Overview of the Facebook Page feature. Integration techniques, Apps, Content, Canvas and Pages.

The focus is on the technical set-up of a Facebook Page. As  content we will use a graphic, picture of video.

What is it you actually wish to display on your Facebook page? In fact there is no limit and it depends entirely on your strategy.

This is the center piece of the seminar. Creating Facebook Page right from your WordPress site is now possible. We will set up a reveal page and different Facebook pages depending on participants needs. In fact we show you how to create a whole website in Facebook, straight from your WordPress.

While this works with most any WordPress 3.1 enabled Theme, we will demonstrate the integration with Semiomantics XO.

In fact we will work with a professional plugin modified for Semiomantics XO.

The Seminar will guide you to master the following and more:

• Create Unlimited Facebook Fan Pages with WordPress

• Increase Likes by 150% with Reveal “Like” Tab Gateways

• Unlimited Customization Options When Designing Your Fan Pages

• Create Unlimited Custom Pages with the WordPress Page Editor

• Create Custom Menus and Navigation with Just a Few Clicks

• Comments, Like, Send and Over 50+ Custom Shortcodes for Enhanced Customization

• Facebook Open Graph Integration for Enhanced Facebook Integration and Google SEO

• Auto Post to Facebook From Your WordPress Blog

• Use Your Facebook Albums and Photos on Your Blog and Fan Pages

• Add Google Maps to Your Facebook Fan Pages

• Create Squeeze and Sales Pages with Just a Few Clicks on Facebook

Add Facebook related widgets to your front and/or content pages. Google+ and Twitter buttons. Pull in Facebook Albums, Events, like Buttons and more. Use Facebook Connect to log in to or to register with your blog.

Create content which is only accessible after visitors clicked the “Like” button. A smashing filter which allows you to manage accessibility right from your XO.

Saturday and Sunday November 26/27, 2011.

We start at 1 pm London Time and end at 9 pm London time both days.

You need a WordPress blog preferably with FTP access.

Scripts and all other materials are provided.

We will install the necessary scripts for you previous to the Seminar; please get your Tickets early. If we are not yet in possession of the FTP access to your site, please send it by email to Bianca Gubalke at bianca(at)ycademy.com.

The Price for Participating, Materials and access to recordings is $85.

Click to get your Ticket

Discount as usual for Ycademy Pros. Please contact Bianca Gubalke at bianca(at)ycademy.com for the code or any other question you may have pertaining to the Seminar.

• social community feature like facebook in wordpress
• creating efficient blog pages in wordpress
• best facebook strategy
• facebook strategy
• strategy for facebook wordpress integration
• integrate wordpress blog with facebook page
• increase likes on a wordpress post
• increase likes by 150%
• implement strategy to add to our number of facebook fan
• how to make your fb profile accessible on google

Related posts:

1. WordPress on Facebook
2. Facebook and Mobile Web Seminar by Ycademy
3. Facebook Marketing 2
4. WordPress for Facebook Fan Pages with FBlaster
5. Semiomantics Optimization for Facebook

Semiomantics XO PhotoPress

This website is dedicated to the beauty and functionality of publishing Photos with WordPress. Photo Press is the Photo Website of YORGOO Press; it demonstrates various layouts and ways to present photos in a user-friendly, attractive and useful way. The site displays perfectly on mobile devices as well.

PhotoPress for WP — Home

XO PhotoPress — Gallery Navigator

XO PhotoPress — Small Gallery Slider

XO PhotoPress for WordPress — Large Gallery Slider

XO PhotoPress — Blog

XO PhotoPress — Contact

No need to say much about XO for WordPress, its extraordinary performance has been proven times and again. The present site shows the flexibility of XO allowing professional designers to apply the most exciting designs to a high performance script without impacting negatively on the overall performance.

XO PhotoPress is a custom built WP theme based on the XO Framework from Semiomantics. It displays as well Photo Albums and Galleries as well as an integrated Blog; it also can serve as an image Aggregator displaying media in most any format and layout. The Theme is designed for Professional and non-professional use and can easily be used by individuals without advanced knowledge.

More to follow.

• PhotoPress — Gallery
• template wordpress black rollover
• photopress wordpress theme
• photopress theme
• xo photo album
• wordpress slide gallery
• image gallery slider
• black and white photoblog template — blogger
• best wordpress black theme for bloggers
• wordpress photography theme

Related posts:

1. Transparent WordPress Theme Design
2. Best Consultant Theme for WordPress
3. New XO53 Theme for WordPress
4. Photo Gallery by Semiomantics
5. WP Best Old Fashion Theme

WP Custom Menu with Rollover Effect

This tutorial is based on a recent Custom Photo Blog Theme Development for WordPress on the base of Semiomantics XO. The Solutions apply to most any clean WordPress theme whereas some of the style sheet syntax may vary from theme to theme.

The Goal of the exercise was to build a site which will display on mobile platforms as well without the use of WPTouch Pro for example and which offers the possibility to navigate without zooming on mobile phones.

This gave us the opportunity to style the Main Navigation (horizontal menu on top of the site. As we are on a photo site we thought about using Menu tabs with images and rollover effects which can be achieved either with sprites or as individual images.

We opted for a solution without sprites in this case considering that the difference will not be material on this site.

The screenshot shows the rollover effect as it has been taken while the mouse was hovering over the CONTACT tab.

The Menu Normal View and the Hover View show the same picture, whereas we put a transparent black layer (85% alpha) over the image for the Normal View. Also the font changes from white to blue.

On other sites we used black and white images which evolve to color or simply two entirely different pictures or text labels.

The question we will answer here is:

First of all we create a menu from the WordPress dashboard under Appearance –>Menu.

We call this main navigation ‘Main’. Now, and this is important, open the Screen Options on top right of the screen and tick all options, namely the Advanced Menu Properties.

Click to see large version.

These allow you to configure your menu items further, for example you may open the link in a new tab or window, you may define the link relation, add a description and important for us: you may define CSS Classes!

These classes allow us to style each list item in the menu individually by defining the corresponding styles in the custom syle sheet.

As you can see from the above screen-shot, we created a menu tab for FREE B&W PHOTO FEEDS. We expand the tab in the back-office to see all properties and we create a CSS Class which we call “navfeed” (You just type in the name of the class, not the “.” (dot) which you will use in the CSS Style-sheet only.).

Repeat this procedure for  all menu items creating for each a CSS class (or multiples).

If all tabs will be styled in a uniform way, you may use the same class for all; it is however likely that you wish to create individual styles, namely if you use different images and width of the tabs.

Now we just style the menu from the XO design tab as much as possible: fonts, font color and size and hovers if you wish. Our example shows that we have spread the menu over the full width of the page simply by adapting the fonts and font sizes, right from the XO Design panel.

Once done, take a screenshot of the menu and load it to Photoshop or any other image editor where you dispose of rulers to measure the width of each tab.

In our example, we are using 4 tabs with different width, the page width being 980 pixels.

The tabs have the following width:

1. navhome:       157 px
2. navfeed:          459 px
3. navcontact:    280 px
4. navy:                 84 px

Total, 980 pixels.

We wish to separate the tabs leaving a space of 1 pixel between them; we therefore decrease the with of 3 tabs by 1 px each to create the space for the spaces (this is getting smart, huh).

If you use Photoshop, you can just design your menu bar and slice it then accordingly, If you go one by one, you just create individual pictures of the same height and the width as defined above.

As we like to use the menu layout from XO, we will use the font definition from XO; the images we create will serve just as background pictures for each menu tab.

Our XO Settings for the menu are:

• Font: Quicksand
• Font size: 32 px
• Font Color: #FFFFFF (white)
• Hover Color:  #0000FF (blue)
• Background: #000000 (black)

These settings result in a nice menu which we will expand with an image. The height of the menu is 80 px at present and we wish to expand it to 182 px by adding an image.

There you go! Now let’s fit everything together!

Finally we open our CSS Style-sheet and define the newly created classes.

As you see above, our classes are:

navhome, navfeed, navcontact and navy.

The corresponding classes in the Style-sheet will be:

.navhome

.navcontact .….   a dot in front of the label defines a “class” in the CSS Style-sheet.

Also, as these tabs contain hyperlinks, we will create the classes

.navhome a

.navcontact a .…  and so on.

This way we will then be able to create the hover pseudo classes:

.navhome a:hover .… and so on.

Now we just type into our style-sheet whatever result we want to achieve, in our case this looks as follows for the HOME tab (the others are similar, except the width and image reference).

.navhome, .navhome a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome-o.png') no-repeat !important;height:130px !important;}
.navhome a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navhome.png') no-repeat !important;}

.navfeed, .navfeed a {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed-o.png') no-repeat !important;height:130px !important;}
.navfeed a:hover {background: url('http://bw.photorss.com/wp-content/uploads/2011/07/navfeed.png') no-repeat !important;}

To this we add the little 1 px space:

.navfeed  {margin-left:1px ;}

That’s it!

Hope you enjoy and let me know about your results by commenting here below.

• wordpress menu style
• how to style wordpress menu
• style wordpress menu
• how to make money
• wordpress menu styles
• How to style WordPress Menus
• wordpress menu pic
• wordpress photo menu
• HOWO TO ADD MENU WITH WORDPRESS AND STYLES
• wordpress advanced menu properties

Related posts:

1. WordPress 3 Menu Problems
2. Simple Sprites Menu
3. How to Customize WordPress 2
4. WordPress Seminar by Ycademy
5. How to add the Date to the WP Navigation

• listen up london

Related posts:

1. Nike London
2. Nike London on the Fly
3. Business Market Watch London Evolution
4. Buy Nike Kicks in London at Global Sports
5. Mitchell & Ness Snapback Caps in Stock

• listen up london
• christian george
• christian george listen up london
• where can i get snapback caps in south africa
• buy snapback london
• snapback buy at london
• Snap Back Website
• mitchel & ness 2011 snapback
• listen up london global
• listen up london christian george

Related posts:

1. Nike Kicks on Google by Semiomantics
2. How to Make Money with Images
3. Global Sports News
4. Publishing and Editing Images
5. Protected: Global Sports Update

On my site I publish a Copyright mention in the footer:

These Copyright notices are standard and most WordPress blogs add them automatically. Such notices can be more or less sophisticated; automated vCard notices are possible and exist in may themes by default.

Copyright Yorgo Nestoridis

Copyright using vCard

For the purpose of this example I have used the vCard entry at the bottom of the post, just above the comment area as visible here:

Copyright Yorgo Nestoridis vCard

Copyright using Author Box

The author box is part of the post content and therefore an on-site as well as off-site feature:

Copyright Author

The disadvantage of the html author box is that it messes up the clean code of the post. Such boxes should be edited in clean code and inserted accordingly.

Copyright off-site

As mentioned above, the Authors Box at the bottom of the post is part of the post and therefore transferable by Feed (RSS, Atom). Content scrapers usually scrap by using feeds and by importing content to their own web sites.

Author Boxes with clean content are interesting and accepted also by most directories, for as long as they contain only one link.

Copyright added to the Feed

An interesting idea is to add copy right notices to the out-put feed. The principle is: you add automatically a copyright notice to every post in your feeds, without having these notices on display on your own website.

The previous post has been syndicated into YORGOO Publishing; here is how the post was automatically printed:

Copyright on top of the post:

The original post on Yorgo Nestoridis shows no copyright on top:

Yorgo Nestoridis Blog

The Copyright notice added to the feed shows however automatically on every site syndicating my content as follows:

Copyright Yorgo Nestoridis on YORGOO Publishing

The same is true for Ycademy which syndicated from YORGOO Publishing:

Copyright Yorgo Nestoridis on Ycademy

The above screenshots represent post pages where the Copyright notice on top of the post bears active hyperlinks. In case the default excerpt is printed, as on the home page of YORGOO Press blogs or on Ycademy, then the same notice is served, however without active links.

Copyright Yorgo Nestoridis on Ycademy

Copyright at the bottom of the post:

The Authors Box has been imported while the vCard has disappeared as we did not embed it into the code (loop) but served it using an in-line widget. To pass on the vCard, the corresponding code can be embedded into the WP code. The vCard delivers clean code and could be a better solution then the HTML Author’s Box.

Author Box on YORGOO Publishing

My preference

The most visible notice is delivered on top of the post, however in a more elegant way than the shrewd wording chosed for the purpose of this example.

A nice notice could be for example: “Published by Yorgo Nestoridis on YORGOO Press” including the corresponding links.

Related posts:

1. Protect your Website Content
2. Measures to protect your Blog
3. Cars Daily Chronicle
4. Rotating Headers and Banners on YORGOO Press
5. Astroblogy Project Gemini

• how to protect content of website
• how to protect content on website
• word press protect media content

Related posts:

1. Protect your Website Content
2. Protect your Website Content 4
3. Protected: Global Sports Update
4. How to Make Money with Images
5. Publishing and Editing Images 2

Using a WordPress based website you have multiple options. You can just use galleries from the built in media module.

Example 1: Images are loaded into the WP Media Folder using the upload tool associated with the post editor.

To display the pictures as a slide show, you need some additional soft ware, plug-ins.

Example 2: Images are loaded into a Image Management Module and rendered as an embedded slide show:

The above depends mainly of the technology used on your website since most computers can render such slide shows and there is therefore no discrimination of users who are not equipped with software beyond default.

Slide shows: the technology your visitor uses

With the increasing popularity of Social Media, some interesting applications have been developed which allow Internet users to improve their surfing experience by installing additional soft on their computers. The success of such soft depends on the number of sites which add corresponding features to their development.

Here is an example and I would suggest you download the software on your Computer profit fully from the 3D effects. By the way: FaceBook, Flickr and YORGOO Media are equipped with these add-ons, to mention just a few.

[singlepic id=13 w=320 h=240 mode=watermark float=][singlepic id=11 w=320 h=240 mode=web20 float=]

Watch now: when you pass your mouse over a picture, you notice a button:

Cool Iris

If you click on it, your local 3D image wall will render the images, try on one of the above pictures.

Download your CoolIris Browser and install it on your computer and then watch and be amazed about the new experience.

We can take this further and show a whole wall of our images on the website:

How about showing my Flickr Pics on a CoolIris wall?

It’s possible, watch out for the next post.

Related posts:

1. Publishing and Editing Images
2. Social Media Marketing Seminar
3. How to Make Money with Images
4. The Purpose and Future of YORGOO Media
5. Interactive Video Blog

Related posts:

1. Publishing and Editing Images
2. How to Make Money with Images
3. How to Make Money with Images
4. Managing Images on YORGOO Press
5. The Purpose and Future of YORGOO Media

As of February 2011 facebook allows iFrames on Page Tabs as well as on Canvas Pages. The corresponding Applications don’t need to be activated (using the app submission procedure).

In short an iFrame Application allows to load external content to your Fan or Business Page.

The advantage of Facebook iFrame Applications

As your content is hosted on your own host, you may edit in  standard HTML, CSS and JavaScript like on any other web page.

The disadvantage of Facebook iFrame Applications

You need your own hosting and be able to edit HTML, besides that, the freedom is yours.

If you need cheap reliable hosting and professional help to set-up your app, hosting and content, please contact me.

1. Set up your HTML page on your Server

For the purpose of this Tutorial I will create the frame for an application called YORGOO on my cPanel Server.

Create a new folder in your root called “app” into which you will place all your future applications. In the app folder we create a new folder with the name of the new application, in my case: ‘yorgoo’, like so:

In the ‘yorgoo’ applicatuion folder we create an index page and a style-sheet, like so:

Edit index.html and paste the following minimal content into it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id="container">
<p>HERE COMES YOUR CONTENT</p>
</div>
</body>
</html>

Note on line 4 we refer to our style-sheet which we edit and paste in the size of the page. Facebook allows for a display of maximum 520 pixels x 800 pixels. Ideally you keep your content within these limits, however you could also go wider and deeper when editing at the price that either the content will not be displayed to its full extent or that you need to accept scroll bars.

I will keep it sober here and punch into my style-sheet the following:

body {
 width:520px;
 margin:0; padding:0; border:0;
 }

Note on line 9 we reserve the space within the main content container for whatever you wish to add to your page: this is where you edit your visible page content. For the time being I have just added some text for testing purposes, by replacing the above lines 8 — 10 with the following:

<div id="container">
<h1>YORGOO</h1>
<p>We are building here the YORGOO Facebook Application in
support of Small Business and Home Business Builders who wish to take advantage
of Social Media Marketing to generate Free Traffic and Free Leads to promote
their business and increase sales.</p>
</div>

With a little bit of style, this results in:

Test Page Content

2. Install the Facebook Developer Application

Now let’s head over to Facebook, sign up if you don’t have an account or just log in.

Visit THIS LINK and if prompted, click the Allow button.

3. Create your iFrame Application

Click on the Set Up New App Button:

Now enter a Name for your Application:

Name your App

Agree to the terms and Create App.

You will be prompted with a security check (paptcha), just submit the suggested words.

4. Edit the About Page

Add a description and some eye-catching icons, like so:

About

5. Facebook Integration

Select “Facebook Integration” from the left-hand menu and scroll down to Page Tabs — this is what will be shown in your Facebook sidebar menu:

Page Tabs

If you have a security certificate installed on your server, add also the secure link using https:// (people logging on to Facebook using a secure connection cannot see your page if you don’t provide a secure link — they will be redirected to your wall).

Save your changes.

6. Add your App to your Fan Page

Select from the menu Application Profile Page

Select Add to My Page from the sidebar menu and select the page to which you wish to add the Application:

Head over to your page and you will now see the new tab!

Incoming search terms:

• add design your sneaker apllication to my facebook page
• adding facebook iframe
• developing facebook applications tutorial
• facebook page adding applications below info
• how to add app to fan page 2011

Related posts:

1. Best RSS Facebook Page
2. Facebook Drawing Board Live
3. YORGOO on Facebook
4. Facebook Online Seminar by Ycademy
5. Best Facebook Pages

• how to add a facebook app to a page
• facebook add to my page app
• add this app to my page
• iframes html set up for facebook
• how to add an app to your facebook page
• how to create an iFrame app for my Facebook fan page
• Facebook Fan Page application provider
• yorgo nestoridis create a fan page on facebook
• how to add an app to your fan page
• how to add application into my fan page

Related posts:

1. The Purpose and Future of YORGOO Media
2. BuddyPress featured on YORGOO Blaster
3. Managing Images on YORGOO Press
4. Publishing and Editing Images
5. Global Sports News

The best solution from a user’s point of view: get a fast internet connection.If I am running the previous post on a 24 MB/s line, it’s a piece of cake. If you live in a country where fast lines are not available, then you are at the mercy of webmasters who load less demanding stuff.

Thumbnail images

Thumbnails load fast and can then expand to most any size. Chose a thumbnail format which is still big enough to attract the curiosity of your visitor.

Example: this is a 120x80 thumbnail. It gives a ‘small’ idea about what the big picture could be.

Bianca Gubalke on the Cover

Embed medium size Images

If a picture is less attractive as a thumbnail, just embed a medium size format:

Example: 300 wide for this one.

Hanno Coetzee Personalized Business

Embed maximum width Image only exceptionally

One big image in a post will not hurt. But if you embed multiple pictures, loading time will increase dramatically.

Example: 500 wide.

Larrie Perkins Online Filing in Asia

Here we choose the big size because the thumb or 300 would not really have any significant effect.

Use Slide Shows

Slide shows also allow us to save time depending on how they load.

Check it out our next post.

Use overlay display for large pictures.

Check out the extra large versions of the above pictures by clicking on them:

Bianca Gubalke 2

Larrie Perkins 2

Also, some pictures will only develop the desired effect in big format: click to see Ismail from Global Sports :-).

Ismail from Global Sports London

or this one? Here our friend Ismail rocks, click below!

Ismail from Global Sports London

As you can see: this page loads much faster than the previous post about Besma Bashier HERE.

Join tonight’s YORGOO Call if you are interested in implementing the above. 8 pm London Time at yorGOtalk.

PS: If you would like to learn how to create such images, please post a comment :-).

PPS: I forgot: You can always use Galleries to organize the pics of a post or page in a more balanced way:

Gallery

Related posts:

1. Buy Nike Kicks in London at Global Sports
2. Dealing with Images on your Blog
3. Global Sports US
4. Nike Kicks on Google by Semiomantics
5. Best Buy Nike

• hanno

Related posts:

1. How to Make Money with Images
2. Managing Images on YORGOO Press
3. How to Make Money with Images
4. Global Sports News
5. Protected: Global Sports Update

[album id=2 template=compact]

How to present screen shots

YORGOPO Press

More Screen shots

If you have a fast connection, click HERE and watch the movie; in fact on my screen it’s much faster and perfectly smooth but the movie will give an idea what we are talking about when we talk about digital image presentation, 3D effects and so on.

Or try this:[kaltura-widget wid=“vn5zceebkw” width=“500” height=“432” addpermission=“0” editpermission=“0” /]

or this

Extended Album

[album id=2 template=extend]

Slideshow

Let’s have fun tonight!

Related posts:

1. Rotating Headers and Banners on YORGOO Press
2. YORGOO and Semiomantics launch YORGOO Press
3. YORGOO Press News
4. YORGOO Press is ready for Release
5. Monetize YORGOO Press

• yorgoo 2011

Related posts:

1. How to Make Money with Images
2. How to Make Money with Images
3. The Purpose and Future of YORGOO Media
4. BuddyPress featured on YORGOO Blaster
5. Protected: Global Sports Update

Located at the foot of Chapman’s Peak Noordhoek and the Noordhoek Valley is one of the preferred destinations around Cape Town. Rural atmosphere, the famous beach, charming accommodation make it an ideal place to go.

I am sure Bianca will share with us what life in Noordhoek is all about.

Noordhoek Image

Click the image to see live size.

Noordhoek on Google

Checking out Noordhoek on Google I notice about just tourism related websites, an insignificant  Wiki entry and a Real Estate site. It’s time for a publication by, about and for people from Noordhoek.

Noordhoek on YORGOO Media

The YORGOO Media platform is an ideal place for communities to build an online network. First because the sites are tuned for high visibility, they are easy and quick to set up and best of all: they are FREE. Second because the personal sites are linked through the BuddyPress module which allows for the creation of a real social network. Setting up a Group called Noordhoek is a matter of 3 seconds. Inviting people from Noordhoek to join is an easy task — it’s enough to make it known that the facility exists.

Noordhoek Online Business

Let’s think about it:

You would like to launch a local online business but you don’t want to bother with technicalities, hosting, scripts and other distracting stuff. You neither want to spend a lot of money to start with, but you want to offer a real service to the community which can be financed by local and external advertisers.

Here is my plan:

1. Grab all Google top 10 positions on “Noordhoek” with Noordhoek related sub-domains on YORGOO Media plus use your own sites to get there as well. The point is: all these tourism and real estate sites need to buy advertising space either from you or from Google.

Examples:

noordhoek-realestate.yorgoomedia.com

noordhoek-tourism.yorgoomedia.com

noordhoek-accommodation.yorgoomedia.com

noordhoek-horsebackriding.yorgoomedia.com

2. Offer free websites to the whole population of Noordhoek and show them how they can use the social network as well as the blog.

3. Get a license from YORGOO Media to load a few themes for the users from Noordhoek; build local ads straight into these themes and adapt them as need arises. Make sure that on every site there is community news.

4. Get local contributors for the Noordhoek main site to make it THE authority site.

The nice thing about the plan: the population of Noordhoek shapes the online profile and image of their town instead of people from outside. This is all in line with our philosophy about: get in control of your name and brand. Why should Noodhoek not be master of its own destiny? Why should Noordhoek just remain in the hands of big brother Google and some smart agencies in Cape Town making the money on the brand name Noordhoek?

Hey guys and gals from Noordhoek: let’s bring the cash back home and let’s shape the Noordhoek Online Image together. YORGOO Media is ready to help and to support the project.

Related posts:

1. Hosting South Africa News 105
2. Hosting South Africa
3. New Hosting South Africa Theme Released
4. Hosting South Africa
5. Hosting South Africa

• yorgoomedia com

Related posts:

1. South Africa Houseboats move to Hosting South Africa
2. Monkey Valley Beach Nature Resort Noordhoek
3. Hosting South Africa
4. Hosting South Africa
5. BuddyPress featured on YORGOO Blaster