Downloads are at the bottom of this tutorial.

Things that we need:

• League Gothic Font
• Roboto Font
• Droid Serif
• Crown from IconArchive
• Entypo Icons
• Bokeh Wallpaper

Make a Blog Layout in Photoshop

This is what we will do today, now ready and fire up your Photoshop!

Open your Photoshop and set this sizes.

Next, drag the bokeh wallpaper and set Filter > Gaussian Blur 51.4px, position it properly so the effect would show on the right side of the layout.

Add a new layer CTRL +J and fill it with #FFFFFF, add another layer CTRL + J and make a 300px wide selection using Marquee Tool (M) and fill it with #343434.

Now, grab the crown icon from iconarchive.com and position it on the top left of the mock up. Right click on the layer > Color Overlay > and set it to #FFFFF. Add a text using League Gothic Font, 44.62pt color #FFFFF. You should also add intro text, for that I used Roboto Font 17pt.

Now for the navigation, Use Roboto Font Bold Condensed 20pt. Create a new layer and use Marquee Tool (M) and select a certain area, like the image below. Fill it with #3E3E3E.

Next is the border on the navigation when it is on hover state, create a new layer select more or less 5px width on the very left of the navigation and fill it with #OOB7D7.

Here’s what it should look like! We also added the icon, to change it’s color right click on the icon layer > Color Overlay > and select the same color we used on the border.

Here is our complete navigation, we also added few social media icons on the side. Follow the instructions on how to change it’s color.

Next is the blog post section, use League Gothic Font 37pt color #3E3E3E. Create a new layer CTRL + J and fill it with #FFFFFF, right click on the said layer > Stroke > color #3E3E3E. size is 1px.

We added the image here, make sure you cropped it properly. The image is from the previous tutorial

Text used is Driod Serif 16pt color #3E3E3E. Make a little space at the bottom of the image, because we will put some icons in there.

Now, create a new layer CTRL + J and use Single Row Marquee Tool (M) and select the section below the text. Fill it with #00B4D5.

After that, create a new layer again CTRL + J and use the Marquee Tool and fill it with #00B4D5. Font is League Gothic color #FFFFFF.

The next thing to do is group the blog post folder CTRL + G and duplicate it by right click > duplicate folder. Add the social media icons on the left side of read more section and off you go!

It’s done! Watch out for the conversion of this PSD into HTML5, make sure you’re subscribe to get the notification straight from your inbox.

Hope you’ve learned something on how to make blog layout in Photoshop, feel free to comment if you have questions.

[sociallocker id=”3494″]Download Now![/sociallocker]

The post How to Make Blog Layout in Photoshop appeared first on Sanjay.

Since I’ve been making a lot of Custom WordPress themes lately, most of my Clients wanted a membership site that they can maintain easily. While some of the requirements are the same, others are not. This one particular Client wanted a front end dashboard, everything that WP has will be brought on the front end, login page included.

I am going to show you the code about WordPress custom login page. First, copy your page.php and name it page-login.php, make sure you added a page-template on the top of the file, after that paste the entire code below.

<?php if(current_user_can('author') || current_user_can('editor') || current_user_can('administrator')){ ?>
              <?php echo 'You\'re already logged in'; ?>
            <?php }else{ ?>
                <?php $args = array(
                      'echo' => true,
                      'redirect' => 'http://DOMAIN.COM/dashboard/',
                      'form_id' => 'loginform',
                      'label_username' => __( 'Username' ),
                      'label_password' => __( 'Password' ),
                      'label_remember' => __( 'Remember Me' ),
                      'label_log_in' => __( 'Log In' ),
                      'id_username' => 'user_login',
                      'id_password' => 'user_pass',
                      'id_remember' => 'rememberme',
                      'id_submit' => 'wp-submit',
                      'remember' => true,
                      'value_username' => NULL,
                      'value_remember' => false );
              wp_login_form($args);
              ?>
            <?php } ?>

The important things that you should change is the redirect, change it to your domain and page where your users should land upon login. Upload it to your website and create a new page, select the page template and hit publish.

What if your Clients has several membership levels, like MemberA is a editor and MemberB is a subscriber. MemberA would end up in a front end rather than back-end, which is a bad user experience.

To sort this issue, you need to add this to your functions.php

