All posts by Aurovrata V.

Highly motivated by problem solving task involving new concept and methods. Very good with numbers and making sense of interconnected data. A research background in Astrophysics has given him the problem-solving tools and rationalisation methods that have been highly successful may it be in the Financial banking world or the European Space Agency. He aspires to serve a resurgent India in the belief that she alone has the depth of awareness to lead humanity towards a new consciousness, united in all its diversity.

Totally Offline Local WordPress

I have been looking for this for a long time and finally found an interesting plugin, Airplane Mode for WordPress.  This plugin allows you to install WordPress on your local desktop/laptop and stop it from trying to load fonts, icons, gravatars, or javascript libraries of any sort.

Without this you will notice that a local installation devoid of an internet connection will have page loading processes delayed by the browser attempting to load external resources.    This is a real waste of time when trying to develop a site and one is prone to reload a page several times a minute in order to test changes in the code.

Suppress error notices using WordPress’s WP_DEBUG

In your `wp-content` folder create a new folder called `mu-plugins` and in that folder create a php file with the error level you want, for example:

1
2
//Turns off notices
error_reporting(E_ALL ^ E_NOTICE);

If you are using PHP 5.5 +, you will get deprecated noticed for WordPress’s mysql_* functions, you can turn them off using:

1
error_reporting(E_ALL & ~E_DEPRECATED & ~E_STRICT);

Or for something really robust, which happens to be the case a lot.

1
error_reporting(E_ALL &  ~( E_DEPRECATED | E_USER_DEPRECATED | E_USER_NOTICE | E_STRICT ));

Source: How to remove error notices using WordPress’s WP_DEBUG | ../ wycks

Boosting Registration forms

In a recent project we had to make a custom registration form with a various dynamic categories loaded on the form from which a new user can select using a radio button.

Simpler Registration Form Plus

We discovered the wonderful plugin which is the Swiss-army plugin for registration forms.  Why do I call it the Swiss-army of registration forms?  Simply because the author seems to have thought of all the possibilities.  To start with, the form automatically creates the additional user meta fields inside your WordPress installation for any elements you create in the registration form, hence ensuring that your logged-in users have all the extra registered fields integrated into their profile.

The other beautiful aspect is that it is allows for users to view and edit their profiles using a separate [profile_page] shortcode provided by the plugin and you can independently identify which of the fields should be visible in the profile page.

Video tutorial

The plugin comes with an embeded video tutorial which comes quite handy initially to figure out how to display the custom registration form using the shortcode provided.

Callback function for more customisation

Recently the fully loaded commercial version of the plugin was released to the WordPress community (blessings on the author for his next life-time for this good karma :) and it comes with an additional functionality that allows for a custom field to be added to the the registration form (select type = Callback) which call a user defined function to determine the shade and content of that field.  Brilliant I hear you say?  Sure it is.

How to get it to work is a little more complex to figure out since the documentation is thin if not non-existent…hence this post actually.

When you add a new field, selete the ‘Callback’ type and in the option field, enter the name of your function, for example… echo_registration_categories the plugin will call your function with 1 argument, the value of the field saved in the database… this is in order to ensure the field is pre-populated when loaded on the profile page for example.  Here is an example,

//display registration categories in sign up form
function echo_registration_categories($args){
   //let's get the categories for this conference
   $categories = array();
   $categories[name] = get_option("conf_registration_categories_name");
   $categories[currency]= get_option("conf_registration_categories_currency");
   $categories[early_bird_fees] = get_option("conf_registration_categories_early_bird");
   $categories[full_fees] = get_option("conf_registration_categories_full");
    
   $today = strtotime(date('d M Y'));
   $earlyDate = strtotime(get_option("early_bird_date"));
   $isEarly = ($today<=$earlyDate);
  // if($text)
   $output ='<div id="css-user_category" class="option-field radio ">';
   $output .='  <label for="user_category">Registration category<span class="required">*</span></label>';
   $output .='      <ul>';
   $userCategory =$args;
   if ( empty($args) && is_user_logged_in() ) {
      $user_ID = get_current_user_id();
      $userCategory = get_user_meta($user_ID, 'user_category', true);
   }
   for($idx=0; $idx < sizeof($categories[name]); $idx++){
      $checked = '';
      $text = $categories[name][$idx];
      if($text == $userCategory) $checked = 'checked';
      $cur = $categories[currency][$idx];
      $cost = $categories[full_fees][$idx];
      if(  $isEarly ) $cost = $categories[early_bird_fees][$idx];
      $output .='<li><input name="user_category" '.$checked.'  value="'.$text.'" type="radio">'.$text.' <span class="category-cost">'.$cost.' '.$cur.'</span></li>';
   }
   $output .='      </ul></div>';
   echo $output;
}

