Many of you are familiar with WordPress and with its login page wp-login.php. There is nothing wrong with it, the form works fine and it does what it’s supposed to do.

But for many reasons developers wants to change it, the most commune one is to have a different style for it, so the login / register form will look much like the theme design and will no confuse visitors. After all, if a hook exists for that, it means that there is nothing wrong customizing it.

If you want to have a custom login form on your WordPress website than you will have to google “custom WordPress login form”, there are a lot of tutorial around the web to help you achieve that.

On this post I’m not going to do a tutorial on how to have a custom WordPress login form but I’m going to show how add placeholder on WordPress login form and how is the right way to do it.

The default usage of wp_login_form() function is as below:

$args = array(
	'echo'           => true,
	'remember'       => true,
	'redirect'       => ( is_ssl() ? 'https://' : 'http://' ) . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'],
	'form_id'        => 'loginform',
	'id_username'    => 'user_login',
	'id_password'    => 'user_pass',
	'id_remember'    => 'rememberme',
	'id_submit'      => 'wp-submit',
	'label_username' => __( 'Username' ),
	'label_password' => __( 'Password' ),
	'label_remember' => __( 'Remember Me' ),
	'label_log_in'   => __( 'Log In' ),
	'value_username' => '',
	'value_remember' => false
);

Let’s say that we want a custom login form which shows only username and password on top of page, like the one illustrated on the image below:

In a similar case the WordPress login form function will be like the on below:

<div id="my-login-form">
<?php if ( ! is_user_logged_in() ) { ?>
 <?php $args = array(
    'remember'     => false,
    'form_id'      => 'my-top-bar-form',
    'id_submit'    => 'my-submit-login',
    'label_log_in' => __( '›' ),
    'id_username'  => 'my-user',
    'id_password'  => 'my-pass',
 );
 wp_login_form( $args ); ?>
 <?php if ( get_option( 'users_can_register' ) ) : ?>
   <a class="button pe-register" href="<?php bloginfo( 'wpurl' ); ?>/wp-login.php?action=register"><?php _e( 'Register', 'SHOMTek' ) ?></a>
 <?php endif; ?>
 <?php } elseif ( is_user_logged_in() ) { ?>
   <a class="button pe-logout" href="<?php echo wp_logout_url( get_permalink() ); ?>"><?php _e( 'Logout', 'SHOMTek' ) ?></a><?php } ?></div>

Now if we put this code somewhere on our WordPress theme files like header.php it will generate the custom login form, of course you will have to put it in the right place where you will want the form to be showed.

After showing the form we will have to add some css styles for it and hide the username and password label.

#my-login-form #my-top-bar-form p.login-username label,
#my-login-form #my-top-bar-form p.login-password label {
  display: none;
}

Now that we have hidden labels we will need to have placeholders otherwise the form will make no sense. There is no build in hook for doing that on WordPress but we will have to do it by using jQuery

Supposing that we have a script on our theme named theme.js, what we are going to do first is to find the WordPress function used to enqueue the script and modify it to add localize support for our form placeholder.

if( !function_exists('load_theme_scripts') ){
  function load_theme_scripts(){
    wp_register_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array( 'jquery' ), $theme->get( 'Version' ), true); // register theme.js script
    // add localize support for our placeholder
    $translation_placeholder = array(
      'usernamePlaceholder' => __( 'Username', 'SHOMTek' ), // variable for username placeholder
      'passwordPlaceholder' => __( 'Password', 'SHOMTek' ), // variable for password placeholder
    );
    wp_localize_script( 'theme_js', 'placeHolderForTopBar', $translation_placeholder ); // hook wp_localize_script

    wp_enqueue_script( 'theme_js' ); // load our theme.js script
  }
}
add_action( 'wp_enqueue_scripts', 'load_theme_scripts' );

Remember, if you want the localize support to work you will need to register script before than enqueue it because if you will enqueue it without registering before the localize support will not work

Now that we have added localize support for our placeholders the next thing to do is adding to lines on our theme.js file as below:

(function ($) {
  "use strict";
  $(document).ready(function () {
    $('#my-user').attr('placeholder', placeHolderForTopBar.usernamePlaceholder);
    $('#my-pass').attr('placeholder', placeHolderForTopBar.passwordPlaceholder);
  });
})(jQuery);

Everything is ready. We have custom WordPress login form with placeholders done in the right way, supporting localize as well.

Happy coding!

The post Placeholder for custom WordPress login form appeared first on SHOMTek | Internet Marketing Company.

Before starting lets have a complex WordPress query with custom meta fields

Some times ago I created a WordPress plugin for testing purpose and personal use.

What this plugin does is very simple, it adds some custom fields (metaboxes) on each WordPress post where user can choose to make a post a sticky post, with the option to choose and expiration method with two options manual and automatic.

If user will check manual method then he needs to come back to that post and uncheck the option Make this post sticky.

If user will check automatic another option will be visible, where he can check expiration date and time, after the selected time will pass the post will be removed from sticky post.

Plugin functions outputs only one post, because it removes every custom fields added by the plugin from all other posts if a new post is set as sticky. The sticky option used here doesn’t have to do with the build in sticky option used on WordPress.

The WordPress query used to loop through posts was a bit complex because it need to get one post from all posts where the custom field was set for that post to be sticky and the Expiration method was set manual or automatic and if it was set automatic the current time must be greater or equal to the expiration time.

Here is the WordPress query