/** Login Redirect **/
add_filter("login_redirect", "my_login_redirect", 10, 3);
function my_login_redirect( $redirect_to, $request, $user ){
    //is there a user to check?
    if( is_array( $user->roles ) ) {
        //check for admins
        if( in_array( "administrator", $user->roles ) || in_array( "editor", $user->roles ) ||  in_array( "author", $user->roles ) ) {
            // redirect them to the default place
            return 'http://DOMAIN.COM/wp-admin/';
        } else {
            return 'http://DOMAIN.COM/dashboard/';
        }
    }
}

This function will short your subscriber to redirect them to the proper page, same for your editor, author and admin to the backend of WordPress. This will make sure that your users will have a great experience using your membership site.

Make sure you add the right domain and proper redirect to the pages, last thing we want is to lead them to a broken link.

Hope this is helpful to your membership site building, this is just one example on how to create a WordPress custom login page. There are plugins if you are afraid to touch your theme, or you can hire me instead! Feel free to post your questions if you have any in the comments below.

The post How to Create WordPress Custom Login Page appeared first on Sanjay.

You can download the PSD at the bottom of the page.

Things we need:

• Roboto Font
• Arvo Font
• Bokeh Wallpaper
• Entypo Icons
• Stock Photo Images
  • Image 1
  • Image 2
  • Image 3

 How to Make a Portfolio in Photoshop

Open your Photoshop, and set the width and height. Follow the pixels from the image above.

I added a logo from the Entypo Icon sent, select the paper-plane and use the font Arvo Regular 26.62pt. For the navigation, Roboto Condensed 23.62pt, font color #5a5a5a.

Using the Marquee Tool (M) we will select 300px from the page, create a new layer CTRL + SHIFT + N and cover it with white using Paint Bucket Tool.

Next, add your Bokeh background. Just drag and drop it, and right click select Create Clipping.

While still selected the bokeh layer, go to Filter > Blur > Gaussian Blur and set it to 28.0. Hit ok after.

Here is the blurred bokeh background Next is to add the text on it, use Roboto Condensed 38pt #fff, and for the paragraph text Roboto Condensed 21pt #fff.

To create a button, select Rounded Rectangular Tool (U) and set the radius to 3px, fill it with #3497da.

Use this image to be put beside the text, make sure you even the bottom with the end of the background.

Our Hero section is complete! Moving on

Use Roboto Condensed 33pt #555, set all to capital. Duplicate the button from the Hero section (CTRL + J)

Create a new layer and select Single Row Marquee Tool (M) and select the bottom area of the text. Use a brush with color #555 and fill the entire line. CTRL + D to deselect.

Next, create a new layer CTRL + J and select a 300px height and fill it using Paint Bucket Tool (G) #EFF2F5. Create a new layer again, and create a rectangular shape, fill it with #fff. Right click and select Stroke 1px #dddddd.

Title text is Roboto Condensed 24pt #555 and the smaller one is 20pt #555.

Create a circle using Ellipse Tool (U) while holding SHIFT to create a perfect circle. Right click > Stroke 1px #ddd. Next is to add the icons from Entypo icon set.

Group them into a folder, and duplicate them by right click > duplicate and position them properly.

Our Portfolio is coming close, let’s add Recent works and images from previous tutorial. Make sure you add stroke 1px #ddd for the images.

For the Our Team section, we will use the images from istockphotos. Place the image and add the following, for the name Roboto Bold 18pt #555, for the position Roboto Italic 16pt and for the description Roboto Condensed 17pt same color.

To add the social media icons, select them from Entypo and drag them to the current canvas. Right click on the layer > Color Overlay > set to #fff. Use Rounded Rectangle Tool (U), and create the shapes. Follow the color background for each icon.

Next is the footer, Use Marquee Tool (M) to select the area and create a new layer CTRL + SHIFT + N and fill it with #333333. The font used are Roboto Condensed and Robot Bold #ffffff. Grab the icons from Entypo and place them in the contact area.

That’s how to make a portfolio in Photoshop! Easy eh? Hope you guys learned a lot from this, and you can use this to start with your portfolio.

If more people wanted to see the PSD to HTML5 Conversion, please let me know in the comments below!

[sociallocker id=”3494″]https://app.box.com/s/ssawqrxr43ph1fbw27yv[/sociallocker]

The post How to Make a Portfolio in Photoshop appeared first on Sanjay.

