Feb.21

Enabling Date picker in WordPress form

The Date picker is user calender plugin used to display date as graphical view.  The date picker library have different types of functionality and parameter to display the date setting. Min date max date, date range, start date end date (with grater than start date).

So we already have the date picker library in wordpress. We just need to enable the library and function to show the date picker in required places.

We need to include these library stylish and jquery.

/* Include the jquery and Style sheet for the date picker */

wp_enqueue_script(‘jquery-ui-datepicker’);
wp_enqueue_style(‘jquery-style’, ‘http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/smoothness/jquery-ui.css’);

The Includes jQuery function html structure and Id of the content which we need to make date picker enabled.

<script>

jQuery(document).ready(function() {
jQuery(‘#startDate’).datepicker({
dateFormat : ‘yy-mm-dd’,

/* dateFormat:  0 date format year months and day */
minDate:  0

/* minDate:  0 It display only the date above system date */
});

jQuery(‘#endDate’).datepicker({
dateFormat : ‘yy-mm-dd’,
beforeShow : function(){
jQuery( this ).datepicker(‘option’,’minDate’, jQuery(‘#startDate’).val() );

/*The beforeShow: it created before enable datepicker and this date picker value starts from the StartDate value (It confirms the end date must be grater than start date )*/
}
});
});

</script>

Html Structure of Form which is used to display the input fields.

<table>
<tr>
<th><label for=”youtube”></label></th>
<td> </td>
</tr>
<tr>
<th><label for=”subscription_from”>Subscription From </label></th>
<td><input type=”text” id=”startDate” name=”subscription_from” id=”youtube” value=”<?php echo esc_attr( get_the_author_meta( ‘subscription_from’, $user->ID ) ); ?>” /> Year-Months-Day<br />
</td>
</tr>
<tr>
<th><label for=”subscription_to”>Subscription Till </label></th>
<td><input type=”text” id=”endDate” name=”subscription_to” value=”<?php echo esc_attr( get_the_author_meta( ‘subscription_to’, $user->ID ) ); ?>”/> Year-Months-Day<br />
</td>
</tr>
<tr>
<th><label for=”subscription_cost”>Subscription Cost </label></th>
<td><input type=”text” name=”subscription_cost” id=”subscription_cost” value=”<?php echo esc_attr( get_the_author_meta( ‘subscription_cost’, $user->ID ) ); ?>” /><br />
</td>
</tr>
</table>

 

 

 

WordPress table and relationship diagram

Diagram above provides a visual overview of the WordPress database and the relations between the tables created during the WordPress standard. The Table Overview below includes additional details on the tables and columns.

There are 11 Table in WordPress Cms.

These are tables columns and relationship are on avobe figured.

 

Feb.17

Feb.17

Contributor have not grant to upload media files? in WordPress.

The user role  Contributors in wordpress have not the grant for media upload.So if we try to upload an Feature image by Contributor User it shows an error “Http Erro”.

This works well for all users that have the upload_files capability, which includes the Administrator, Editor, and Author roles.

The upload files  grants  full rights to edit and delete any uploaded media. So the contributor have not granted this feature.

WordPress is not quite sophisticated enough provide the required fine-grained permissions control on file and media management operations, which many other CMS.

For this reason, if you try to upload a Featured Image to your post when logged in as a user with the Event Contributor role, they will receive an HTTP Error.

 

I searched many article over there but when I needed  to build the news site. It is  strictly require the contribution role with adding media file  [Audio, Video, Images ] with restriction of other media file delete.

 

Finally i get the solution. It save my time and with full requirement. This is the adding capability when the Contribution log in.  Keep this code into function.php page and get the effects. Add the admin initialization hook to the theme function.

 

Solution : 

/*
* Add the capability of Contributor
* It just gives the adding of media and slecting others added media file
* Prevents the delete of other media file .
*
*/
if ( current_user_can(‘contributor’) && !current_user_can(‘upload_files’) )
add_action(‘admin_init’, ‘allow_contributor_uploads’);

function allow_contributor_uploads() {
$contributor = get_role(‘contributor’);

/* Give the upload capability role to this user*/
$contributor->add_cap(‘upload_files’);
}

 

Feb.09

Tools for Creating an Optimized Mobile Website

Come on, be honest with yourself. Is your website really giving your visitors an optimized, intuitive experience? Or are you still serving mobile visitors a site that was designed for desktop? If you feel like you’re behind the eight ball, there’s hope. Here are seven great solutions to help you quickly and cost-effectively develop a mobile version of your site.

 

MobDis

