Image Mask Effect

Image Mask Effect

Go to Source

An immersive transition effect powered by image masks and CSS transforms.

We’ve been publishing in our library some nice mask effects powered by SVG properties. This time we took advantage of the PNG transparencies to zoom through the mask layer, into a project background image.

If you want to change the color of the .pgn masks, you can easily do it in Photoshop (or any other graphic tool) by applying a color overlay to the whole image layer. If you plan to create your own masks, please note that this effect works only if there’s an empty space in the very center of the mask.

Inspiration: Offsite Homepage Animation by Hrvoje Grubisic.

Creating the structure

The HTML structure is composed of a list of <section>s wrapped in a .cd-image-mask-effect element. Each <section> contains a div.featured-image (project image), a div.mask (image mask) and a for the project content.

<section class="project-1 cd-project-mask">
	<h1>Project Name</h1>
	<div class="featured-image"></div>
	<div class="mask">
		<img src="img/mask-01.png" alt="mask">
		<span class="mask-border mask-border-top"></span>
		<span class="mask-border mask-border-bottom"></span>
		<span class="mask-border mask-border-left"></span>
		<span class="mask-border mask-border-right"></span>

	<a href="#0" class="project-trigger">Explore Project</a>

	<a href="#0" class="cd-scroll cd-img-replace">Scroll down</a>

	<div class="cd-project-info" data-url="project-1">
		<!-- content loaded using js -->

	<a href="#0" class="project-close cd-img-replace">Close Project</a>
</section> <!-- .cd-project-mask -->

<section class="project-2 cd-project-mask">
	<!-- content here -->

<!-- other sections here -->

The project content is not included in the HTML but is loaded using JavaScript.

Adding style

Each .cd-project-mask has a height of 100vh (viewport height) and a width of 100%; the project image is set as background-image of the .featured-image element, while the mask image is wrapped inside the .mask element.
Four .mask-border elements have been used to create a frame around the image mask to make sure the project featured image is not visible outside the mask (we used <span> elements rather than pseudo elements because their behaviour was buggy on Safari 9).