The issue here is finding other people to check your design or website, maybe you can ask a friend or someone you know. It would be really awesome if you can ask 100 people and gather their feedback and do the revisions based from that feedback. There are ways to do it, and here’s some of the website that allows you to gather web usability testing.

Before we look for software and other media to check out website usability testing, we try to see what and why we need to use it.

1. User Analysis – It is important that the user can accomplish the goals and task that is present on the site, they should able to do it effectively. For example a blog site, the user will read the blog post, leaving comments and move on to related blog post. The same task should be applied to your website.

2. Readability – Content is king, as we always say, even in web apps, has content in them. Usually a blog site that doesn’t have an understanding regarding user interface will harder to to the user to perform his/her task efficiently.

3. Site Navigation – Most sites use this so user will be able to move from one page to another, but there are others ways for the user to do that such as navigation menus, search boxes, links inside the content, sidebar links and other widgets.

4. Accessibility – Your website should be accessible to anyone anywhere, that’s why responsive is a huge leap for designers and developers. Your website should also serve those users that are blind or has mobility problems.

5. Website Speed – Since Google announce that they will include Page Speed to ranking sites, website speed became a problem for everyone. Most users won’t wait for your website to load, you need to serve it to them fast. I mean really fast!

6. User Experience (UX) – You need to study and evaluate how easy to use your website, this is a large factor because it deals with user perception, behavior and reflects differently from one user to another.

Now that we have a little knowledge regarding website usability, let’s dive in how to get and gather those data. Here’s some of them that I recently discovered.

Web Usability Testing Websites

Usabilityhub

They aren’t free, but you can earn free tests by helping test other sites. Their tools include Five Second Test (for design), Click Test (for testing clicks on landing pages) and Nav Flow (for tracking conversion funnels).

Activestandards

A new tool, that uses a traffic light system to identify errors on high-, medium- and low-use pages. It divides mobile and desktop users at a glance too. Click on any section and you can get a report on what the errors are and how to fix them. It makes it easy to focus your attention on the pages people are visiting most to troubleshoot errors in real time.

Labsmedia

Want to know what areas of your web page are getting most attention? You’ll need to be technically inclined as you have to download and install it to the server yourself.

Optimalworkshop

Offers three tools for different aspects of usability and all of them have a free-for-life plan. While the freebies have some limitations, using them could help you decide whether it’s worth springing for a paid test. The tools are Chalkmark for first click testing for your web design, Optimal Sort for card sorting, and Treejack, to see how people interact with your site structure.

Optimizely

Isn’t free, but you can use its 30-day free trial to load a page and change content. It’s included here because it is amazingly easy to use—just a few button clicks give you a whole new version of your page.

Conclusion

Using these tools and gathering data, you will have a great improvement to your website usability testing and you can make sure that your visitor will have a positive feedback and great experience. If you need more tools and tutorials regarding website usability, check out Smashing Magazine’s round up. If you have questions or other suggestions, feel free to comment below!

The post How to Get Website Usability Testing from your Designs appeared first on Sanjay.

Start by opening your dashboard > appearance >editor and open your sidebar.php, now, add this piece of code.

<div class="sanz-random-post">
<h2>Check out our Random Post instead!</h2>
	<ul>
	<?php $posts = get_posts('orderby=rand&numberposts=5'); foreach($posts as $post) { ?>
		<li>
			<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
				<?php the_post_thumbnail( 'category-thumb' ); ?>
			</a>
			<h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>	</h3>
		</li>
	<?php } ?>
	</ul>
</div><!-- sanz-random-post -->

This will display 5 random WordPress post, if you want to change it you can edit this part numberposts=5 and change the number to how many you wanted to display. You can also change the image according to your liking, I set my post-thumbnails to category-thumb because that’s the name of my thumbnails.

You can play around with the CSS to match your theme, here’s a simple styling that I did.

.sanz-random-post{}
	.sanz-random-post ul li{list-style-type: none;padding: 0;margin: 0;display: inline;}
	.sanz-random-post li{margin:10px 0;}
		.sanz-random-post li img{width:100px;float:left;vertical-align: top;}
		.sanz-random-post li h3 a{float: left;margin:0;color: inherit;}
		.sanz-random-post li h3 a:hover{color: inherit;}

If you’re the type that doesn’t want to touch the code, there’s other alternative plugin that you can use.

WordPress random post plugin

Spider Random Post

