Hardeep Asrani

WordPress Developer, Kanpur

Color Palette Control For WordPress Customizer

It’s been a while since I’ve shared any new control from O2 – WordPress Customizer library. I’ve started to work on it again to extend and add more controls.

Recently I added a Color Palette control which allows to pick a color palette/scheme for your website. It’s a select list instead of a drop down list.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme (in the /inc/ directory, for example), and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/color-palette/color-palette-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include color-palette-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_color_palette', array(
	'default' => 'green',
	'capability' => 'edit_theme_options'
));
	
$wp_customize->add_control(new O2_Customizer_Color_Palette_Control($wp_customize, 'o2_color_palette', array(
	'label' => __('Color Scheme', 'textdomain'),
	'description' => __('Choose a color scheme for your website.', 'textdomain'),
	'section' => 'colors',
	'choices' => array (
		'green' => array(
			'label' => 'Green',
			'colors' => array( '#bbdb9b', '#abc4a1', '#9db4ab', '#8d9d90', '#878e76' )
		),
		'purple' => array(
			'label' => 'Purple',
			'colors' => array( '#29274c', '#7e52a0', '#d295bf', '#e6bccd' )
		),
		'slate' => array(
			'label' => 'Slate',
			'colors' => array( '#b9bbbb', '#a2a3bb', '#5e5f87', '#b3b7ee', '#fbf9ff' )
		)
	),
	'priority' => 5,
	'settings' => 'o2_color_palette'
)));

That will do the work. You can add more arrays as your color schemes, and if you need help you can generate beautiful color palettes from coolors.co.

Installing YOURLS on Nginx

I recently started using Nginx (2 days ago, honestly). As always, it was for a WordPress site that I needed to build, with its own URL shortner using YOURLS.

I’ve installed YOURLS on Apache a million times(not counting) without any issues. It’s easy to install on Apache. You really don’t have to do anything apart from configuring the config.php file. But with Nginx, YOURLS wasn’t working properly.

WordPress was installed in the root of my domain (let’s call it domain.com), while YOURLS was supposed to be in domain.com/go/ folder.

Visiting /go/ directly led to a 404 error page, while domain.com/go/admin/ was working properly. However, the short URLs weren’t working at all. Anyway, let’s start from the beginning.

Note: You need SSH access to your server in order to follow this tutorial.

First you need to make sure that you’ve Git installed on your server. If it’s not installed, you can run:

sudo apt-get install git

Once Git is installed, you need to run clone YOURLS file to your server. Since we wanted to run YOURLS under /go/ directly in our root, we need to run the following code in our root folder:

git clone --branch master https://github.com/YOURLS/YOURLS.git go

That will clone the Git repo to your server. If you want to remove the git tracking then you can delete the .git folder by running the following command from your /go/ directory:

It’s not required but worth doing it. Now you need to edit your /admin/config.php file. Run the following command from your /go/ directory:

cd admin
mv config-sample.php config.php

Then you need to configure your config.php file as described here with your database info: http://yourls.org/#Config

So yea, that’s it for the installation. That’s where it gets little tricky. Everything is done but it doesn’t work properly.

Now you need to edit your /etc/nginx/sites-available/default file. Run the following command:

sudo nano /etc/nginx/sites-available/default

Now you need to add the following to your default file:

location /go/ {
    location = /go/ {
        try_files $uri $uri /go/admin/;
    }
    try_files $uri $uri/ /go/yourls-loader.php?$args;
}

You can add it before the closing } tag of server {...}. And that should make it work. Don’t forget to restart Nginx before trying witht the following:

sudo systemctl restart nginx

That should do it. Now you can visit domain.com/go/ and it should work properly, so will your short URLs. Hope it helps.

Writing Quality Blog Posts

If you search or read your favorite article about how to get your blog famous, and search top on Google then the one thing that everyone will tell you is to produce quality blog posts. But only having a great idea won’t turn your blog post to a quality post. To produce a post which looks good to the eye and suits the mind, you will have to focus on some elements of writing, few of them which I have covered in this blog post.

A solid first impression

What’s the first thing someone notices about your post? It’s the title of your post. It’s one of the most important parts of your post. Make sure to give your content a suitable title. And having a grammatically correct title is recommended.

Which came first, the chicken or the egg?

