wordpress Archives - Daniel Auener

Yeoman WordPress theme generator – kickstart a grunting SCSS theme

danielJanuary 6, 2014April 6, 2014

This post describes a super simple and time saving Yeoman workflow to build WordPress themes. To make this post work for you, you should have a basic understanding of nodejs, nodes package manager npm, Yeoman workflows, Grunt and SASS/SCSS. Ones you have all up and running, you will create a Yeoman WordPress starter theme in no time. But it is not only a theme it comes with a bunch of features:

A fully funtional WordPress theme with a working grunt development environment.
The generated theme is tested against the Theme check and Theme Forest check plugins and runs without errors, warnings or recommendations, is visually tested with Testdata for the theme unit test, runs without errors or warnings in debug mode and follows the WordPress coding standards a 100%
A pre-filled HTML documentation

Getting started

Getting started with nodejs, npm and Yeoman is well described elsewhere, so instead of repeating all of it you will get some links that worked for me. To go on, you should have the current version of nodejs, npm and yeoman running. Than you can easily install our generator from the npm registry. Note that on some setups you will have to run this command with super-user permissions:

npm install -g generator-wp-theme

Now you have installed the generator you can generate your first starter theme. As you might want to test it in your WordPress development environment, you should go to a running WordPress installations themes directory and run:

yo wp-theme

Thats it! Just answer some simple questions in the terminal and the installation should run through without errors and installing the theme plus all needed local node modules.

Developing with the Yeoman WordPress theme

First of all the generated starter theme provides you with a solid base of WordPress theme templates, following among others WordPress theme directory and ThemeForest standard requirements. The functions.php file sets your theme up to support all required functions like a custom header and background. All should be ready to make your adjustments to build a perfect theme.

SASS/SCSS setup

The themes style.css file is compiled from a bunch of SCSS-files. To get a layout grid and some nice mixins the bourbon and neat libraries are build in. The SCSS-file names should be self-explaining, however a short overview in including order follows:

vendor/normalize: Includes the normalizing css.
vendor/bourbon/bourbon: Includes the great bourbon mixin library.
_base.scss: Defines the main colors of the themes and basic HTML-element styling.
_grid-settings.scss: Defines and includes the base setup for the themes grid. The default grid is bourbons neat.
_typography.scss: Defines all fonts, typography related mixins and HTML-element styles. Defines even some font-size variables.
_components.scss: Here should be placed the basic mixins and placeholders for the theme.
_wp-base.scss: Defines some basic WordPress classes, like sticky, alignleft or bypostauthor.
_header.scss: Contains the header styles.
_navigation.scss: Contains the navigation styles.
_content.scss: Contains the basic content styles for posts and pages.
_post-formats.scss: Extends the content styling with styling for multiple WordPress post formats.
_footer.scss: Contains the footer styles.

Grunt tasks

The generated Yeoman WordPress theme provides a working Grunt configuration. All Grunt related assets like the gruntfile.js and the package.js are placed in the grunt directory. The Yeoman generator has already setup Grunt for the theme and installed all node modules in grunt/node_modules. If you want to install manually, go to the grunt directory and run

npm install --save-dev

All Grunt tasks are called from the grunt directory. You can manage the following available tasks, by running these commands:

grunt: Is running the default task-list, which is the same as running grunt jshint, grunt uglify and grunt sass.
grunt jshint: Checks the JavaScript files and gives you some hints.
grunt uglify: Takes the JavaScript files and concatenates and minifies it to one file: js/scripts.min.js, which is included in the theme.
grunt sass:dev: Is compiling all the scss files to one expanded style.css in the themes root directory.
grunt sass:prod: Is compiling all the scss files to one compressed style.css in the themes root directory.
grunt watch: Watches the scss and js files for changes and runs the above tasks automatically, plus giving you a cross-OS desktop notice on success.
grunt dist: Runs grunt uglify and grunt sass:prod, takes all the production relevant theme files and places them in the dist directory under the themes root. Now the dist directory contains a production ready theme, which can be uploaded to a live server.
grunt phpcs: Requires PHP CodeSniffer with WordPress standard installed in the development environment.
Checks the themes php files against the WordPress coding standards.

Documentation

In case you want to upload your theme to some marketplace or theme directory, Yeoman WordPress theme generator even creates a HTML-documentation for you. The documentation is based on the Theme forrest documentation template It’s located in the doc directory and already covers some base information about your theme. You just have to complete it with your specific information and your theme is documented as well.

Now, make themes!

With the Yeoman WordPress theme generator (generator-wp-grunted-theme), you should get everything you need, to build great themes. Be welcome to let me know if you have done so, or even better if you want to add a important task, find a bug or have an improvement idea.

WordPress register with email only, using Gravity Forms and User Registration add-on

danielNovember 7, 2013November 7, 2013

<?php

/**
 * WordPress register with email only, make it possible to register with email 
 * as username in a multisite installation
 * @param  Array $result Result array of the wpmu_validate_user_signup-function
 * @return Array         Altered result array
 */
function custom_register_with_email($result) {

	if ( $result['user_name'] != '' && is_email( $result['user_name'] ) ) {

		unset( $result['errors']->errors['user_name'] );

	}

	return $result;
}
add_filter('wpmu_validate_user_signup','custom_register_with_email');