Spider Random Post allows you to show posts in a random order in a sidebar. You can display simultaneously as many random posts as you need.

Advanced Random Posts Widget

Provides flexible and advanced random posts widget. Allows you to display them with thumbnails, post excerpt, multiple category and more.

Random Posts Widget

Random Posts Widget Configurable

Hope this will be useful to you as it did to me. I used this code on my 404 page, so users who end up on the said page can see random post and Googlebot can index my old post, which is cool!

If you have more suggestion like this WordPress random post, you can hit me up in the comments below for questions.

The post How to Display WordPress Random Post in your Theme appeared first on Sanjay.

And since we are utilizing the power of Custom Post Types and Taxonomy, displaying them is really a different story. Once of my Client asked me to display two different taxonomy using single.php, since they uses that page to display different things.

Today, I’ll share with you on How To Display Different WordPress Metabox Based On Your Taxonomy, mostly on single.php but you can still using this on page.php or other WordPress Files.

Display Different WordPress Metabox Based On Your Taxonomy

I’ll assume you already know how to build a metabox, if not here’s a list of metabox tutorials and plugins on how to do so. Same with Custom Post Types, you can check out these tutorials on how to do it.

We will utilize the has_term, you can check it out from the codex, here’s a short explanation: Check if the current post has any of the given terms.

On your single.php, under the_content hook we want to display our metabox.

<?php if( has_term( 'acoustics', 'blog_cats' ) ) { ?>
         echo 'DO WANT YOU WANT HERE';
<?php } ?>

 Band is our term and blog_cats is our taxonomy, we will display our metabox according to the term of the taxonomy.

<?php if( has_term( 'acoustic', 'blog_cats' ) ) { ?>
         <?php echo get_post_meta($post->ID, "acoustic_band_name", true); ?>
<?php elseif( has_term( 'alternative', 'blog_cats' ) ) { ?>
         <?php echo get_post_meta($post->ID, "alternative_band_name", true); ?>
<?php elseif( has_term( 'rock', 'blog_cats' ) ) { ?>
        <?php echo get_post_meta($post->ID, "rock_band_name", true); ?>
<?php } ?>

The code above displays different information about the Band, the Client wanted to designed it this way because they are using this part as a sidebar.

You can use this if you have several taxonomy term and you wanted to display different metabox or information about it and you’re using single.php or page.php. I find it really easy to display different information and it saves me a lot of time by not creating another page template.

Hope this is helpful to you, if you have any suggestions to push this further please do so in the comments below. If you have any request, please let me know!

The post How To Display Different WordPress Metabox Based On Your Taxonomy appeared first on Sanjay.

Today, we will show how you can display different sidebar widgets for different pages in WordPress, and copy the code to be used in your projects.

I needed this feature since I had a Client that wanted to display different sidebar for different pages on this Custom WordPress Theme, I wanted to make it easy for the Client to use, and it doesn’t rely on plugins too. The requirement is that, the page.php will be used to display different pages, with different sidebar widgets.

Lucky for me, I’ve done this on other themes that I’ve worked on. I’ll share with you the code, and hopefully you can take this further.

First, open your functions.php and create additional sidebars

register_sidebar(array(
      'id' => 'about',
      'name' => 'About Sidebar',
      'description' => 'About sidebar.',
      'before_widget' => '<div id="%1$s" class="widget %2$s">',
      'after_widget' => '</div>',
      'before_title' => '<h4 class="widgettitle">',
      'after_title' => '</h4>',
    ));

Create as many as you need, this is just a sample to you. Paste this into your functions.php and remember the ID of the sidebar.

Check out your dashboard > appearance > widgets and see if your widget is there.

Next, open page.php and let’s find the get_sidebar hook, and add some code. We will use the is_page conditional statement, you can find more on codex about it.

<?php if ( is_page('about-us') ) { ?>
	<?php dynamic_sidebar('about'); ?>
<?php } elseif (is_page('contact-us') ){ ?>
        <?php dynamic_sidebar('about'); ?>
<?php } ?>

Paste this on your page.php, make sure you get the page-slug right “about-us”. Make sure you put it where the proper div for sidebar, or else you’ll get a broken layout in your theme.

Hope this is helpful, if you think there’s more you need or we can push this more, just put it in the comments below!

The post How to Display Different Sidebar Widgets for Different Pages in WordPress appeared first on Sanjay.