Category Archives: Wordpress

WCK Single Metabox just got better

Written by

wck-small-banner

Creating custom fields with our WordPress Creation Kit plugin has just become simpler.

We’ve redesigned the way Single Metaboxes work, reducing the number of steps required for adding content.

WCK’s Custom Field Creator allows you to create single or repeater metaboxes.

One of WCK’s strong points is the ability to create repeater fields as well as repeater groups. This is super helpful when you need to add multiple custom fields or groups of custom fields of the same kind, without knowing the exact number.

This repeater metabox attached to "Our Team" page allows you to add as many team members as you need.

This repeater metabox attached to “Our Team” page allows you to add as many team members as you need.

WCK Single Metabox Improvements

The problem was that because WCK was designed with repeater custom fields in mind, the Single Metabox design was adapted from the Repeater one.

Simply put, in the previous version, to add custom fields which are not repeatable (stored in a single metabox) you needed to click the “Add Entry” button for each one of the custom field groups attached to a post, page or CPT. Only after doing this, you could “Publish” the page/post and have the saved custom fields attached to it.

Here we're using a Single Metabox attached to an Events CPT to add event details stored in custom fields.

Here we’re using a Single Metabox attached to a Events CPT to add event details stored in custom fields.

Only after clicking the "Add Entry" button custom fields data is saved.

Only after clicking the “Add Entry” button custom fields data is saved and you can go ahead and “Publish” the event.

If however you forget to click the “Add Entry” button after adding content in the custom fields and simply click Publish, the custom field data will not be saved and the single metabox content will be empty. An alert of unsaved data may have helped, but it was still going half-way.

This was a serious usability issue which needed improvement. In the redesigned WCK Single Metaboxes, we rethinked the way Single Metaboxes are built, so that we can remove the “Add Entry” button altogether. This eliminates an extra step and simplifies the data entry process.

The NEW Single Metabox:

NEW Single Metabox design eliminates the redundant "Add Entry" button.

The NEW Single Metabox design eliminates the redundant “Add Entry” button.

This redesign impacts and simplifies the WCK UI as well. Based on WCK API, some WCK modules (like Custom Fields Creator, Front-end Posting etc.) were using the single metabox format as well.

This basically means that from now on creating custom content types with WCK will require less steps and fewer clicks.

Note: The improved WCK Single Metabox is available starting with WCK version 1.1.4.

Import / Export WCK Settings addon

Another important addition is the Import / Export Settings addon. This makes it really easy for people working on two environments, to export all WCK Settings from the development site and import them on the live site.

No need to define the same metaboxes, taxonomies or custom post types twice, for both sites. Simply export them to as many sites as you need.

Download The Import And Export Add-On

Have any suggestions on how we can make WCK even better? Share your thoughts in the comments section below.

User Field Visibility for Profile Builder

Written by

I would like to have some fields which are not visible, some fields visible but not editable for logged users.

icon-field-visibility-150x150

Did you ever wanted to have some admin only fields attached to your user profiles? Or fields that are editable by administrators and visible by your user?

Now it’s possible with a new addon for Profile Builder: Field Visibility

Profile Builder – Field Visibility Add-On

By default, extra fields created with Profile Builder can be visible and editable by all user roles both in the front-end forms or in the backend.

Now you can add extra fields that are only visible and editable by an administrator like:

  • admin notes about the user
  • custom ID to connect the user with another system
  • a custom category that only admins can add the users in

field_visibility

User Role based field visibility

Wouldn’t it be nice to have different profiles for different user roles?

Now this is possible with the User Role Visibility for fields.

If in the past you had to use the multiple edit profile forms to achieve this, the User Field Visibility Addon gives you the possibility to have a single edit profile form that displays different fields depending on what user role the current user has.

This applies to the backend Edit Profile page as well.

Note: User Field Visibility requires Profile Builder Pro or Hobbyist version 2.0.8 or higher.

Get Field Visibility for Profile Builder

Numbers and Phone Validation Addon for Profile Builder

Written by

I want to restrict an input field to be numerical How can I do that?