As you can see, the above outputs a list of radio input elements for a conference registration category.  The user value is passed as the argument $args when the field has a value saved in the database.  I have also added a check for getting the currently logged-in user’s value in case we want to call this function separately outside the context of the plugin….and that piece of code could be left out.

How to Disable Comments on WordPress Media Attachments

A lovely little piece of code to disable comments on Media Attachment pages which is a source of irritating SPAM…

Just paste the following in your functions.php file.

function filter_media_comment_status( $open, $post_id ) {
	$post = get_post( $post_id );
	if( $post->post_type == 'attachment' ) {
		return false;
	}
	return $open;
}
add_filter( 'comments_open', 'filter_media_comment_status', 10 , 2 );

How to Disable Comments on WordPress Media Attachments.

Manage user profile and credentials

We recently required to force our newly registered users on a project to change their password on their first login.  This is handled by default in the WordPress core with the default password nag meta field,

update_user_option( $user_id, 'default_password_nag', true, true );

However, upon the first login the user is redirected to the wordpress default profile.php page which is not very intuitive, does not allow for customisation and more importantly is outside the scope of the template theme.

Template My Login to the rescue.

This is where I found a lovely little plugin, Template My Login (TML), which creates a set of pages with a simple shortcode in each of them. It creates a page for Login, Logout, Profile, Register and so on, allowing for each page to be automatically themed but also customised with a template.

Putting it all together.

Automatic registration of new users with auto-generated passwords can make a call to update the default password nag meta field,

update_user_option( $user_id, 'default_password_nag', true, true );

This can be called after a registration form, or within your code when you create a new user.
When a user logs-in for the first time they will be automatically redirected to their profile page.  Upon resetting their password, WordPress will automatically reset the default_password_nag meta field to null.

We can further modify the TML plugin default profile_form.php template to show a small message indicating that the user has been redirected to change their password if this is their first login,

<?php
/*
If you would like to edit this file, copy it to your current theme's directory and edit it there.
Theme My Login will always look in your theme's directory first, before using this default template.
*/
$nagPassword = null;
if ( is_user_logged_in( ) ) {
   //$user_ID = get_current_user_id();
   $nagPassword = get_user_option('default_password_nag');
}
?>
<div class="login profile" id="theme-my-login<?php $template->the_instance(); ?>">
<?php if($nagPassword) { ?>
    <p class="message">
        If this is your first log-in, you have been re-directed to your profile setting page in order to reset your password.
        &nbsp;
        Please choose a new password below
    </p>
<?php } ?>
    <?php $template->the_action_template_message( 'profile' ); ?>
    <?php $template->the_errors(); ?>
    <form id="your-profile" ....

The TML templates sit in the plugin folder, plugins/theme-my-login/templates just copy the relevant template to your theme folder and TML will first look there for the template file.  Easy as pie!

 

What is a good website?

This is a question that has many anwers, for it very much depends on the the definition of the question.  So I will start by defining the question itself.  What is a good website?  One’s expectations of a good website is really determined by one’s appreciation of what a distributed networked software can do to help one’s enterprise.  I believe that the vast majority of business owners have a very limited idea of this concept.  At its most basic avatar, a website is a virtual window to an enterprise, investing on the content and beautification of the website improves its quality, but nonetheless doesn’t change  its function as a basic window.

Communicating

Websites can be much more than windows.  Their next level avatar is in essence about communication, how well does it communicate the  message of the enterprise, its products, its services, its vision and modus operandi.  A good website should be able to do this with clarity and simplicity.  The home page being a crucial component of a successful online communication strategy.  The menu and navigational aid are important building blocks and the content of pages need to be simple, fluid and abundantly illustrated with images so as to reduce the need to read extensive passages.

Images should be of good quality, of generous dimensions, its no use to put small images where details cannot be seen, it frustrates the reader and generally leaves visitors with a negative impression.

The home page is simple and clear: most visitors to a new site have a very short attention span and if they don’t understand what this site is about and how to quickly find key aspects of the site, they will simply browse on.  A large slider often does a good job at solving this, but short and thoughtful headings, titles and menus make the whole experience much more inviting.

what is a good website - village kids using a computer

Work flow Process

If a company website is used to sell products or services, then the question of how easy is it to process a sale needs to be addressed, right from the identification of the client (logging into the site) to the culmination of the actual payment.  The process flow needs to be carefully planned and tested to ensure rapidity but also clarity of each step.  Ease of access to the account-related information such as a client’s details, their past interaction with the site, their pending processes and such information that allows a client/visitor to the site to minimise time lost in trying to find and accomplish what they are trying to achieve on the site.