It’s important that you have a solid structure for your blog post. You just can’t put anything anywhere and then expect your readers to get you. Because you know what you have in your mind when you write your post but they don’t have the same mind.

We will divide a post to three parts:

  • Introduction: That’s the part where you tell your readers what your post is about. It starts with the title of your posts, and then some info about the topic.
  • Supportive content: Now after the introduction to the subject, you will break down every piece of information, sentence by sentence, to your reader. Every sentence should add value to the content.
  • Call to action: Now what do you want your users to do after reading your post? Do you want them to buy a project, relevant to your post? Do you want them to leave a comment below, or share your post on social media? This is the part where you start the user interaction.

Feel free to add more things to your content because this is just a basic structure.

You’re a human, writing to another human

You’re not giving an exam, or writing for search engines. Computers are trying to be more like humans, so why are you trying to be like a computer? After all the search engine indexing, social media sharing and all the promotions, it all comes down to your readers to which you’re targeting. They should be your focus, not search engines.

Appeal to them, like you’re telling something to a friend of your friend, or a relative that you’ve met after a long time. After reading your content, a reader should feel something. It could a feeling of joy, sorrow, success, inspiration or anything. If they’re not feeling anything then your job is not done.

Sure, it’s a different thing when you post tutorials or sports news. But what about review sites? Shouldn’t your readers get a bit influenced by your reviews, because your goal is to help them pick the best?

Be beautiful, not boring

Your blog posts don’t have to look boring. Add some visualization, fonts, images, videos or whatever helps you to make your content beautiful. I’m not talking about filling it with the unnecessary, but fill with what’s necessary.

Always include at least one image with your blog post. It helps you with SEO, helps with sharing on social media, and looks good to your reader. Don’t put anything random but something that goes with the content.

Use beautiful fonts. Something which compliments your design, and is easy to read in the devices. And please, for the love of our eyes, don’t use Comic Sans!! They’re not funny and nobody likes them. And you don’t need to use too much bold, italic, or underline when it’s not necessary. Yes, it’s good to highlight content when needed with these, but don’t use it randomly.

Take your time, seriously

Unless you’re writing a blog post for your school assignment, you are not running out of time. You don’t have to complete your blog post within a couple of hours, and start working on your next post. Take your time. Don’t rush.

Take a day or two to complete your blog post. Do some research, get your facts right, read about it, and discuss to get as much information about your topic as you could. You will explore different ideas, thoughts and a lot of internet spam (skip that please).

Apart from spending some time in research work, you also need to give your mind some break. A tired mind won’t produce great ideas. Minimize your browser, open iTunes and listen to some music for sometime, and then get back to your work.

Grammar matters!

Most of us, especially teenagers, have been the “cool internet kid” who wrtz lyk dis, but the mah lyf mah rlz philosophy doesn’t work when it comes to grammar. Do you realize a lot of people can’t read your cool internet kid lingo? It’s fine to use it in your own circle but if you want to write something for a bigger demography then grammar matters.

We all are not great at grammar but we all should try our best. I’m certainly not. So what’s the solution? Don’t publish your posts without doing a spell check. And also read your post twice. And if you need more help then ask a friend to proofread.

It’s not like you won’t mistakes. We all make a lot of stupid and small mistakes all the time. But when you notice these mistakes then don’t hesitate to update the post with the correction. Language, if used properly, is beautiful, don’t hide from it.

After you’ve followed all the above points, just read your post once again to see if it looks alright, and hit the Publish button!

Not every rule is for everyone but this is the basic structure that you will find everywhere. Feel free to experiment and mix things a little to see what works for you. Let us know how you produce quality blog posts.

If you’re looking for a web hosting for your blog you can check a list of best WordPress hosting providers.

Radio Buttonset Control For WordPress Customizer

Here’s another control from O2 – WordPress Customizer library. It’s a radio buttonset control, built using WordPress’ admin UI.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/radio-buttonset/radio-buttonset-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include radio-buttonset-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_radio_buttons', array(
    'default' => 'left',
    'capability' => 'edit_theme_options'
));