Zip codes, phone numbers, custom ID’s require the custom input field in a registration form to be made up of numbers only. That’s where this addon for Profile Builder comes in handy.

Download and activate

icon-150x150First of all, click on the button below to download the add-on. Unzip the downloaded file and copy the contents in the wp-content/plugins directory.

Download The Numbers Only Field Add-On

Please note: The Numbers and Phone Validation Add-On requires Profile Builder version 2.0.5 or higher.

Once the files are moved, head over to the Plugins section of the Dashboard and activate the add-on.

Enable Numbers or Phone Validation for a Custom Input

Once the add-on has been activated head over to the Manage Fields page in Profile Builder. If you select an input field you will see that a new property named Numbers Only appeared below the other properties.

numbers_phone_format

See it in action

Too see your work in action head over to the page where you display the register or edit form and type some letters into your new field and submit the form. You will get an error asking you to enter numbers only!

screenshot2

WordPress Shortcode – Compare Values

Written by

icon-256x256

With both Profile Builder and WordPress Creation Kit plugins using Mustache as their template system for things like User Listing and Swift Templates, we need at times the possibility to compares different values.

This however, is not possible in Mustache. So a shortcode to compare values comes to the rescue.

Compare Shortcode

Download Compare Shortcode

How to use

[compare val1="test" val2="test" operator="=="]
    List if the values is the same?
[/compare]
 
// Inside Profile Builder or WordPress Creation Kit you'll probably use it like so:
[compare val1="{{my-custom-field-2}}" val2="Yes" operator="=="]
    List if the values is the same?
[/compare]

Code wise, it’s fairly straight forward. You can also see what operators are supported:

/*
 * Compare shortcode. Tags: shortcode, compare,
 * Usage:
	[compare val1="test" val2="test" operator="=="]
		List if the values is the same?
	[/compare]
 */
add_shortcode( 'compare', 'wppbc_compare_shortcode' );
function wppbc_compare_shortcode( $atts, $content ){
	extract(
		$out = shortcode_atts(	array( 'val1' => '', 'val2' => '', 'operator' => ''), $atts )
	);
 
	// quick fix for WordPress bug: https://core.trac.wordpress.org/ticket/29658
	foreach($out as $key => $value){
		$out[$key] = str_replace('”', '', $value );
	}
 
	$l = $out['val1'];
	$r = $out['val2'];
 
	$operators = array(
		'=='    => create_function('$l, $r', 'return $l == $r;'),
		'==='   => create_function('$l, $r', 'return $l === $r;'),
		'!='    => create_function('$l, $r', 'return $l != $r;'),
		'<'     => create_function('$l, $r', 'return $l < $r;'),
		'>'     => create_function('$l, $r', 'return $l > $r;'),
		'<='    => create_function('$l, $r', 'return $l <= $r;'),
		'<='    => create_function('$l, $r', 'return $l <= $r;'),
		'>='    => create_function('$l, $r', 'return $l >= $r;'),
		''      => create_function('$l, $r', 'return $l == $r;'),
	);
	if ( !array_key_exists($out['operator'], $operators ) ){
		return '<p>The compare operator <strong style="padding:0 10px;">' . $out["operator"] . '</strong> is not recognized. Please try: == , ===, !=, <, >, <=, >=';
	}
 
	$bool = $operators[$out['operator']]($l, $r);
	if( $bool ) {
		return $content;
	}
}

WordPress Passwordless Login

Written by

logo_150_150_03

WordPress Passwordless Login is a plugin that allows your users to login without a password. It’s as simple as installing it and adding a shortcode in a page or widget.

Download Passwordless Login from WordPress.org

These past months have been filled with security reports, articles and 0-day exploits. It’s fair to say they had little to do with WordPress, but that’s besides the point. What’s certain is that we’re now living in an increasingly technologically complex world and it’s getting harder and harder to keep everything safe and secure.

This article draws it’s inspiration from the Passwordless authentication: Secure, simple, and fast to deploy, an article published something like two weeks ago. It explains how to get passwordless login for node.js but more importantly, why you want passwordless login.