An integrated enterprise tool

More and more websites are being used by business owners and employees as a tool to centralise their work and data/information.  However, a good website needs to have a clear vision in order to accomplish this.  A vision is clarified when one has an understanding of how technology can be harnessed for the service of the enterprise.  In a number of scenarios with our customers, we regularly enlighten them with functionality that help resolve some pain points.  Take for example an architect studio who recently approached us to built their website.

A case study....

So what is a good website?

To answer my initial question, a good website is one that at its most basic need is elegant, simple, and clear in showcasing the enterprise and its raison d’etre.

A good website is also a good communicating tool, an intuitive menu structure, and less written words more images that have been carefully picked to speak your 1000 words that you have omitted.

A good website is one that transcends the need to serve information, but rather plays an integral role in the enterprise’s development and growth.  The vast majority of SME websites are static, rarely updated and often out of sync with the evolution of the business.  Integrating the website into daily work process flow of the enterprise ensures regular updates and dynamic content.

A good website is about networking, integrating with social platforms, reaching out to its stakeholders, but this is a process that can only be achieved if the above 3 aspects are taken care of, and is usually achieved after months and possibly years of continuous updates and improvements.

Finally, a good website is labour of love, it needs to be fed with new content, updated, reviewed, polished, interacted with while being mindful of feedback from visitors who take the time to write some.Kindergarten children learning how to use computers.

Syllogic at the service of the Enterprise

This is what we do best, the application of an awakened mind at the service of the Indian small and medium enterprise.  We consult, we educate, but most importantly we apply intelligence with the aspiration of the reawakening of this great nation.

If you are in need of a website for your enterprise/project/business/organisation, get in touch, let us at least give you a free proposal and if you share our vision, we will consider working with your budget.

 

Dynamic Menus

There are many good tutorials to build custom menus for logged in/logged out users, see also our own post on the ajax login menu.  There are more complex approaches in order to customise the individual menu items using a the wordpress Walker class.  An excellent review of a custom walker can be found on the WordPress StackExchange.

However, I was looking to actually add menu items dynamically depending on the state of the site.  In this case, we have a client, a research centre at a university who asked us to redevelop their site as a portal of all their conference sites.  We created a WordPress MU portal which we customised to enable them to create new conference sites based on a template site that is pre-configured, enabling registration forms, abstract submission forms, payment gateways to be created for each new conference at the press of a button in the Dashboard.

One of the challenges was to dynamically add new conference sites to the main site menu as when they are created.  Furthermore, the conference menu has a Past sub-menu in which old conferences need to be listed.

I decided to use the Walker extension solution by adding a little customisation.  I created a new class, AddExtraMenuItems_Walker, which extends the WordPress core  Walker_Nav_Menu class.

So the Walker class is simply called in the wordpress function to display a menu structure,