$wp_customize->add_control(new O2_Customizer_Radio_Buttonset_Control($wp_customize, 'o2_radio_buttons', array(
    'label' => __('Image Alignment', 'textdomain'),
    'description' => __('Choose the alignment for your blog images.', 'textdomain'),
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_radio_buttons',
    'choices' => array(
        'left' => __('Left', 'textdomain'),
        'center' => __('Center', 'textdomain'),
        'right' => __('Right', 'textdomain'),
        'none' => __('None', 'textdomain'),
    )
)));

That will do the work. It can be used as a layout selector. It was built a couple of months ago but I never got time to share it. I’ll try to add more controls to the O2 library and share them here as soon as they are done, so let’s hope it works out.

Feel free to leave a comment if you have any questions or suggestions.

Syntax Highlighter Control For WordPress Customizer

This is the second control of O2 – WordPress Customizer library. In case you’re wondering about the first control, you can check this blog post. Spoiler alert: it was a Font Awesome icon picker, which also supports Genericons and Dashicons.

Second control is a syntax highlighter It allows you to add a syntax highlighter to your WordPress Customizer, which supports all famous languages, such as JavaScript, CSS & HTML. This control uses CodeMirror, so do check that out if you ever need a syntax highlighter.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/code/code-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include code-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_code', array(
    'capability' => 'edit_theme_options'
));

$wp_customize->add_control(new O2_Customizer_Code_Control($wp_customize, 'o2_code', array(
    'label' => __('CSS', 'textdomain'),
    'description' => __('Your custom CSS.', 'textdomain'),
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_code',
    'choices' => array(
        'language' => 'css',
        'theme' => 'icecoder',
    )
)));

That will do the work. You can put any language you want, if supported by CodeMirror, in the language option. And here are all the themes you can choose from.

Feel free to leave a comment if you have any questions or suggestions.

Font Awesome Icon Picker For WordPress Customizer

WordPress’ Customizer is one of my favorite parts of WordPress. You will usually see me products taking full advantage of Customizer. Right now I’m working on a library for Customizer, which will consist of some custom WordPress controls written by me.

The very first is a Font Awesome picker customizer control. Font Awesome fonts are used by a lot of themes and they are really amazing. Sadly, I couldn’t find any icon picker for Font Awesome.

You can find it in O2 library here. It’s a part of the library so you will have to download the entire library. Feel free to delete other controls if you’re not using them.

Place /o2/ folder in your theme, and include it by adding the following code:

define( 'O2_DIRECTORY', get_template_directory() . '/inc/o2/' );
define( 'O2_DIRECTORY_URI', get_template_directory_uri() . '/inc/o2/' );
require get_template_directory() . '/inc/o2/controls/icon-picker/icon-picker-control.php';

First you need to define directory and directory URI of the /o2/ folder after that you need to include icon-picker-control.php file.

And that’s all you need to do.

You can add it to your customizer like this:

$wp_customize->add_setting( 'o2_fa_icon_picker', array(
    'default' => 'fa-facebook',
    'capability' => 'edit_theme_options'
));

$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array(
    'label' => __('Icons', 'textdomain'),
    'description' => __('Choose an icon', 'textdomain'),
    'iconset' => 'fa',
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_fa_icon_picker'
)));

It will a list of all the icons. If only want to list few icons then you can do it like this:

$wp_customize->add_control(new O2_Customizer_Icon_Picker_Control($wp_customize, 'o2_fa_icon_picker', array(
    'label' => __('Icons', 'textdomain'),
    'description' => __('Choose an icon', 'textdomain'),
    'iconset' => 'fa',
    'section' => 'your_section',
    'priority' => 5,
    'settings' => 'o2_fa_icon_picker',
    'choices' => array(
        'fa-facebook' => __('Facebook', 'textdomain'),
        'fa-twitter' => __('Twitter', 'textdomain'),
        'fa-dribbble' => __('Dribbble', 'textdomain'),
        'fa-wordpress' => __('WordPress', 'textdomain'),
        'fa-github' => __('Github', 'textdomain'),
    )
)));

That will do. If you face any issues then comment below, or feel free to send a pull request.

It’s just the first control, so you can expect few more posts like this in near future.

Update: Icon picker now also supports Genericons and Dashicons, so you can now change the value of iconset to use these two as well.

Also, if you’re using it then please leave a comment telling me your thoughts and the new controls you’d like to see.

Love this control?

If you love this control of O2 library then consider donating from here to support this product.