Username + passwords will probably not be replaced anytime soon. But that doesn’t mean we can’t come up with alternatives.

Everybody has a “friend” that uses the same password or some variation: the pass with numbers in it, the pass with capital letters, the pass with special characters in it, the pass with the year at the end in it, etc.

Lately there have been great solutions involving one time passwords like Persona from Mozilla. Whenever a user wants to log in, they receive a short-lived, one-time link with a token via email or text message.

There is also Clef that uses a QR code and also supports WordPress via a plugin

But all these are third party so let’s look into building something native to WordPress.

Read more

WordPress Minimum Password Length and Password Strength Meter for User Registration

Written by

I’m quite concerned for the security of my site and content if I allow users to sign up with weak passwords.

That’s something we hear a lot from website owners. Chances are, if you run a WordPress membership site that allows user registration, your primary security concern is NOT to allow users to sign-up with weak passwords.

A short or weak password is one of the most used security breach by people trying to hack your site, so you try to avoid that at all costs. Cracking one password may sometimes be enough to lose access to sections or even the whole website, which puts your content, revenue and work in danger.

After hours of research you’ve probably realized that most of the plugins available go only half way. While some offer increased security by allowing you to set a minimum password length, they do NOT posses all the features you would need from a user registration plugin.

On the other side, even though there is a significant list of plugins out there that can help you with some aspects of the user registration part, the big majority fall short when it comes to security.

Wouldn’t it be nice to have an all in one solution that can help you with both the front-end user registration part, but also be able to set security restrictions when it comes to registration forms?

Read more

WordPress Creation Kit 2.0.6 and WordPress 3.9

Written by

Due to an overconfidence on our part regarding WordPress updates and compatibility issues with our plugins, we failed to test WordPress Creation Kit 2.0.5 with WordPress 3.9 before the official launch of WordPress 3.9.

We are sorry. We should have known better and we will make a habit out of testing our plugins with future versions of WordPress before they are released.

WYSIWYG Bug

Since WP 3.9 updated TinyMCE to the latest version (v.4) and our WYSIWYG editor was still using v.3, trying to initiate the two together causes JavaScript errors and the WordPress Editor and our own WYSIWYG Editor stopped working.

Also, due to the way WordPress loads TinyMCE v.4, we’re not able to use it any longer for our own WYSIWYG editor (the main reasons it took us a full day to issue the update). That is the reason why from version WCK 2.0.6 we’ve switched to CKEditor for the WCK WYSIWYG editor.

You can download the latest version of WordPress Creation Kit from:

  • wordpress.org
  • Your Account page
  • Or wait for an automatic update to be available for both the Free or the Pro, Hobbyist & Lifetime versions

Show Custom Fields in WordPress

Written by

Show Custom Fields in Theme

How to show custom fields in WordPress is one of the hardest thing to understand by non-technical users.

By default, WordPress gives you the possibility to add custom fields directly from the UI.

There are also a lot of plugins that let you add advanced custom fields like inputs, check-boxes, selects, etc.

However, almost all of those solutions fall short when it comes when you want to show custom fields in your template.

Show Custom Fields Using Code

The default way to show custom fields in WordPress would be to:

  1. Open the single.php or page.php template file from your theme (via FTP or locally)
  2. Find the_content function so you can list your custom fields after the actual content of the post or page
  3. Use the get_post_meta function to list custom fields

It doesn’t sound to complicated, but you’ve lost a non-technical user at opening single.php

This is how your page.php could look if you wanted to show two custom fields, book title and book ISBN code.

< ?php
/**
 * The template for displaying all pages
 *
 * This is the template that displays all pages by default.
 * @subpackage Twenty_Thirteen
 */
 
get_header(); ?>
 
	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">
 
			< ?php /* The loop */ ?>
			< ?php while ( have_posts() ) : the_post(); ?>
 
				<article id="post-<?php the_ID(); ?>" < ?php post_class(); ?>>
					<header class="entry-header">
						<h1 class="entry-title">< ?php the_title(); ?></h1>
					</header><!-- .entry-header -->
 
					<div class="entry-content">
						< ?php the_content(); ?>
 