wp_nav_menu( array('walker'=> new AddExtraMenuItems_Walker($extra_menu), 'theme_location' => 'primary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => 'my-menu-class', 'menu_id' => 'top-menu', 'echo' => false ) );

Remains to define the $extra_menu array arguments that are passed to the walker in order to insert it into the right menu. Here is an example. It assumes that there is a primary menu created in the Dashboard with the top level menu item ‘Conferences’ and a sub-item below this called ‘Past’,

$extra_menu = array(
 'Conferences'=>array(array('title'=>'ISOl 2015',
                               'url' => 'http://syllogic.asia/2015/',
                               'id' => 'menu_item_isol_2',
                               'class'=> 'menu-item menu-item-type-custom menu-item-object-custom'),
                         array('title'=>'ISOl Chicago',
                               'url' => 'http://syllogic.asia/2015/',
                               'id' => 'menu_item_isol_3',
                               'class'=> 'menu-item menu-item-type-custom menu-item-object-custom')),
 'Past'=>array('ul-class'=>'sub-menu',
                  'class'=>'menu-item-has-children left-sub-menu',
                  'sub-menu'=>array(array('title'=>'ISOl 2015',
                                             'url' => 'http://syllogic.asia/2015/',
                                             'id' => 'menu_item_isol_2',
                                             'class'=> 'menu-item menu-item-type-custom menu-item-object-custom'),
                                       array('title'=>'ISOl Chicago',
                                             'url' => 'http://syllogic.asia/2015/',
                                             'id' => 'menu_item_isol_3',
                                             'class'=> 'menu-item menu-item-type-custom menu-item-object-custom'))));

There is 2 type of menu being inserted here, the first one under ‘Conferences’ menu item, are 2 extra sub-item which are simply listed within the existing sub-menu list of ‘Conferences’.
The second set of menu is an entire sub-menu structure being replaced instead of an existing menu-item. In other words, ‘Past’ is a sub-item of top menu item ‘Conferences’. As such ‘Past’ does not have any children. This 2nd set of dynamic menu are placed below the ‘Past’, making it into a sub-menu.

Menu structures are dined as an array with,

array('title'=>the text of the menu item,
      'url' => the permalink for the menu,
      'id' => a css id for the <li> element,
      'class'=> css classes for the <li> element)

To add an entire sub-menu to a given item, you need to specify some extra arguments, namely the classes that changes an item into a sub-menu (on hover the sub-menu will appear) if you are using pure CSS for your menus. This is done using the following structure,

array('ul-class'=>the css class for the sub-menu 
    element, 'class'=>the css class for the menu item that will change to a sub-menu structure, 'sub-menu'=>array( sub-menu items as arrays, as defined above )

That’s it. Feel free to comment, query, clarify below…

Managing a development and live site

As is often the case when developing a new site for a client you have to work with a beta site to show-case the work to its stakeholders  and in parallel deploy updates to a live site.  In such a scenario one ideally wants the live site to be searched and indexed by search engines, and the beta site to remain hidden from public view.

So how does one reconcile these requirements is a question I have have been scrutinising and I share here the information so far gathered so that others may solve this problem too.

Stopping search engines from indexing the beta site

WordPress enables a single check-box setting from being enabled to dissuade search engines from indexing the pages of the a site.  You will find the setting in the admin Dashboard menu Settings->Reading.  However, you should be aware that it is up to the search engines to comply with the request.
Search engines indexing setting in WordPress Dashboard

One should also be aware that this works only for sites that are installed in the root folder of your site and not for sites that live in a separate folder.  In this case several other options are available, such as placing a robots.txt in your installation folder.

Locking down the beta site

The basic idea here is to enable views of the beta site to users with an account on the beta site.   I make use of the template_redirect hook in the functions.php file to redirect any request from the front page to a nice looking static html landing page…

add_action('template_redirect','beta_site_redirect');
function beta_site_redirect() {
    if (!is_user_logged_in() && !is_admin()) {
        //&& !'redirect.html'==get_current_template()
        //echo get_current_template();
        wp_redirect('/redirect.html');
        exit();
    }
}

The function checks if the request comes form a logged in user as well as where the request is coming from.  This ensures that we can still access the admin Dashboard and sign in as usual.  Once signed in we can then proceed to look at the front pages.

In order to make the experience a little more seamless, we redirect the visitor to a static html which informs them that they currently on the beta site and are being automatically redirected to the live site using the following html header:

<head>
<title> The CSR Journal</title>
<meta http-equiv="refresh" content="2;url=http://my-live-site.com">
</head>

The first number in the content attribute, content="2;..." is the time in seconds before the page is redirected to the url address given after the semi-colon.

IMPORTANT NOTE: make sure your static html is in the root directory of your WordPress installation and not in your theme folder!

Redirect your beta site SEO

if you find yourself in the situation where your beta site has a better page rank than your live site, then you can redirect them to your live site once you have finished the development cycle….

Fixing Custom Post breadcrumbs

When using a ready made theme such as one of the excellent Elegant Themes one is confronted to small issues of broken sections of the page templates when introducing custom post and getting them to display properly in the page templates

One such issue is the breadcrumbs link not working properly as a result of the custom taxonomies not being picked up properly by the core functions.  Here is some workaround for this.

In the case of the Elegant themes, you will find the breadcrumbs.php file in the includes/ directory.

So for example in the single post page template, the breadcrumbs are displayed using the following code.

...
//some code to display the authors link followed by
$category = get_the_category(); //returns the categories of this post
$catlink = get_category_link( $category[0]->cat_ID ); //gets the links for the first category
echo ('<a href="'.esc_url($catlink).'">'.esc_html($category[0]->cat_name).'</a> '.'<span class="raquo">&raquo;</span> '.get_the_title()); 
//displays the category in the breadcrumb

So we can include the following lines in order to ensure it works with our custom post

global $post; //we need to ensure we have access to the post object breadcrumbs are handled in its own template
...
switch ( get_post_type($post) ){ //switch on the post_type
  case 'my_custom_post_type': //
    $category = get_the_terms($post->ID, 'my_custom_taxonomy');
    $first_term = reset($category);
    $catlink = get_term_link( $first_term );
    echo (''.esc_html($first_term->name).' '.'» '.get_the_title());
    break;
  default: //default 'post'and below is the default code 
    $category = get_the_category();
    $catlink = get_category_link( $category[0]->cat_ID );
    echo (''.esc_html($category[0]->cat_name).' '.'» '.get_the_title());
    break;
}