MobDis is a service that lets you build websites with a mobile-first approach. Rather than starting from a template or from an experience that originated from your desktop website, the application makes creating a mobile site feel like you are editing a Word or Illustrator document, starting from a plain white page. It literally breaks the constraints that many people feel when they look at their full site and wonder “how will we ever shrink this down to mobile size?” It encourages you to build from the ground up, thinking about the optimal content, functionality, and conversion actions for a mobile audience. Once you’ve created your mobile site, MobDis gives you every possible option on how to display it. You can host it with MobDis on your own domain or on a subdomain on their website. You can also export your mobile site and move it to your own hosting environment. You can even publish it as an app and submit it to the Apple or Android app stores. Cost is $28 per month.

 

DudaMobile

DudaMobile gives you two options for creating your mobile site, both of which are super simple. If you’re looking for a jump-start on your mobile design, DudaMobile can scan your site and pull content, images, and other information into a template that you can then customize or edit to best fit your goals. Once the content has been converted you can use their drag-and-drop editor to remove site elements that might not be necessary and move around page elements to make an optimal experience for mobile visitors. On the other hand, if you want to take a more thoughtful, ground-up approach, choose one of DudaMobile’s templates and build your mobile site from there. Their advanced site editor allows you to configure template settings, navigation, HTML, CSS, and more. But even users without tech skills can easily make edits with their simple drag-and-drop tool. Cost is just $9 per month.

 

goMobi

Like variety? GoMobi gives you a selection of 40 site templates to get you started — each of them totally customizable. Create your own menu, build forms, add and optimize video, and display reviews, all with simple click and go integration. And unlike many of its competitors, goMobi also supports e-commerce sites, allowing visitors to purchase directly from your mobile site. The team at goMobi really seems to understand mobile interactions, and have integrated a ton of features that go way beyond click-to-call and basic mapping functions. You can create special offers, let people leave you a message or request a call back, and translate your site into their language with a single click. GoMobi is available through hosting partners and other Internet service providers.

 

Landr

Landr is specifically designed to help marketers capture more leads from mobile devices by creating mobile landing pages. That’s right: landing pages. It seems to be the only tool available that allows you to build single pages that are focused on getting the conversion. It’s built to simplify the mobile experience out of the box so visitors see exactly what they are looking for and nothing more. Landr’s “less is more” strategy is a particularly good option for marketers who need the flexibility of creating campaign landing pages without the involvement of IT. You can even run A/B tests with multiple Landr pages. Cost is $12 per month.

 

 

MoFuse

MoFuse is another monthly subscription tool that allows you to easily build and host your mobile site. But one option that distinguishes it from the others is that you can hire their team to completely build your mobile site for you. Custom features include a range of design tools, m-commerce functionality, mobile analytics, mobile advertising, GPS-guided store locator, and more. If you are looking for mobile marketing services in addition to a site build, you’ll like MoFuse’s SMS text marketing package and its search and SEO support.

 

SproutMobi

Few people would dispute the fact that building a successful mobile site is not just about the tools. You have to have the right strategy, and that’s where SproutMobi really shines. For $99 you’ll get a dedicated developer/consultant who will help you develop your strategy, identify the right features and functionality for your audience, and build up to 10 customized pages for you. They’ll even set up the code to reroute mobile traffic to your mobile-friendly site. Once they build your site, you’ll be charged $10 per month for unlimited hosting, support, and access to make your own edits via their content management system.

 

YoMobi

While many of the tools and services listed here offer free trials, YoMobi takes that a step further with a free standard plan that includes hosting, unlimited pages, and all the bells and whistles. The only catch: your site will display a discrete mobile ad. But for those on a really tight (as in nonexistent) budget, this just might be the best way to get your dedicated mobile site up and running. Have a little money? Spend $6 per month on a custom plan and you get all the YoMobi features without the pesky ads. This plan also allows you more customization options as well as a custom m.domain name. Both plans come with free SMS and email blast capability, click-to-call, and GPS-guided location finder.

 

Bonus Tool: Conversion Ninja Toolbox All the tools above can help you quickly build a mobile version of your website. But if you’re the kind of person who always wants more, check out Conversion Ninja Toolbox, a free online directory of conversion rate optimization resources for every step of the conversion optimization process, from wireframing to testing, and everything in between. Some of the tools are free and all listings are unpaid and include user ratings and comments.

Feb.05

Preg Match php function Example

Check weather the string is hex color combination or not.  This type of logic is required to filter the color picker value.

The preg_match php function is useful for this type of problem.

For example :