?>

The snippets story

Some days ago I’ve implemented a custom user registration with WordPress. I used Gravity Forms with the User Registration add-on, which worked fine when the user had to choose an username manually. But we wanted even a quick-registration option on the startsite, which we wanted to work with only one form-field asking for an email-address. So I built a Gravity Form with just a email field and added a User Registration with the email-field linked both as the required users email and username.

Works fine with a single install, but with a multi-site installation the wpmu_validate_user_signup-function is used and we got an “Only lowercase letters (a-z) and numbers are allowed.” error-message. The above filter fixes this issue by undoing this validation error and forcing WordPress to accept an email address as username.

Build a fully customized WordPress login: Those annoying redirects

danielOctober 17, 2013October 18, 2013

I’ve build quite a few custom login-forms in WordPress. There are, as always, a lot of ways to realize that, but nearly all the clients I worked with, had similar requirements: On the one hand they wanted to preserve the usual WordPress login-form to let administrators, editors and authors sign in into wp-admin. On the other hand they wanted another usergroup to sign in into their site via a fully customized WordPress login-screen, to download protected documents or whatever.

Customized WordPress login-form

Generally the problem is solved fairly easy, using the WordPress-API. You can print out a standard login-form by using wp_login_form wherever in your theme you want it. There is even a way to specify the page, the user should be redirected to after a successful login. Here an example, redirecting you to the home page:

<?php
    wp_login_form( array(
        'redirect' => get_bloginfo('url'), 
        'form_id' => 'sign-in',
        'label_log_in' => __( 'Sign in' ),
    ) );
?>

If you need to adjust the HTML-output, you can build your own sign in form markup by saving a file named searchform.php in your theme folder. Than you are just a few stylesheet-rules away from your customized form, with working login.

Handling login-fails

The problems begin when you fail to login, because writing in a wrong username and/or password doesn’t redirect you to your customized form, it redirects you to the wp-admin site. Since the signing-in user is not supposed to login to wp-admin, this redirect doesn’t make any sense. But again we find a straight forward solution in the WordPress-API. Add these lines to your functions.php:

function custom_login_failed( $username ) {
    $referrer = $_SERVER['HTTP_REFERER'];

    if ( !empty($referrer) && !strstr($referrer,'wp-login') && !strstr($referrer,'wp-admin') ) {
	
        // redirect to your login page, you might want to add a parameter login_failed
        // to show an error message or something like that
        wp_redirect( ... );
	exit;
    }
}
add_action( 'wp_login_failed', 'custom_login_failed' );

You might think that’s all, but not so fast …

Handling empty logins

There is yet another way to get redirected to the wp-admin login form, and that is when you just don’t enter anything. Submit the form with an empty username and password field and you are on wp-admin again. That is because the wp_authenticate function, which handles redirection ignores empty_username and empty_password as error codes and that is why our wp_login_failed action never fires. The solution is to change these error codes, if the user logs in from another site than wp-admin or wp-login.php. This is done by the following filter function (note the filter priority, which is important here).

function custom_authenticate( $user, $username, $password ) {

    if ( is_wp_error( $user ) && isset( $_SERVER[ 'HTTP_REFERER' ] ) && !strpos( $_SERVER[ 'HTTP_REFERER' ], 'wp-admin' ) && !strpos( $_SERVER[ 'HTTP_REFERER' ], 'wp-login.php' ) ) {
    	$referrer = $_SERVER[ 'HTTP_REFERER' ];
    	foreach ( $user->errors as $key => $error ) {
    		if ( in_array( $key, array( 'empty_password', 'empty_username') ) ) {
    			unset( $user->errors[ $key ] );
    			$user->errors[ 'custom_'.$key ] = $error;
    		}
    	}
    }

    return $user;
}
add_filter('authenticate','custom_authenticate', 31, 3);

Other ways?

I know of one alternative to the above code: Since wp_authenticate is a plugable function, you could simply overwrite it. But this you only can do with a plugin, so you have to add a plugin to your site and activate it, which I think is a bit more hassle.

Is there another way you know of? Please let me know in the comments.

The Snippets Story

If you are using my Simply related Posts plugin, you might want to have related post thumbnails. The code above is simply adding the post-thumbnail before the related post titles, if it exists. It implements the simply_related_posts_title filter, to add thumbnails to the printed title. Of course, you can add not only thumbnails, but any other kind of information to the title, by using that filter.

Works with version Simply related Posts 1.2 and later.

Simply Related Posts 1.2: plugin update

danielMay 2, 2013October 23, 2014

Update: Simply Related Posts 1.3 comes with a Serbian tanslation! Thanks to Borisa Djuraskovic from http://www.webhostinghub.com!

I’ve just released Simply Related Posts 1.2, a new version of my Simply Related Posts plugin. Now it supports pages, attachment-pages and custom post-types, which makes it a lot more flexible. Additionally I’ve added a filter to the related post-title, so you can add thumbnails, excerpts or anything else you can think of.

Test Simply Related Posts 1.2 now, download it from the plugin directory.

As always, post your questions, feedback etc. here below in the comments section!

Check out my blog and what I’m working on right now

Links

Tag: wordpress