Categories
Wordpress

Password Protect more than just Content and Comments

The following is not a news, but today I had to fix a problem like that at work, so I thought that can be repeated for who has a similar situation.

worpress-password-protected

In WordPress when you use Password protected posts or pages, the post or page content will be hidden until the user inserts the password.

By default WordPress will hide the content and the comments of the post or page that  uses Password protected in the settings and show on screen a message like

This post is password protected. To view it please enter your password below:

The title will also start with “Protected: “. See here how to remove the title prefix.

When the user will type the right password than will be able to view the page completely.

Code wise will be hidden just the text or HTML returning by the following methods

the_content();
comments_template();

inside the files in your WordPress theme (page.php or single.php or index.php).

Problem?

You will find that if you use custom fields or simply use in your loop

<img scr="<?php echo get_post_meta($post->ID, 'postThumb', true); ?>" />

those data will not be protected and they will be visible on the screen.

How to protect custom fields in WordPress?

The simple solution is to use the WordPress function post_password_required() like in the example below

<?php
    if ( !post_password_required() ) 
    { 
        // your protected stuff here
    ?>
    <img scr="<?php echo get_post_meta($post->ID, 'postThumb', true); ?>" />
    <?php
    }
?>
Categories
Wordpress

Remove Protected and Private title prefix

If you use Private or Password Protected posts or pages you might want to remove that awful title prefix

  • Private: …
  • Protected: …

To remove the title prefix you can simply add in your WordPress theme functions.php file, the following code

function the_title_trim($title)
{
  $pattern[0] = '/'.__('Protected').': /';
  $pattern[1] = '/'.__('Private').': /';
  $replacement[0] = ''; 
  $replacement[1] = ''; 
  return preg_replace($pattern, $replacement, $title);
}
add_filter('the_title', 'the_title_trim');

This code will remove the title prefix for Private and Password Protected pages and posts, independently by the language used in the WordPress installation.

Categories
Design Wordpress

HiFi Cinema Webstore

Ecommerce website for HiFi Cinema. The  website is based on WooCommerce and it is super personalised.

The navigation bar will always remain at the top op the screen (just for large screens).

The design follows a fluid design just for computer screens and tables (horizontal orientation).

hifi-cinema-webstore-2013

 

hifi-cinema-webstore-2013-imac

 http://webstore.hificinema.co.uk/

Categories
Responsive Web Design Wordpress

Seekers Park Homes

This is a web site which I built for Seekers working for Alchemy Internet. The website is for 50+ year-old people that might not be internet experts.

The website use a responsive web design that allow people to surf anywhere using any kind of device to surf it.

seekers-responsive-design-2013

seekers-2013-imac

http://www.seekersparkhomes.co.uk/

Categories
Responsive Web Design Wordpress

Claudio Bez

This is an italian web site which I built for Claudio Bez. He’s an artist who does cartoons, paintings, caricatures and illustrations, often combined with strong black and white draws.

You can check out the actual site if you want to see this design layout in action.

responsive-design-bez

bez-desktop-laptop-phone

Bez.desktop

http://bez.bz

Categories
Wordpress

Redirect to post when search query returns single result

To avoid the list of just a single search result, you can add the following code in your theme’s function.php file.

add_action('template_redirect', 'single_result');  
function single_result() {
	global $wp_query; 
	if ( is_search() && !is_paged() ) {
		if ( $wp_query->post_count == 1 ) {
			wp_redirect( get_permalink( $wp_query->posts['0']->ID ) );
		}
	}
}

This code will also avoid the automatic redirection in case of many search results split in pages and in the last page there is just a single result.

Categories
Wordpress

Customise Login Page in WordPress

To customise your WordPress login area, typically on this URL your-domain.com/wp-login.php, you need to add the following in your theme’s function.php file.

Change the login Logo

The default image is the WordPress logo. You can change that image simply modifying the file path. You can add you image and adjust width and height if necessary.

function custom_login_logo() {
    echo '<style type="text/css">
    h1 a { 
        background: url('.get_bloginfo('template_directory').'/img/logo.png) 50% 0% no-repeat !important;
        background-size: contain !important;
        width:260px !important; 
        height:90px !important; 
        margin:0 auto !important; 
    }
    </style>';
}
add_action('login_head', 'custom_login_logo');

 Change the login URL of the login logo

Normally when you click on the login logo, by default it goes to WordPress.org. The following will change it to your own homepage.

function change_wp_login_url(){ 
	return get_bloginfo('url');
}
add_filter('login_headerurl', 'change_wp_login_url');

Change the Title of the login logo

If you want to change the title attribute of the image you just replaced use the following code.

function change_wp_login_title(){ 
	return get_option('blogname'); 
}
add_filter('login_headertitle', 'change_wp_login_title');
Categories
HTML

How to make a telephone number clickable on your Android or your iPhone

If you use your smart-phone (iPhone or Android) for surfing on internet you will have notice that some times is very frustrating or very difficult to copy and past a phone number in order to use it for a phone call.

A simple and quick solution for all the web designers/developers to avoid  to make the user  s life difficult is to set the telephone number as a link.

Please call <a href="tel:+441234567890">(+44) 0123 456 7890</a>

instead of

Please call (+44) 0123 456 7890

A link like that will not have any side effect for a normal desktop or laptop user but it will be very helpful users that use a smart-phone or a tablet.

So a good practice is to  always use this telephone number link

<a href="tel:+441234567890">0123 456 7890</a>

tel: is also compatible with some telephone softwares.

Categories
Wordpress

Defer loading of JavaScript in WordPress

Deferring loading of JavaScript functions that are not called at startup reduces the initial download size, allowing other resources to be downloaded in parallel, and speeding up execution and rendering time.

While this “lazy” method of loading doesn’t reduce the total JS payload, it can significantly reduce the number of bytes needed to load the initial state of the page, and allows the remaining bytes to be loaded asynchronously in the background.

In order to speed up the loading of a page all the JavaScript in the HTML header has to be run after the page finish to load, more precisely at the end of the page before the </body> tag.

WordPress automatically adds all the core and plugin JavaScript in the HTML header using the function wp_head() or at the end of the page using wp_footer().

All the JavaScript contained in the header wp_head() has to be moved at the end of the page in wp_footer().

In order to do that you can add those simple line in your function.php of the your theme.

if(!is_admin()) {
	// Move all JS from header to footer
	remove_action('wp_head', 'wp_print_scripts');
	remove_action('wp_head', 'wp_print_head_scripts', 9);
	remove_action('wp_head', 'wp_enqueue_scripts', 1);
	add_action('wp_footer', 'wp_print_scripts', 5);
	add_action('wp_footer', 'wp_enqueue_scripts', 5);
	add_action('wp_footer', 'wp_print_head_scripts', 5);
}

All this will be valid just in the public website not for the admin panel.

Make sure that in your theme you will not add any other JavaScript in your header.

If you use HTML5, Modernizr (or html5shiv) needs to be in the HTML header, in order to make the old browsers (i.e. IE7, IE8) HTML5 and CSS3 friendly.

 

Categories
Wordpress

How to update WordPress on Aruba.it hosting

Aruba.it has a strict write permission on his web hosting servers.
Just adding the following two simple lines at the top of the wordpress configuration file wp-config.php and your website will be able to run all the updates without returning any error.

<?php
   define('FS_CHMOD_FILE',0755);
   define('FS_CHMOD_DIR',0755);
   ...
?>

Enjoy your automatic wordpress upgrades and plugin updates.