// Let's build the arguments used on query
$query_arg = array(
  'post_type' => 'post',
  'showposts' => 1,
  'meta_query' => array(
    'relation' => 'AND',
    array(
      'key' => 'my_sticky_post',
      'value' => 'on',
      'compare' => '='
    ),
    array(
      'relation' => 'OR',
      array(
        'key' => 'my_sticky_exp_time',
        'value' => 'manual',
        'compare' => '='
      ),
      array(
        'relation' => 'AND',
        array(
           'key' => 'my_sticky_exp_time',
           'value' => 'automatic',
           'compare' => '='
        ),
        array(
          'key' => 'my_sticky_exp_date_time',
          'value' => current_time( 'mysql' ),
          'compare' => '>='
        ),
      ),
    ),
  ),
);

$query = new WP_Query($query_arg);

Now the query is created, so we have to get what we want by using some WordPress build in functions as below

if ($query->have_posts()) :
  while ($query->have_posts()) : $query->the_post();
  echo '<div>';
  echo '<a href="' .get_permalink(). '" title="'. get_the_title() .'" >'. get_the_title() .'</a> ';
  echo '<div>' . get_the_content() . '</div>';
  echo '</div>';
  endwhile;
endif;
wp_reset_query();

Everything works well.
But for no reason i was searching on StackExchange and found a question where a user was trying to filter multiple custom fields with WordPress REST API 2 and the query was somehow complex as my query. So i though let’s give a try…

Lets go for a solution of filtering the same query using WordPress REST API v2

With WordPress REST API you may get posts from your website by using many filters including custom taxonomies.

But when it comes to filter posts by using meta fields is not that easy because by default filtering using meta fields is not allowed (for security reasons, if you will use this post to create a similar function on your website used on your own risk).It is not allowed by default but is not that this can’t be achieved by using built in hooks.

The rescue here is rest_query_vars. This hook will allow us to set custom query attributes to the allowed query variables. Here is how to use it:

add_filter( 'rest_query_vars', 'api_allow_meta_query' );
function api_allow_meta_query( $valid_vars ) {

  $valid_vars = array_merge( $valid_vars, array( 'meta_query' ) );

  return $valid_vars;

}

Adding this function on WordPress theme functions.php will allow us to filter the request using the new fields

For this test I created a new php file a putted it on another domain and created the function to get the post from my WordPress website and output it in the new domain.

The function used for retrieving the data from the WordPress site is as below:

/**
* Created by PhpStorm.
* User: emilushi
* Date: 5/25/16
* Time: 1:17 PM
*/

$curl = curl_init();
$dt = new DateTime();
$fields = [
'filter[meta_query]' => [
  'relation' => 'AND',
  [
    'key' => 'my_sticky_post',
    'value' => 'on',
    'compare' => '='
  ],
  [
    'relation' => 'OR',
    [
      'key' => 'my_sticky_exp_time',
      'value' => 'manual',
      'compare' => '='
    ],
    [
      'relation' => 'AND',
      [
        'key' => 'my_sticky_exp_time',
        'value' => 'automatic',
        'compare' => '='
       ],
       [
         'key' => 'my_sticky_exp_date_time',
         'value' => $dt->format('Y-m-d H:i:s'),
         'compare' => '>='
       ],
     ],
   ],
 ],
];

$field_string = http_build_query($fields);

curl_setopt_array($curl, [
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => 'http://yourwordpresswebsite.com/wp-json/wp/v2/posts?' . $field_string
  ]
);

$result = curl_exec($curl);

$jsonresult = [];
$jsonresult = var_dump(json_decode($result));

print_r ($jsonresult);

Remember: for everything to work as needed you need to have cURL installed on your server, as well you need to have WP REST API v2 plugin installed on your WordPress website.

Let’s explain what this function does:

First we need to start a cURL session by using curl_init(), then we need to set a variable for the current date and time by using new DateTime() which will be used to compare current time and the expiration time stored on meta filed.

Next step will be creating a variable which holds all the fields that will be used on the REST API filter. After creating the fields we will use, we need to convert them to an encoded query string by using http_build_query

After encoding it the URL will look like this:

http://yourwordpresswebsite.com/wp-json/wp/v2/posts?filter%5Bmeta_query%5D%5Brelation%5D=AND&filter%5Bmeta_query%5D%5B0%5D%5Bkey%5D=my_sticky_post&filter%5Bmeta_query%5D%5B0%5D%5Bvalue%5D=on&filter%5Bmeta_query%5D%5B0%5D%5Bcompare%5D=%3D&filter%5Bmeta_query%5D%5B1%5D%5Brelation%5D=OR&filter%5Bmeta_query%5D%5B1%5D%5B0%5D%5Bkey%5D=my_sticky_exp_time&filter%5Bmeta_query%5D%5B1%5D%5B0%5D%5Bvalue%5D=manual&filter%5Bmeta_query%5D%5B1%5D%5B0%5D%5Bcompare%5D=%3D&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5Brelation%5D=AND&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5B0%5D%5Bkey%5D=my_sticky_exp_time&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5B0%5D%5Bvalue%5D=automatic&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5B0%5D%5Bcompare%5D=%3D&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5B1%5D%5Bkey%5D=my_sticky_exp_date_time&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5B1%5D%5Bvalue%5D=2016-05-25+21%3A29%3A35&filter%5Bmeta_query%5D%5B1%5D%5B1%5D%5B1%5D%5Bcompare%5D=%3E%3D

After encoding our URL we start the transfer by using curl_setopt_array. After setting all the options used on the transfer we execute the cURL session by using curl_exec().

Final step is to decode and print the result by using json_decode(). This will output all the data transferred from the WordPress website using REST API v2.

Now you will have to loop through all the results you have received and show only those you will need and work a bit with HTML and CSS to have a nice view.