[ $color = ‘#001ABC’;  ] [ $color = ‘001ABC’;  ] [ $color = ‘#mnop01’;  ]

The above three are stored color combination of value. from these we only have visible the color value with starting # with combination of [a to f] and [1-9]. If we find these combination on the string then we set received color from value otherwise further processing required.

The preg_match(‘/^#[a-f0-9]{6}$/i’, $color)  function treat checking all the string $color variable with comparison with start string # and string set of a to f and 1 to 9 with sting must be 6 character length {6}.

//Check for a hex color string ‘#001ABC’
$color = ‘#001ABC’;
if (preg_match(‘/^#[a-f0-9]{6}$/i’, $color))
{
//hex color is valid
//Verified hex color with first string  #
$fix_color = $color;
}
//Check for a hex color string without hash ‘c1c2b4’
else if (preg_match(‘/^[a-f0-9]{6}$/i’, $color))
{
//hex color  combination is right but first string need to #
$fix_color = ‘#’ . $color;
}
else
{
// Set my default color combination
$fix_color = ‘#000’;
}
echo $fix_color;

[ $color = ‘#001ABC’;  ]

// This gives true case. It satisfies # string with string combination with 6 letters. It goes to if first condition

[ $color = ‘001ABC’;  ]

// It has only satisfies else if condition because it have not the start letter # Returns string adding with # on the front string go to second else if condition

[ $color = ‘#mnop01’;  ]

// Returns default value go to else condition on example

Feb.04

Equal height div multiple row & column with responsive design

If we need multiple row and multiple column with out tabular design. We have option of css content  .wrapper-header-news>div{display:table-cell;}  element can mentioned as table cell or td the height(border) should be same on the table cell. so I needed the content display on boxes these must be same in height with responsive design. Please follow my design if you need similar type of display content as figure below.

multi_column_responsive_des

height between the inner content at same . The content of both div wouldnot possible to same but in that case we need the same height border display between inner div. I have assumed the inner wrapper container have two block is need to same height as maximum contents height.

responsive_tabular_design

Feb.03

How to create repository of SVN?

What is SVN Server?

VisualSVN Server allows you to easily install and manage a fully-functional Subversion server on the Windows platform. It can maintain an Apache Subversion server on the Windows platform. for file and sharing option to the.

Download Visual SVN Server

 

We need to install the SVN server on our computer. There have following stages to crate svn repository.

How to Create SVN repository?

I have assumed the repository folder name onsnews for below example.

Step1 : open the system file in installed location of VisusalSVN Server Manager.

 

Step 2: Create new Repository. [the server interface displays the creating of repository area. create repository as same below the image.]

 

[ After Create the repository folder It Creates three sub folder [i. branches, ii. tags , iii. trunk] in every repository]

svn_confirm

Be confirm to check the button [Create default structure (trunck, beanches, tag)]

Copy the URL to clipboard of the created folder.

There would be link in this form we need to replace the name by ip

https://Prakash-PC/svn/onsnews/

replaced ip

https://192.168.1.10/svn/onsnews/

 

After copying the Repository link

Go to your project folder

Right click choose TortoiseSVN  –> Import …

 

It puts files and folder in SVN Server

We need to confirm it is on the copied on server

 {repository} >> {project_folder_name} >> trunk=> {list of imported files}.

It displays all imported data available from previous stage on Trunk folder.

 

In the previous stage we find the data are on SVN repository server. Then we need to sink the data from local and server machine.

Our above folder onsnews folder in the D:\wanp\www

Have need to sink to our SVN server.

Right Click on the folder name which you want to replicate from svn server

SVN Checkout =>

Make sure that the repository folder name with

Syntax: https//{computer server ip}/{project repository name}/trunk

https://192.168.1.10/onsnews/trunk

and

Checkout directory is path of your local folder what you want to checkout.

Example Like

D:\wamp\www\onsnews

 

Feb.02

Maxmium upload file size setting on Apache Php

The default size of upload file on Apache setting is 2mb. We need to change the setting of maximum upload file size when we wants to upload grater than 2MB file size.

The default setting of the Uploaded File Size  is located on php.ini file which is located on your installed directory of XAMPP or WAMP server.

 

Note:   When we change the maximum file upload file size (upload_max_filesize) we also need to increase the maximum size of post data (post_max_size).

For example if we can set maximum file size to 100M and we are going to upload 100 mb file but the post size is 8m by default; in that case it gets error when uploading so we need to change both the file size and post size with increment with ratio. Below is the php.ini file location and the setting of size with line number.

 

XAMPP Server:

The maximum file size is setting on XAMPP server line 513 or find upload_max_filesize. which is default set as 2M you can change as you required ie. 8M,20M,100M…

Location : <xampp_install_dirtectory>/xampp/php/php.ini

line :: 513 ::

; Maximum allowed size for uploaded files.
upload_max_filesize = 2M

line :: 409::

; Maximum size of POST data that PHP will accept.
post_max_size = 8M

 

WAMP Server:

The maximum file size is setting on WAMP server line 513 or find upload_max_filesize. which is default set as 2M you can change as you required ie. 8M,20M,100M…

Location : <wamp_install_dirtectory>/wamp/bin/php/php<with_version>/php.ini

line :: 884 ::

; Maximum allowed size for uploaded files.
; http://php.net/upload-max-filesize
upload_max_filesize = 2M

line :: 734 ::

; Maximum size of POST data that PHP will accept.
; http://php.net/post-max-size
post_max_size = 8M