<!-- Let's show our custom fields here -->						
 
< ?php 
 
	$my_book_title = get_post_meta( get_the_ID(), 'book_title', true);
	$my_book_isbn = get_post_meta( get_the_ID(), 'book_isbn', true);
 
	if( ! empty( $my_book_title ) ) {
		echo '<h3>Book Title: ' . $my_book_title . '<h3>';
		echo '<p>ISBN: ' . $my_book_isbn . '</p>';
	}
 
?>
 
<!-- End showing our custom fields here -->						
						< ?php wp_link_pages( array( 'before' => '<div class="page-links"><span class="page-links-title">' . __( 'Pages:', 'twentythirteen' ) . '</span>', 'after' => '</div>', 'link_before' => '<span>', 'link_after' => '</span>' ) ); ?>
					</h3></div><!-- .entry-content -->
 
					<footer class="entry-meta">
						< ?php edit_post_link( __( 'Edit', 'twentythirteen' ), '<span class="edit-link">', '' ); ?>
					</footer><!-- .entry-meta -->
				</article><!-- #post -->
 
				< ?php comments_template(); ?>
			< ?php endwhile; ?>
 
		</div><!-- #content -->
	</div><!-- #primary -->
 
< ?php get_sidebar(); ?>
< ?php get_footer(); ?>

It’s no rocket science and really simple to pull off.

The problem starts when you try to do more complicated stuff, like groups of custom fields (metaboxes), repeaters fields and groups, connect posts using custom fields.

Show custom fields using Swift Templates without code

Listing your custom fields in WordPress is one of the simplest way to transform your website from static pages to a proper CMS. You can use it for:

  • Adding extra information on your posts and pages
  • Showcasing your team
  • Listing testimonials
  • Simple property listing
  • Custom product pages
  • Custom landing pages
  • Listing company services
  • And pretty much anything that might require some extra information

It’s possible to create all of the above without being a developer in three steps.

Read more

Post to Post Relationships with WCK 2.0.4

Written by

A new version of WordPress Creation Kit is now available: 2.0.4 with Post to Post Relationships

post to post relationships

WordPress Post to Post Relationships

In WordPress post types are often in a relationship of some sort. For example, you might want to relate a soccer player to a team. You could do it with taxonomies, but it can become cumbersome and it won’t really do what you wanted it to do.

I wanted to use a post to post relationship in my project using other plugins, but I got really stuck when I tried to integrate those in my theme! I’m really not a programmer.

Truth is, post to post relationship plugins have been around for quite some time. The CPT Select field in WCK quite some time ago, but to really make use of it you had to open up your editor and start getting really good at WP_Query.

Read more

WordPress 3.8 – The Best Redesign Since Ever?

Written by

WordPress 3.8 is just around the corner and I can honestly say it’s THE most exciting release since ever! With the WordPress 3.8 RC2 available for download, we’re only days away from the excellently polished WordPress 3.8 UI.

Much more than just a new skin

You can see by the title of this post that I’m quite excited about this release. The old design has been around since 2.7 with only minor improvements across the board (was back in 11’th of December 2008 when 2.7 was launched, 5 years ago!). While the new, WordPress 3.8 UI, keeps most of the elements in the same place, it’s clearly the biggest thing to happen visually in the last 5 years.

WordPress 3.8 UI is stunning to look at and work with, but it also represents the best responsive/mobile implementation we’ve seen for the WordPress backend so far:

  • the top and sidebar menus have been re-envisioned for small resolutions
  • the sidemenu is now hidden by default and can be much more easily extended on small devices.
  • the Add New Post works wonderful for resolutions under 600px
  • every button and link is just a little bit larger, so you can tap them even if you have big thumbs
  • comes with its own flat vector icon font for the admin UI, called dashicons
  • it’s not just a refined implementation of what was before, it was created with devices of all sizes in mind

mobile

Read more