I hope you have enjoyed this post and as well hope that this post will help you a bit on what you want to achieve. If you will have any question when following the steps explained on the post please leave a comment and i will try to replay to you on time. Don’t forget to share it. All the bests!

The post WordPress REST API with meta fields appeared first on SHOMTek | Internet Marketing Company.

WordPress is the most powerful blogging platform on earth (I don’t know if aliens use it :-p), I’m not going much further about WordPress because if you have reached this post it means that you have searched google for WordPress cache solution or something else related to WordPress and you already know what WordPress is.

What is cache and do you need it?

Based on Wikipedia: “In computing, a cache is a component that stores data so future requests for that data can be served faster…”
So it means that cache can help us make our website faster.
But how? There are different type of cache: like server cache, browser cache etc.

Server cache for example a user visits the homepage of a website, when the user types the url on the address bar and hits enter a request has been sent to the server where the website is hosted, the server executes the corresponding script, in WordPress index.php, during the script execution a query has been sent to the database server, for example to load 10 recent posts. This query now is cached on RAM for a period of time (based on configuration). When the next visitor will come to the homepage of the website the query to load 10 recent posts will not be executed anymore from the server but the query result will be served directly from the RAM so the page will load faster.

Browser cache logic is the same with server cache but in the case of browser cache the files are cached (stored) on the user computer and they are static files like images, js and css. In this case when the user visit the webpage the static files are stored on his computer and when he visit it again the browser checks only if these files are changed or not, if they are not changed then the browser servers them from users computer so the website is loaded much faster as there is no need to make requests to the server for those files.

The difference between server cache and browser cache is that for example in server cache a query stored in RAM will be served to all visitors instead of browser cache when cached files are served to each user from his own computer after the first time he visits the website.

It has happened to all of us: when we navigate to a website if it is not really very very important to us and if it doesn’t load in 5-10 sec we hit the back or stop button on our browser. So if you are a website owner; first thing you have to do is to check your website speed and load time, because if it take more then 5 seconds that you are losing a lot of visitors.

If your website is using WordPress than you can save a lot of time and money to speed your website as there are some nice plugins on WordPress plugin directory that can help you speed your site.

The most well known plugins used for WordPress cache are: W3 Total Cache, WP Super Cache and WP Rocket.

So far so good, but how will you choose which one to use for your website?

First thing that you have to do is to check your website page speed without a cache plugin and identify your website problems and needs, what is slowing it?
You can check page speed with: GTmetrix or Google Pagespeed. There are a lot of other tools around the internet but these two are the most popular.

What are we going to do is: Testing an example website without any WordPress Cache plugin enabled and then we will test each plugin separately and decide based on some criteria:

• Cost. Some of the plugins used for cache are free and some others with a paid subscription. But being a paid plugin doesn’t mean that it is better then those who are free.
• Easy to install and configure. We will test each the three plugins mentioned above and measure the time needed to configure each one.
• Functionality and compatibility. Not every cache plugin is compatible with your theme, server configuration, WordPress configuration or with other plugins you have installed on your website.
• Support, forum and documentation. Based on your website configuration and your server not everything will work as you expected, so some times you may need some support on what you will want to achieve.

Testing without WordPress Cache plugins

First we are going to test a website without any cache plugin and see the website performance and speed. After that we will test the same website with WordPress Cache enabled and test each plugin separately.
The website that we will use for test is: www.emilushi.com which uses the same WordPress version, theme, plugins and content from www.shomtek.com.
I’n the image below we may see the page-speed test of the webpage without any WordPress cache plugin enabled.

ab -n 1000 -c 100 http://www.emilushi.com/

The test above will send 1000 request to www.emilushi.com with 100 concurrent requests. We haven’t specified the time for test as we want to know which will be the maximum number of requests made per second.
result:

Concurrency Level:      100
Time taken for tests:   205.626 seconds
Complete requests:      1000
Failed requests:        0
Requests per second:    4.86 [#/sec] (mean)
Time per request:       20562.646 [ms] (mean)
Time per request:       205.626 [ms] (mean, across all concurrent requests)
Transfer rate:          6.59 [Kbytes/sec] received

Conclusion: Based on the tests made without any WordPress cache plugin enabled we have

• Page-speed score: 67
• YSlow score: 68
• Page Load Time: 5.3s (not bad)
• Requests per second:4.86

Now lets test the same website with cache plugins enabled and we will start with WP Super Cache.

WP Super Cache

WP Super Cache is a free WordPress plugin created and maintained by Automatic with more than 1 million active installs and rated 4.2 out of 5 on the WordPress plugin directory.

What WP Super Cache does is: after the first visit it creates an html file for each page. Then the webpage will be served as a static html file for all the other users that will visit the website.
If you install WP Super Cache you will have to visit each page of your website to create the static file of each page so when a visitor will want to access you website it will be served from the cached file.

We will do the same server load test that we did before when we had no WordPress Cache plugin enable and test the server load time with WP Super Cache enabled and configured.
The test result for:

ab -n 1000 -c 100 http://www.emilushi.com/

is as below:

Concurrency Level:      100
Time taken for tests:   174.149 seconds
Complete requests:      1000
Requests per second:    5.74 [#/sec] (mean)
Time per request:       17414.932 [ms] (mean)
Time per request:       174.149 [ms] (mean, across all concurrent requests)
Transfer rate:          470.97 [Kbytes/sec] received

As we can see from the result above we have saved 31.477s from the total time needed to take the test and the Requests per second is increased with 0.88 requests/s, it’s only a bit better that the website version without a WordPress Cache plugin.

Below you can watch a video that we have recorded testing the time needed for plugin installation, configuration and the page speed scored with cache enabled.

W3 Total Cache

W3 Total Cache is a very complex plugin with full of free and premium features. It supports Web Browser cache, Database cache, Object cache, HTML CSS and Javascript minification as well some other third party API like, New Relic or CDN like Max CDN.
What i really like from it is that W3 Total Cache supports opcode cache and memcached. So if you have a server configured to work with memcached your website will be much faster otherwise you will have to use disk cache which is a some how slower then using memcached.

We have taken the same Apache stress test that we did using WP Super Cache and the result is as above:

Concurrency Level:      100
Time taken for tests:   164.136 seconds
Complete requests:      1000
Requests per second:    6.09 [#/sec] (mean)
Time per request:       16413.563 [ms] (mean)
Time per request:       164.136 [ms] (mean, across all concurrent requests)
Transfer rate:          395.38 [Kbytes/sec] received

As we can see from the test result W3 Total Cache is better the WP Super Cache but the performance improvement is not that big. So we have saved only 10s from Total time needed to take the test and only few points from Requests per second.

Watch the view below that we have recorded to test time needed to install and configure W3 Total Cache and as well the test we did on GTmetrix.

WP Rocket

Based on my experience WP Rocket is the most useful cache plugin that i have ever used on my website or on our clients websites.

What i most like on WP Rocket is that the plugin minifies all CSS files that you may have on your website and than it combines them in one CSS file, it does the same for all JavaScript files. This features helps you decrease the number of requests that are made on a server every time that a visitor comes to your website.
Other features that are supported on WP Rocked are: LazyLoad for images and embed video, DNS prefetch, CloudFlare Compatibility, CDN, Varnish Caching Purge etc.

Another feature that will become available soon is the fragment cache. What fragment cache does is: it helps you cache all the page of a website instead of a dynamic part of it, so if you have a block of code that changes every page load or every specific time you will not want to cache that part as it will brake the function, so by using fragment cache you may cache or not specific blocks of code inside a single page.

At the moment if you will need to use fragment cache then you will have to use W3 Total Cache as it supports fragment caching.

Below you will find the Apache stress test we did with WP Rocket enabled.

Concurrency Level:      100
Time taken for tests:   125.145 seconds
Complete requests:      1000
Requests per second:    7.99 [#/sec] (mean)
Time per request:       12514.536 [ms] (mean)
Time per request:       125.145 [ms] (mean, across all concurrent requests)
Transfer rate:          445.18 [Kbytes/sec] received

As we can see from the test WP Rocket is much more faster then the other two plugins we have tested before. The total time needed for test 40s less the W3 Total Cache and as well the number of request per second is about 2 which mean that we may have 2 more requests per second compared to W3 Total Cache, about 2.5 requests more than WP Super Cache and about 3.5 requests more than we had with no WordPress Cache plugin enabled.

We have recorded a video as we did before with the other two plugins to test the time needed for the configuration and the pagespeed using GTmetrix. You can watch the video below.

Conclusion

Based on all the test we have made we may say that WP Rocket is faster then the other two plugins. If you will want to use a free plugin then you will have to try W3 Total Cache.
Remember that you can’t have same results on different servers and on different websites as the pagespeed and plugin configuration will be depended on your server configuration, other plugins that you are using on your website and as well on your WordPress theme as well.

In the chart below you may see all the important results for all the three plugins and decide which one to use.

Fixing WP Rocket “bug”

If you will have the same error that I had when configuring WP Rocket on the video above, than you will have to follow the below steps:

1. Navigate to WordPress plugin folder and then go to:

/wp-rocket/inc/functions/

open minify.php, go to line 74 and replace this:

$base_url = WP_ROCKET_URL . 'min/?f=';

with:

$base_url = WP_ROCKET_URL . 'min/index.php?f=';

2.Navigate to WordPress plugin folder and then go to:

/wp-rocket/min/

open .htaccess file and replace all the content of file with this:

DirectoryIndex index.php
<Files index.php>
   Order allow,deny
   Allow from all 
   Require all granted
</Files>
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /min
RewriteRule ^([bfg]=.*)  index.php?$1 [L,NE]
</IfModule>
<IfModule mod_env.c>
SetEnv no-gzip
</IfModule>

The post WordPress Cache appeared first on SHOMTek | Internet Marketing Company.

At first we will explain what are structured data and why are they needed for a website. In this blog will walk through the structured data used in a blog post, what are they, why are they needed, where to test them and where to get more info.

What are structured data (rich snippets)?

Rich snippets are some html tags used around before every section of the website content. First of all you will start by putting the correct tag at beginning of you website based on it’s purpose so for example if it is a blog category you will start by:

<html dir="ltr" itemscope="" itemtype="http://schema.org/Blog" lang="en">

This part will tell to a web-crawl that the purpose of this page is Blogging, and the web-crawl will search for other required data, like: Post title, post image, author, date created, date modified etc.

The rich snippets are used for almost everything that can be showed through the web, for a person (his work, address, his parents, siblings etc), for a product (product name, manufacture, price, rating etc), for an event (event name, event date, venue etc). So almost every section of a webpage can have it’s corresponding structured data.
The most used rich snippets format are RDFa (Resource Description Framework in attributes) and Microdata, other formats are: Microformats, <meta> tags and Page Date.
Based on a 2014 web crawl extraction the most used format by web developers for structured data is RDFa followed by Microdata.
Which one to use? It’s hard to say which one to use because everyone of them has it’s unique purpose but both RDFa and Microdata do almost the same so deciding between these two is up you. In most of the cases I will use Microdata as it is much more simple to use, both of them are HTML5 standards.

Which is the purpose of using rich snippets on our website?

The purpose of structured data is to help a web crawls categorizing the information that they collect on a website or web application.
The most comune use of the information collected is showing it in a search result based on a user query to search on a search engine like Google.
If your website is not populated with the structured data then the crawl will show on a search result now all the information that a user may need or it will not show it as you thing that was going to be, so if you don’t add the appropriate tag for the image of you blog post it will not show up on a search result, or if you don’t add the posted date tag or author tag this info will not show up on a search result, as well websites with no structured data will have a lower SEO score and having lower SEO score means having less visitors on your website.

In general setting Structured Data correct in your website will increase the probability to show up in a search result which will increase your visitors numbers and as well will increase your website ranging among all search engines.

Where do you test your website Structured Data?

There are a lot of tools around the internet which will help you testing your structured data implementation but the mos used one is the one provided by Google (Google Testing Tool).

In the image above is a result from Google tool and as we see every tag entered on this test website has passed all the Google requirement. There is something in here to be mentioned: Not all the tags are required even if Google structured data tool shows an error for a missing tag.

As we see in the above image there is a error showed on the testing tool, the error tells us that the blog post is missing the publisher which has to be an organization, this is a tag required only by Google, I’m saying only by Google because it doesn’t make sens to be required, for example a personal blog will not have a publisher. As well logically it is not required for a blog post to have an image but this is a tag required by Google structured data testing tool.

What really makes sense to be required on a blog post is: Title tag, Author tag, Posted date tag and article body. Personally i think that all the other options has to be optional.

An example of error free blog post will as below:

<!doctype html>
<!-- Main purpose of the webpage -->
<html dir="ltr" itemscope="" itemtype="http://schema.org/Blog" lang="en">

<head>styles and scripts will be included in here</head>

<body>
  <!-- Blog post starts here -->
  <section itemscope itemtype="http://schema.org/BlogPosting">
    <!-- Headline - title tag -->
    <div itemprop="headline">
      <h1 itemprop="name">The black cat</h1>
    </div>
    <!-- Posted date -->
    <time datetime="1843-08-19" itemprop="datePublished">August 19, 1843</time>
    <!-- Author tag -->
    <a href="#" title="Edgar Allan Poe" itemprop="author" itemscope itemtype="https://schema.org/Person">
      <span itemprop="name">Edgar Allan Poe</span>
    </a>
    <!-- Main post image -->
    <figure itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
      <img src="img/the-black-cat.jpg" alt="The Black Cat">
      <meta itemprop="url" content="http://shomtek.com/img/the-black-cat.jpg">
      <meta itemprop="width" content="300">
      <meta itemprop="height" content="374">
    </figure>
    <!-- The post content -->
    <div itemprop="articleBody">
      <p>Article content will go here</p>
    </div>
    <!-- Some invisible tags to satisfy Google -->
    <div class="invisible">
      <a itemprop="mainEntityOfPage" href="your-canonical-post-url">The black cat</a>
      <meta itemprop="dateModified" content="1843-08-19" />
      <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
        <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
          <img src="//www.shomtek.com/wp-content/uploads/2014/01/logo.png" alt="SHOMTek">
          <meta itemprop="url" content="http://www.shomtek.com/wp-content/uploads/2014/01/logo.png">
          <meta itemprop="width" content="292">
          <meta itemprop="height" content="85">
        </div>
        <meta itemprop="name" content="SHOMTek">
      </div>
    </div>
  </section>
</body>
</html>

For more detailed information about Structured Data you can always visit the websites below, but be careful as you’ll lost :p

• Google
• Schema.org
• RDFa
• W3

The post Blog post structured data and Google testing tool appeared first on SHOMTek | Internet Marketing Company.

Working is not doing something for which you think that you know what you’r doing, or you know how to do it because you have learned it at school or somewhere else. If you don’t care what happens after you finish it, if you don’t feel exalted about getting job done than it’s not called work, that one is called give me some money and leave me alone.
You can ask a programmer for this one. Just ask him how he feels when his code works…

Since i have heard it for the first time it has become my motto:

I can’t imagine anything more worthwhile than doing what I most love. And they pay me for it
Edgar Winter

“What I most love” for me is coding, creating beautiful websites and web apps, converting graphic designer’s talent into code. For more then 8 years i have been working and learning php, javascrit, html, css and other programming languages and I really love it as it explains to you how everything works.

I have been graduated for Agricultural Management and since today i have worked as Reservation Manager, Marketing Manager and General Manager on different companies but i have never felt the same energy that i feell when coding, and for this I want to thanks a friend of mine who learned me the first steps on how to install and make changes on a Joomla site and this was about 8 years ago.

For about two years I’m working as a freelancer and it’s really great, I have free time for my one year old baby and still I have managed to earn enough money. During this time I have applied on some freelancing websites but i haven’t logged in to them since the first time I have created the account, they had a lot of commissions and as well as a new user if you want to get any project you must pay for getting listed on the featured developers otherwise forget it.

I was not going to search or apply in any other freelancing platform but a friend of mine told me that the top 3% of developers are working at Toptal. So i thought i will give a try and join the Web Development Group at Toptal, for many reasons, first of all is; that i really like their posts on Toptal blog, being part of Top 3% of Talents it’s really nice and here you start rewarding your self cuz you’r in the Top 3%.

So this is just the start, soon I will have the interview for being part of Web Development Group with the Top 3% of web developers. If you are a software engineer I recommend you to do the same.

The post Freelancing with Amla… appeared first on SHOMTek | Internet Marketing Company.

What can you, the UX developer, do to ensure that the product you have built is delivered in a timely manner without sacrificing the quality of the user interface and user experience?

My answer: Get your designers involved from day one, and keep them involved throughout the entire UI/UX development process. Make sure to establish clear communication lines and consistent messaging between developers and the designers.

Do You Have Everything You Need?

The worst thing that can happen during the implementation o any UI is lack of communication between the designer and the developer(unless they’re the same person). Some designers think their job is done once the PSD is sent over. But, that’s just wrong! You must create an always-on communication workflow that lasts beyond the delivery of the PSDs.

In many cases, it will take time before the designers see the actual UI/UX design implementation and, to their surprise, the build is completely different from the initial submission. (This happened to me more than once. I have sent over source files with complete descriptions and interaction prototypes, but when I finally saw the project, months later, it had different layout, different colors, and no interactions in place.)

Some designers might hate me for this, as this design workflow requires a lot of “extra” work on their side. However, creating and delivering full assets and information, in an organized way, is better for the project and the team as a whole.

Having everything a developer needs, in front of him, will speed up the process. A clean PSD is just not enough.

What do you need to get the job done effectively and efficiently?

These are the assets that a developer should expect from the designer to bring a UI/UX design to implementation:

• Resource file – Designer should place every element of the app in one file. This file should contain buttons, checkboxes, header styles, fonts, colors, etc. Basically, based on the information in this file, developer should be able to recreate any interface from scratch. It’s much easier for a developer to export any element from a single PSD, than to search multiple files for it.
• Assets – Make sure that developers get all the required assets, as source files should not be touched any more.
• Interaction prototypes – Days of “static screens” are long gone. Using smart interactions and animations, to smooth-out UX design workflow and implementation, is a common practice now. But, you can’t just say “this will slide in from the left ” to a developer. Designer should create actual prototype of that interaction. Prototype should include information like speed, velocity, etc., and the designer is expected to specify each of these values.
• Naming convention – Request a file naming structure to keep things organized. It’ll make it easier for both of you to navigate files. (No one likes to have things hidden in a background folder).
• HDPI Resources – We live in the “hard times”, with the huge density of the screens. Make sure that designer will deliver images in all of the required resolutions, so your application will look crispy everywhere. Note: use as much vectors as possible, it’s going to help you a lot (svg).

If you do find something else missing during the implementation, don’t be afraid, ping the designer and ask for it. Never skip, and never skimp! You are members of the same team, and your job is to deliver the best possible product. If a designer fails, you fail as well.

Work In-Progress

Utilize your designers during the UI/UX development process. Don’t keep them in the sidelines expecting them to just “push the pixels”. A designer sees possible innovations even before the implementation starts. To take the advantage of this, keep them in the loop. Provide them with access to see, and test, the work in progress. I’m well aware that no one likes to share unfinished projects. But, it is much easier to make changes in the middle of a build than at the end. Doing so may save you time and prevent unnecessary work. Once you give the designer a chance to test the project, ask him to compile a list of problems and solutions, and suggest improvements.

What to do when a developer has an idea that would change the look of an application? Discuss it with the designer, and never allow a developer to modify the design, without consulting the designer. This design workflow will assure that the build stays on track. A great designer has a reason for every element on the screen. Taking a single piece out, without understanding why it’s there, could ruin the user experience of the product.

UI/UX Design Project Management

Designers think that developers can bring a design to life in one day, or even in one hour. But, like great design, great development takes time and effort. Keep your anxious designer at bay by letting him see the progress of the build. Using external project management software, to make sure every revision is accounted for, is a great way to make sure you don’t miss important information discussed in an email conversation or a Skype session. And let’s be honest: sometimes changes and activities aren’t even communicated until they happen.

Whatever solution you use, be sure to choose one workflow process that the whole team will adopt and consistently use. On our team, I tried to push Basecamp because that’s what I was using, but our front-end developers thought it had limited features. They were already using other project management software to track bugs, progress, etc., such as JIRA, GitHub, and even Evernote. I understood that project tracking and management should be kept as simple as possible, so I migrated my UI design workflow to JIRA. I wanted make sure they understood my workflow and progress, but I did not want them to feel like design was another thing to manage.

Here are few suggestions for a project management tool:

• Basecamp – Tracks the progress of the design and development related tasks, and easily lets you export tasks. It also has a simple mobile client.
• JIRA – A fully customizable platform where you can easily set up custom boards for different areas. For example, organize boards to track activities such as back-end, front-end, design, etc. I think the mobile client is a bit weak, but it is a great solution for bigger teams and includes a bug tracking feature.
• Email – This is great for setting up a conversation or sending images. But please be carefull if you use email for feedback. Things can easily get lost.

You can also try Trello and other project management software, but the most widely used in our industry are Basecamp and JIRA. Again, the most important thing is to find a project management system that everyone can use on a consistent basis, otherwise it’s a moot point.

UX Design And Development Come Together

The designer and the developer are a powerful combination. Be sure to brainstorm UI and UX together as often as possible. Developers should be willing to help a designer conceive ideas, while a designer should have at least a basic knowledge of the technology that is being used.

Figure out the design workflow together. Don’t just blindly implement what your designers create. Be proactive, and create something that looks beautiful and has a great user experience, by taking advantage of your two different perspectives. Designers think outside of the box and see crazy animations, ideas, pixels, and buttons, while developers see the technology, speed bumps, and limits.

In my experience, every designer is crazy about pixels and interesting concepts. But sometimes, a designer gets to a point when he has an idea but the developer pushes back and says, “This isn’t going to work well, once it’s implemented. There will be performance consumption issues”. Recently, I was looking to implement a modal window with a blurred background, but this blur caused heavy loading times. To solve this problem, the developer suggested using a regular, full color overlay, which loads faster and retains image quality.Designers, pay attention: Don’t compromise the user experience for the design.

Feedback Loop

Feedback from the designer is crucial, and it has to happen as often as possible. It’s probably the most time (and power) consuming thing that you will do. But, you need to adopt it to be able to deliver perfect results. Here are couple of UX and UI design worklow tips on how to make your feedback perfect.

• Be visual – Feedback needs to be as specific as possible. Best way, to make it accurate, is to take a simple screenshot and highlight a problem you want to fix. It would be even better if you had a pictures of a current implementation vs how it is supposed to look. Visual communication will eliminate 50% of the questions.
• Be descriptive – Feedback should be accurate. You can’t just say “move this button up”. Designer must specify how many pixels a button should move, what padding should be used etc. Always include explanation of the problem, and appropriate solution for it. It’s going to take a lot of time, but it’s worth it.
• Be patient – Keep in mind that the designer and the developers do not share the same focus. If developers don’t fully understand designer’s idea, it can lead to confusion and wrong decisions. In every case both sides need to be patient and willing to help the other team members. It’s really tough sometimes, but it is a soft skill that every designer and developer should learn.

It’s pretty obvious that these things needs to be combined together to make them into a suitable design workflow. But, what tool can actually help you deliver the feedback?

• Email – I’m not afraid to say that this is still the most common platform to deliver the feedback. It is totally fine to use it, if you will follow couple of simple rules.
  • First, use single email thread for your feedback. Don’t put every individual tweak to a new email with a different subject.
  • Second, create the list of fixes. Try to sit down and think about every tweak or fix you noticed.
  • And lastly, don’t send huge list at once. Try to break it down to smaller individual lists and go part by part.
• Skype (Hangouts) – Voice is really powerful tool for the feedback. You can immediately ask and answer questions. But, make sure to take notes and sent over the follow up message (email) after the call.
• Collaboration tools – I will be honest with you. I’m not a big fan of the collaboration tools. But, they have a big benefit. They help you to keep feedback in place. Asking and answering questions is fast, and it stays there forever.

Here some of the great tools:

Feedback annotation:

• https://redpen.io/
• http://collabshot.com/
• http://www.designdrop.io/

Collaboration tools:

• http://www.invisionapp.com/
• https://basecamp.com/

Conclusion

Establish a system and UI/UX design workflow that keeps the communication lines open throughout the design and development process. This will allow you to implement great ideas, forecast potential problems, and prioritize important issues.

The developer and the designer can create great things together as long as they are willing to work as ateam. Learn from each other and design tutorials like this one!

Source:  A Design Workflow Tutorial for Developers: Deliver Better UI/UX On Time

The post A Design Workflow Tutorial for Developers appeared first on SHOMTek | Internet Marketing Company.

Do you own an WordPress based website on which you are posting latest news, personal thoughts about what happens around you or any thing else which is attractive for you and you’r readers and as well trying to monetize a bit your content?

We have been working for some of our clients which have WordPress sites and they needed to display their latest posts on a side-bar but using the build in widget offered by WordPress doesn’t fill they needs because they wanted to display their post with thumbnails, exclude current post from the list and as well have the possibility to display ads between post so they can maximize their profits from their website and content.

For these purpose we have a solution: We have developed an WordPress plugin which fills all of these requirements.

Latest posts with thumbnails can do all of these things you just have to download and install just like you do with the other plugins and after activating it you will find an widget under Appearance Widget menu.

What you can do with Latest posts with thumbnails  plugin:

Latest posts with thumbnails can be found on our Github repository and it is free so you can download fork or suggest improvements for it.

Download it by using the links below:

Version 1.0 release link | Plugin Repository

The post Latest posts with thumbnails and ads appeared first on SHOMTek | Internet Marketing Company.

How to use Meta Box in wordpress so that items or articles are ordered by date and time.

Meta Box is a useful plugin in WordPress that can be used directly from the backend and also directly from the theme and gives the programmer the possibility to add other fields for any item when want to build a custom post type. While we were working on one of the websites that we recently finished http://fidelityrp.com a real estate website for Fidelity Rental Properties, LLC we chose to use the Meta Box to add additional fields in the slide show, such as rental price, address, location, no. of rooms and bathrooms. Also during the website building process we had to insert a field for properties that had the currently rented status to establish the date when they would be available and for this we used the same technique. What Meta Box does is that it gives the programmer, the option to add a unique field for the date, but since the problem is that such input is recorded in the database in text format then such a field needs that its items are ordered according to the date in an increasing fashion from the nearest date onwards. In PHP and other programming languages this kind of ordering is done only with the use of numbers and to do this the date field must be registered in the database as UNIX timestamp the format YYYYMMDD so the date Sat, 03 May 2014 06:42:05 GMT will be converted in the database as 1399099325.

To do this one must add a custom Meta Box for the specific article/item, which it is done in the file config-meta-boxes.php and which is found in the plug-in directory if this action is done directly in the Theme. If not, then this can be added from the backend of WordPress and the format of Meta Box must be datetime which can be used as shown below:

$prefix = 'SHOM_TEK_';
global $meta_boxes;
$meta_boxes = array();

$meta_boxes[] = array(
// article ID this can be different on you based on your custom post type   
 'id' => 'property_details',
// Meta box title - Will appear at the drag and drop handle bar. Required.
'title' => __('Property Details','framework'),
// Post types, accept custom post types as well - DEFAULT is array('post'). Optional.
'pages' => array( 'property' ),
// Where the meta box appear: normal (default), advanced, side. Optional.
'context' => 'normal',
// Order of meta box: high (default), low. Optional.
'priority' => 'high',
// List of meta fields
'fields' => array(
// Dow here you will put all the custom meta boxes for your custom post type
array(
'id'        => "{$prefix}available_date",
            'name'      => __('Available Date','framework'),
            'desc'      => __('If property status is Soon For Rent provide the Available date','framework'),
            'type'      => 'datetime',
        ),

Now at your custom post type you will have a custom field which is a date time field.

This field will be registered in the database as text format. To change it in the UNIX timestamp format go to fie datetime.php which is in the folder inside the Meta Box folder and near line 93 the following must be changed:

From:
static function normalize_field( $field ){
	$field = wp_parse_args( $field, array(
	'size'       => 30,
	'js_options' => array(),
	'timestamp'  => false,
	) );
To:
static function normalize_field( $field ){
	$field = wp_parse_args( $field, array(
	'size'       => 30,
	'js_options' => array(),
	'timestamp'  => true,
	) );

Now, every time the date field needs to change it needs to be done in the UNIX timestamp format.

To show the date in frontview in your post the Meta Box needs to be called as follows:

ID);
		//get the date
		if( !empty($post_meta_data['SHOM_TEK_available_date'][0]) ) {
			$av_date = $post_meta_data['SHOM_TEK_available_date'][0];
			echo ' Available After ';
// convert to Unix timestamp, then reformat, then print result
			echo date("M d Y", $av_date);
			echo '';
		}
	?>

This will convert the date from the UNIX timestamp format 1399099325 to May 3 2014.

To order the articles/items according to the date a similar format needs to be used and of course this depends on the manner and method how the template is coded:

 'your_custom_post_type',
         'posts_per_page' => $number_of_posts,
         'paged' => $paged,
         meta_query' => array(
         array(
          'meta_key' => 'SHOM_TEK_available_date',
          'orderby' => 'meta_value_num',
          'order' => 'ASC'
         );
      ?>

This model will order and list all articles/items according to the nearest date.

If detailed search is needed and it is required that posts are ordered according to the date, then in the search function something like below needs to be implemented:

if($_GET['status'] === 'soon-for-rent' ){
           		$search_term['orderby'] = 'meta_value_num';
           		$search_term['meta_key'] = 'SHOM_TEK_available_date';
         		$search_term['order'] = 'ASC';
        	}

Be careful: status, soon-for-rent, SHOM TEK_availabe_date and search_term are terms used to be executed in the template built for http://fidelityrp.com, where status is a variable in WordPress to call the status of a property, soon-for-rent is the content of a custom taxonomy for the template, SHOM_TEK_available_date is the ID of the Meta Box created for the datetime whereas the search_term is a variable we created for the search function.

The post Using Meta Box in wordpress appeared first on SHOMTek | Internet Marketing Company.

It is not uncommon for young children to point at a McDonald’s golden arches while walking or being driven and yell, “French fry!”

According to the infographic below, 67 percent of 2-3-year-old children can correctly match logos and products.

For example, when Pepsi revamped its logo in 2008, the redesign set the company back $1 million. But Sergey Brin, Google’s co-founder, created his company’s logo himself for free. Also interesting: Twitter bought its logo from iStockphoto for $15.

So, how do million-dollar logos ingrain themselves in the minds of toddlers and adults alike? A lot of it has to do with color, the infographic explains. For example, McDonald’s arches are yellow. We often associate the color yellow with joy and energy. And let’s be honest: French fries are enough to make almost everyone feel joyous.

Other examples of logos that play off color include:

Ford: The blue logo inspires confidence, trust and comfort—exactly what you want from a car company.

UPS: The brown logo evokes feelings of reliability, dependability and support. A delivery company should be all of those things.

Firefox: The orange fox suggests creativity, enthusiasm and high mental activity, which most Web browsers would want to be known for.

For more on logo costs and how the symbols are designed, check out the graphic:

The post What is the cost of creating a Logo? appeared first on SHOMTek | Internet Marketing Company.

Does Google understand user indent when they search?

All traditional Search Engine Optimization has been focused on keywords. In fact, SHOM Tek has always recommended front-loading titles and URLs with the keywords used in the content. Fall, 2013, however, Google introduced its Hummingbird algorithm, which is its first major algorithm update since the 2009 “Caffeine” update and it seems a significant shift in Google’s approach.

We’re told that the main goal of the new algorithm is to make Google capable and far better at interpreting “conversational” language and understanding the intent and of a given search rather than just a series of keywords. This is what the announcement said:

“The main focus was that the new algorithm allows Google to more quickly parse full questions (as opposed to parsing searches word-by-word), and to identify and rank answers to those questions from the content they’ve indexed.”

What this means for us is that searches like “What’s the best reviewed plumber near my home?” will factor in the full statement and pull from reviews and maps in addition to just keywords. This shift in fact comes from the overall change in user behavior.

Over the years, searchers have leaned on the instinct of typing questions directly into Google rather than search terms. Here’s a screenshot of the rise in popularity of the search terms “How do I” and “How do you” over the last few years.

In the future, we expect that the role of natural or conversational language will play an even bigger part in search engine optimization. We believe that this move toward search intent is actually a really good augur for inbound marketers whose core strategy involves creating useful content aimed at answering user questions.

Instead of only thinking about keywords that describe your services or products, think about the questions your customer would ask to find your company online and then create content around that.

The post Search Engines Getting Better at Understanding Intent appeared first on SHOMTek | Internet Marketing Company.