.cd-project-mask {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;

.cd-project-mask .featured-image {
    /* project intro image */
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translateX(-50%) translateY(-50%);
  	height: 100%;
  	width: 100%;
  	background: url(../img/img-01.jpg) no-repeat center center;
  	background-size: cover;

.cd-project-mask .mask {
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  transform: translateX(-50%) translateY(-50%);
  width: 300px;
  height: 300px;

.cd-project-mask .mask .mask-border {
  /* this is used to create a frame around the mask */
  position: absolute;

.cd-project-mask .mask .mask-border-top,
.cd-project-mask .mask .mask-border-bottom {
    /* this is used to create a frame around the mask */
    height: calc(50vh - 150px + 10px);
    width: 100vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);

.cd-project-mask .mask .mask-border-top {
    bottom: calc(100% - 10px);

.cd-project-mask .mask .mask-border-bottom {
    top: calc(100% - 10px);

.cd-project-mask .mask .mask-border-left,
.cd-project-mask .mask .mask-border-right {
  	/* this is used to create a frame around the mask */
	height: 100vh;
	width: calc(50vw - 150px + 10px);
	top: 50%;
	bottom: auto;
    transform: translateY(-50%);

.cd-project-mask .mask .mask-border-left {
  left: calc(100% - 10px);

.cd-project-mask .mask .mask-border-right {
  right: calc(100% - 10px);

When the user selects a project, the class .project-view (added to the wrapper .cd-image-mask-effect) is used to hide all the other projects.
The .mask element is then scaled up to reveal the project featured image and the project content is loaded (more in the Events handling section).

.project-view .cd-project-mask:not(.project-selected) {
   /* the project-view class is added to the .cd-image-mask-effect element when a project is selected - hide all not selected projects */
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
   visibility: hidden;

Events handling

To implement this image mask effect, we created a ProjectMask object and used the initProject method to attach the proper event handlers.

function ProjectMask( element ) {
	this.element = element;
	this.projectTrigger = this.element.find('.project-trigger');
	this.projectClose = this.element.find('.project-close'); 
	this.projectTitle = this.element.find('h1');
	this.projectMask = this.element.find('.mask');

var revealingProjects = $('.cd-project-mask');
var objProjectMasks = [];

if( revealingProjects.length > 0 ) {
		//create ProjectMask objects
		objProjectMasks.push(new ProjectMask($(this)));

When the user selects a project, the revealProject method is used to scale up the mask image while the uploadContent method takes care of loading the project content (using the load() function) and adding the new page to the window.history (using the pushState() method).

ProjectMask.prototype.initProject = function() {
	var self = this;

	//open the project
	this.projectTrigger.on('click', function(event){
		if( !self.animating ) {
			self.animating = true;
			//upload project content
			//show project content and scale up mask


ProjectMask.prototype.revealProject = function() {
	var self = this;
	//get mask scale value
	//scale up mask and animate project title
	self.projectTitle.attr('style', 'opacity: 0;');
	self.projectMask.css('transform', 'translateX(-50%) translateY(-50%) scale('+self.maskScaleValue+')').one(transitionEnd, function(){
		self.projectTitle.attr('style', '');
		self.animating = false;

	//hide the other sections
	self.element.addClass('project-selected content-visible').parent('.cd-image-mask-effect').addClass('project-view');

ProjectMask.prototype.uploadContent = function(){
	var self = this;
	//if content has not been loaded -> load it
	if( self.projectContent.find('.content-wrapper').length == 0 ) self.projectContent.load(self.projectContentUrl+'.html .cd-project-info > *');
	if( self.projectContentUrl+'.html'!=window.location ){
        //add the new page to the window.history
        window.history.pushState({path: self.projectContentUrl+'.html'},'',self.projectContentUrl+'.html');

Go to Source

How to display custom fields with conditional statements

How to display custom fields with conditional statements

Go to source

Sometimes you need to display post-specific content using custom fields. In this example we will show you how you can display custom field data using conditional statements in the form of a youtube video embed. If the post has a “youtube-video-id” defined, the content will be rendered.

Insert content as shown below.

<?php global $wp_query; $postid = $wp_query->post->ID; ?>
     <?php /* if a custom field youtube video id is defined */ if( get_post_meta($postid, 'youtube-video-id', true) ): ?>
          <div class="video-item-wrapper">
               <iframe src="<?php  echo get_post_meta($postid, 'youtube-video-id', true);?>?feature=oembed&autoplay=0" frameborder="0" allowfullscreen="">
     <?php endif; ?>
<?php wp_reset_query(); ?>

How to Customize Your WordPress Admin Dashboard

How to Customize Your WordPress Admin Dashboard


Wait! Before We Start, Create A Child Theme

You could edit your core theme files, or use the Editor under Appearance in your theme dashboard, but that would mean never updating your WordPress theme again. Before making any changes to theme files you should create a child theme. This way when you update the core theme all of your changes will remain in tact. Here are some quick steps to get you setup just for this tutorial, but we also have a full child theme creation guide or you can reference theWordPress codex for more help.

  1. Create your child theme folder: Log into your WordPress installation and locate the wp-content/themes/yourthemename folder. Within this folder add a new folder and name it “child-theme” or “yourthemename-child” (you get the idea).
  2. Create your child theme’s CSS file: Now that you have a new child-theme folder you can add new files to tweak or override the style and function of your current theme. First create a new style.css file within your child theme folder, then edit the new file to add some basic heading info (just so you or subsequent developers know what’s going on):
    1 /*---------------------------------------------------
    2 Theme Name: Your Child Theme Folder Name Here
    3 Description: Child theme for Parent Theme Name Here
    4 Author: Your Name Here
    5 Template: Parent Theme Name Here
    6 ----------------------------------------------------*/

    After the heading you can add all of your awesome CSS to change the look of your parent theme using your child theme.

  3. Create your child theme’s PHP file: Inside of your new child-theme folder create a functions.php file. Next edit the new functions file to add code that will load your original “parent” theme’s styling:
    1 <?php
    2 add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    3 function theme_enqueue_styles() {
    4     wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    6 }
    7 ?>

    Just be sure to add your function.php tweaks after that last open PHP tag./li>

You can of course add lots more to your child theme to make changes to templates for your header, footer, or anything else really. But for the purposes of this tutorial you’re all set! So here we go…

Eliminating Unnecessary WordPress Dashboard Widgets

Once you log in to your WordPress dashboard, you will notice a couple of sections (widgets) such as At a Glance, Site Stats, Quick Draft, and WordPress News among others. Most of these dashboard widgets are added by WordPress, but the number of widgets displayed could go up or down depending on your theme and/or plugins. Some themes and plugins add their own widgets to the dashboard.

While some of these widgets are useful, do your clients need to see each? Do you need to see each of these widgets every time you log in? Perhaps you had to put up with the widgets because you had no way of getting rid of them. Today is your lucky day. You can easily remove as many dashboard widgets as you wish using a few lines of code:

1 //Remove dashboard widgets
2 function remove_dashboard_meta() {
3         $user = wp_get_current_user();
4         if (!$user -> has_cap ('manage_options'))
5         remove_meta_box( 'dashboard_incoming_links', 'dashboard', 'normal' );
6         remove_meta_box( 'dashboard_plugins', 'dashboard', 'normal' );
7         remove_meta_box( 'dashboard_primary', 'dashboard', 'normal' );
8         remove_meta_box( 'dashboard_secondary', 'dashboard', 'normal' );
9         remove_meta_box( 'dashboard_quick_press', 'dashboard', 'side' );
10         remove_meta_box( 'dashboard_recent_drafts', 'dashboard', 'side' );
11         remove_meta_box( 'dashboard_recent_comments', 'dashboard', 'normal' );
12         remove_meta_box( 'dashboard_right_now', 'dashboard', 'normal' );
13         remove_meta_box( 'dashboard_activity', 'dashboard', 'normal');
14 } add_action( 'admin_init', 'remove_dashboard_meta' );

Copying the above code in your child theme’s functions.php file (found at wp-content/themes/yourthemename/child-theme/functions.php) and saving the changes will eliminate all dashboard widgets with the exception of those added by your theme or plugins. From the code above, all users with less than admin capabilities won’t see the widgets thanks to this part of the code:

1 $user = wp_get_current_user();
2 if ($user -> has_cap ('manage_options'))

…which checks if the user has (‘manage_options’) capability only available to administrators. Perhaps you don’t want to rid your dashboard of all widgets. You can use the following code instead:

1 // Create the function to use in the action hook
3 function wpexplorer_remove_dashboard_widget () {
4 remove_meta_box ('dashboard_quick_press', 'dashboard', 'side');
5 }
7 // Hook into the 'wp_dashboard_setup' action to register our function
9 add_action ('wp_dashboard_setup', 'wpexplorer_remove_dashboard_widget');

Copy the above code to your functions.php file and save changes to get rid of the Quick Draftwidget. To remove any other widget, just replace ‘dashboard_quick_press’, ‘dashboard’, ‘side’with corresponding slug for each widget. Other standard widget slugs include:

  • dashboard_incoming_links
  • dashboard_plugins
  • dashboard_primary
  • dashboard_secondary
  • dashboard_quick_press
  • dashboard_recent_drafts
  • dashboard_recent_comments
  • dashboard_right_now
  • dashboard_activity

But you might have additional widgets added by your parent theme, other plugins you have installed or even your hosting (WP Engine adds one called wpe_dify_news_feed). To find the slug for these added widgets use a browser inspector (we like the one in Chrome – it’s part of their default web developer tools so all you have to do is right click on an element and choose “inspect”) then copy the div ID for the widget you want to remove.

Adding WordPress Dashboard Widgets

Now that you can eliminate dashboard widgets as you fancy, let us try adding our own custom widgets. You can display anything you want with your widget, so nothing is to hold you back from creating the custom dashboard of your dreams. The best part is it is super duper easy adding a widget to your WordPress dashboard. Just add the following code to your wp-content/themes/yourthemename/child-theme/functions.php file:

1 /**
2 * Add a widget to the dashboard.
3  *
4  * This function is hooked into the 'wp_dashboard_setup' action below.
5  */
6 function wpexplorer_add_dashboard_widgets() {
8     wp_add_dashboard_widget(
9                  'wpexplorer_dashboard_widget', // Widget slug.
10                  'My Custom Dashboard Widget', // Title.
11                  'wpexplorer_dashboard_widget_function' // Display function.
12         );
13 }
14 add_action( 'wp_dashboard_setup', 'wpexplorer_add_dashboard_widgets' );
16 /**
17  * Create the function to output the contents of your Dashboard Widget.
18  */
19 function wpexplorer_dashboard_widget_function() {
21     // Display whatever it is you want to show.
22     echo "Hello there, I'm a great Dashboard Widget. Edit me!";
23 }

Save changes. Of course, you can edit the plugin to suit your needs. Put your HTML, PHP or whatever where you have:

1 echo "Hello there, I'm a great dashboard Widget. Edit me!";

Your new custom widget will appear at the absolute bottom – below all the widgets – which might be outside the viewport if you have many widgets. You can, however, drag and drop the widget at the top (or anywhere else for that matter).

Custom WordPress Dashboard Page

Let’s say you are interested in creating a totally different dashboard. One that comes with your own custom HTML, PHP and even styling. If you want to go beyond just adding/removing dashboard widgets, please checkout How to Create A WordPress Custom Dashboard Page by Remi Corson.

He has built a great plugin that will help you to speed up creating your own custom dashboard page (custom-dashboard.php). You must brush up on your PHP development skills to fork the plugin to suit your specific needs. All in all, I tried Sweet Custom Dashboard and it’s amazing. Your custom dashboard could be an install away :). Want to customize your welcome message, checkout our post on Customizing Your WordPress Dashboard Welcome Message.

Removing WordPress Dashboard Menus

We can add or eliminate WordPress dashboard widgets and even change how the dashboard looks entirely (thanks to Remi), Now let’s move on to the next part: eliminating unwanted menu items.

Why? You want to remove some menus to provide clients a leaner dashboard and keep them from accessing “restricted” areas. If a client does not know their way around WordPress, they might end up breaking the site if they visit and change options on such pages as Settings or Plugins. Add the following code to your functions.php file:

1 function remove_menus() {
3 remove_menu_page( 'themes.php' ); //Appearance
4 remove_menu_page( 'plugins.php' ); //Plugins
5 remove_menu_page( 'users.php' ); //Users
6 remove_menu_page( 'tools.php' ); //Tools
7 remove_menu_page( 'options-general.php' ); //Settings
9 } add_action( 'admin_menu', 'remove_menus' );

The above code removes the menu links to Settings, Plugins, Appearance, Users and Tools for all users. You can remove sub menus as well. Here is the example code that removes the Widgets sub menu under Appearance:

1 add_action( 'admin_menu', 'adjust_the_wp_menu', 999 );
2 function adjust_the_wp_menu() {
3   $page = remove_submenu_page( 'themes.php', 'widgets.php' );
4 }

In the example above, users will access all sub menus under Appearance except Widgets. You can remove as many menus or sub menus as you wish. Just remember this won’t stop users from accessing these pages directly. I mean, if a user enters, for instance, they will access your Settings page. Good thing most users won’t bother if the item is not on the menu.

If you can’t or don’t want to edit your functions.php file, you can always install the Admin Menu Editor plugin, which gives you complete control over your menus. It ships with a couple of cool features including role-based menu restrictions, ability to hide menus and create custom menu items among other cool features.

Customizing the WordPress Dashboard Footer

To this moment, we’ve made “significant” customization to your WordPress admin dashboard. It’s only right to take some credit for all the brilliant work you’re doing. Customizing the footer (“Thank you for creating with WordPress.”) can further help strength your (or the client’s) brand. Let’s change your footer to “Built with love by Your Name.” Just add the following snippet to your functions.php file and save changes:

1 // Custom Admin footer
3 function remove_footer_admin ()
4 {
5  echo '<span id="footer-thankyou">Built with love by <a href="" target="_blank">Your Name</a></span>';
6 }
7 add_filter('admin_footer_text', 'remove_footer_admin');

Replace ‘Your Name” with your name, website, email address etc and with your actual domain name. Moving on…

Customizing the Login Form

So far, you have everything it takes to customize your WordPress admin dashboard. Let’s go a step further and customize the login page, so your users can have a truly personalized experience from the get go. After all, why bother customizing your WordPress dashboard only to be given away by the login page?

With this page, we need to customize two elements: the default WordPress logo and the link that comes with it. But before I show you the code 🙂 , you can customize your login page easily using any of these 15 Best Custom Login Page Plugins for WordPress. Now, for the warm fuzzy feeling that comes from playing with the code, copy the following to your functions.php:

1 function my_login_logo() {
2 ?>
3     <style type="text/css">
4         body.login div#login h1 a {
5             background-image: url(<?php echo get_stylesheet_directory_uri();
6 ?>/images/logo.png);
7             padding-bottom: 30px;
8         }
9     </style>
10 <?php }
11 add_action( 'login_enqueue_scripts', 'my_login_logo' );

Replace logo.png with your custom logo filename, which you should first upload to wp-content/themes/yourtheme/images. Keep your custom logo below 80 x 80 pixels even though you can change this with some custom CSS. With the custom login logo in place, it is time to change the link that comes with the original WordPress logo. Let’s us link your new logo to your website. Copy this code to your functions.php file and save changes:

1 function my_login_logo_url() {
2     return home_url();
3 }
4 add_filter( 'login_headerurl', 'my_login_logo_url' );
6 function my_login_logo_url_title() {
7     return 'Your Site Name and Info';
8 }
9 add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Remember, you can always style your login page as you wish using CSS. Or, you can simply start with an awesome theme like the Total Multi-purpose & Responsive WordPress theme which comes with built-in options for a custom login page and site branding.

Customize WordPress Dashboard: Screen Options

If you don’t want to dive into code or install plugins, you can take advantage of Screen Options to create a custom WordPress dashboard. Just log in to your WordPress dashboard and at the top of the screen to the right, you will spot a Screen Options drop-down menu. Click on this to expand and check/uncheck to activate/deactivate widgets. You can then drag and drop your widgets to arrange them as you wish.

The only disadvantage is this method saves your settings on a per-user basis, meaning it won’t do you much good if you have a multi-author blog. Also, you can’t keep users from re-activating the widgets at will.

Originally posted 2016-04-13 08:04:42. Republished by Blog Post Promoter

Immersive Video Template

Immersive Video Template

Go to Source
Immersive Video Template

A full-screen video presentation, that is resized and animated to become the content of a mobile device.

Lately, we’ve come across a couple of websites using full-screen videos as a way to “dramatically” introduce a product or a feature of an app. We tried to create something similar, in the form of a simple application template.

With the help of some CSS tricks (mostly CSS transforms and animations), we’ve created a video introduction that turns into content for a mobile device. Some of the tricky parts were about picking the right assets (we’ve created this video that introduces some features of a photo editing app) and handling the loading animation. We’re aware that showing a loader right away is not a great experience. Therefore, before using this template you should consider 1) whether the video would be a great selling point or not, and 2) whether you expect many returning visitors, or the goal is just to let the user download the app and (almost) never come back. If the answers to these questions are 1) YES and 2) No, then this template will come in handy for you 😉

Video footage:
Inspiration: Landing Page by Cuberto
Icons: Nucleo

Creating the structure

The HTML structure is composed of two main elements: a div.product-intro (product title, action button, ..) and a div.product-preview for the image/video preview of the product.

<div class="cd-immersive-video">
	<div class="intro-wrapper">
		<div class="product-intro">
				<h1 class="item item-1">Immersive Video Template</h1>
				<p class="item item-2">
					<!-- product description here -->

				<a href="#0" class="cd-btn item item-3">Download &amp; Article</a>
		</div> <!-- .product-intro -->

		<div class="product-preview no-transition">
			<div class="device-frame">
				<img src="assets/img/mobile-frame.svg" alt="Device Frame">

			<div class="product-image">
				<img src="assets/img/video-fallback.jpg" alt="Product Preview">

			<div class="product-video" data-video="assets/video/video.mp4">
				<div class="video-wrapper">
					<!-- video will be insereted here using js -->
		</div> <!-- .product-preview -->

	<div class="cd-loader"></div>
</div> <!-- .cd-immersive-video -->

The video is not directly inserted in the HTML but it’s loaded using JavaScript.

Adding style

On small devices (viewport width less than 800px), the css is pretty straightforward: both the div.product-intro and the div.product-preview are initially hidden ( opacity: 0 ) and then revealed using the cd-item-move-up animation.

@keyframes cd-item-move-up {
  	0% {
    	opacity: 0;
    	transform: translateY(50px);
  	100% {
   		opacity: 1;
    	transform: translateY(0);

The product preview video is not loaded on these devices while an image is used as a preview of the product (div.product-image > img).

On bigger devices, the product intro and preview are initially hidden; once the preview video has been loaded (more in the Events handling section), the .video-is-loaded class is used to reveal the content and trigger the video animation.

@media only screen and (min-width: 800px) {
  .cd-immersive-video .intro-wrapper {
    /* while loading the video - hide the content */
    visibility: hidden;
    opacity: 0;
    transition: opacity 1.5s, visibility 1.5s;
  } .intro-wrapper {
    /* video has been loaded - reveal content */
    visibility: visible;
    opacity: 1;

For the video animation: the div.product-video is initially scaled-up (using JavaScript) to cover the entire viewport. Once the video has been played for around 1s, the div.product-video is scaled down and translated to the right. The div.product-intro is then animated using the .animate-content class: each item of the intro (h1, p..) is revealed using the cd-item-slide-in animation with a different animation-delay.

@media only screen and (min-width: 800px) {
  .cd-immersive-video .product-intro .item {
    opacity: 0;
  .cd-immersive-video .product-intro.animate-content .item {
    animation: cd-item-slide-in .4s both;
  .cd-immersive-video .product-intro.animate-content .item-1 {
    animation-delay: .1s;
  .cd-immersive-video .product-intro.animate-content .item-2 {
    animation-delay: .2s;
  .cd-immersive-video .product-intro.animate-content .item-3 {
    animation-delay: .3s;

Events handling

On big devices, we use jQuery to load the product preview video and insert it into the HTML structure.
We used the canplaythrough event to detect if the video is ready to be played; we also added a check to the readyState of the video  (if the video is cached the canplaythrough event may not be detected).

if(':visible') ) { //productVideo = $('.product-video');
	//the video src is the data-video of productVideo
	var	video = $('<video><source src="''video')+'" type="video/mp4" />Sorry, your browser does not support HTML5 video.</video>');
	//check if the canplaythrough event occurs - video is ready to be played
	video.on('canplaythrough', function() {'canplaythrough').trigger('readyToPlay');
	// if video is in cache 'canplaythrough' won't be triggered 
	if (video.get(0).readyState > 3) {'canplaythrough').trigger('readyToPlay');

Once the video is ready, we insert it into the HTML, hide the loader and then trigger the video animation.

video.on('readyToPlay', function(){
	//video id ready to play

	//wait for the end of an animation iteraction and reveal the video, function() {
		//makes sure the transition is applied (when using the scale-down class)
        void loader.get(0).offsetWidth; 
        loader.on(transitionEnd, function(){;
        	immersiveVideoWrapper.trigger('startAnimation'); //animate div.product-video

Go to Source

Using a no-js class in your WordPress theme

Go to source

The no-js class can often be seen in css and html, normally placed on the html or body tag. What is it all about? It’s to be able to add specific CSS styling for those who view the site with javascript disabled. How does it work? We run a simple javascript that replaces the “no-js” class with “js”. If no javascript is enabled, no-js remains. As simple as that.

To add this to your theme, first add no-js to the html-tag of your theme’s header.php:

<html class="no-js" <?php language_attributes(); ?>>

Then, add the simple javascript to replace the no-js class with js in functions.php:

/*  Script for no-js / js class
/* ------------------------------------ */
function alx_html_js_class () {
	echo '<script>document.documentElement.className = document.documentElement.className.replace("no-js","js");</script>'. "\n";
add_action( 'wp_head', 'alx_html_js_class', 1 );

And there you go. You can now add .no-js .myclass { cssfix } so that your theme doesn’t break too badly if javascript is disabled.

Originally posted 2013-11-09 19:01:30. Republished by Blog Post Promoter