Search

Posts Tagged ‘WordPress’

Installing WordPress Through Command Line

Share

I assume that many people would do the following to install WordPress in local server: Download the Package from WordPress.org, unpack it, put the files on the local server, open the localhost followed with the wordpress directory in the Browser, and then follow the instruction as shown.

This is the standard way to install WordPress. It works fine, except it requires several layer of steps. And most of the time, I have to manually re-download the package for new installation.

Another way to install WordPress is by using WP-CLI, which I found to be more streamlined. WP-CLI is a set of command lines for operating WordPress stuff. This includes install and update WordPress Core, as well as install and update plugins.

So, if you mainly work on WordPress environment and are comfortable on performing command lines in Terminal, you can follow this tip.

Getting Started

We first need to install WP-CLI, and the easiest way would be via Homebrew. Type the following commands:

 brew tap josegonzalez/homebrew-php brew install wp-cli 

Once installed, you can type wp command to verify the it is applicable. If you got a message like what is shown in the screenshot below, it means “it works”.

Creating Project

We start installing WordPress through command lines. First let’s create our project directory. In my case, all web projects reside under ~/Sites folder. So, I can type the command below to create a folder named /wordpress in it:

 mkdir ~/Sites/dev/wordpress 

Then, we navigate to this folder with the following command.

 cd ~/Sites/dev/wordpress 

Let’s download the WordPress package to this folder.

 wp core download 

Tip: If you want to download a particular version of WordPress, you can run the command followed with the version number. For example:

 wp core download --version=3.5 

If the download has completed, we can begin the installation.

Install WordPress

First, run the following command to create wp-config.php file.

 wp core config --dbname=wordpress --dbuser=root --dbpass=root 

The above command assumes that, you previously have created a database named wordpress. Change the database name with the one that you have created for the WordPress site.

Next, we use wp core install command to install WordPress. This commands the following parameters:

  • --url The website address url, e.g. http://localhost:8888/wordpress/.
  • --title The website title, e.g. My Blog.
  • --admin_user The admin username. It should be all in lowercase, e.g. admin.
  • --admin_password
  • --admin_email

Type the command below. Swap the parameters value as per your own setup.

 wp core install --url=http://localhost:8888/dev/wordpress/ --title=WordPress --admin_user=myusername --admin_password=mypassword --admin_email=tfirdaus@outlook.com 

The process should run quick. If it has completed, you will see the following message:

Let’s take a look at the database.

Yes, as you can see above, we have successfully installed WordPress through command lines.

Final thought

I hope you will find WP-CLI as a great alternative to operate WordPress. For more reference, you can head over to WP-CLI.org Commands Doc.


    







5 Reasons Why I Don’t Install WordPress Plugins

Share

… well not ALL WordPress plugins, just the bad ones. Like every other tool out there, there are some plugins that work for you, e.g. for creating contact forms or for helping you build an e-Commerce website on top of WordPress – and there are those which don’t.

Some plugins aren’t necessary, other times, you should totally avoid installing them. In this particular post, I’d like to share with you my personal reasons why I won’t install a particular plugin. As this is an opinion piece, I’m sure you have your reasons as well. Share them with me in the comments section.

1. It Does A Simple Job

Many functionalities in WordPress can be achieved without a plugin. They are so simple that a plugin could sometimes be overkill. For example; I will prefer of adding the following snippet, to hide an admin bar, in the theme’s functions.php file, rather than using a plugin.

 add_filter('show_admin_bar', '__return_false'); 

Tip: Before installing a plugin, try to find that piece of code that can do the exact same job.

2. It’s Old & Not Updated

WordPress has a policy for plugins stored in the official repository; for plugins that are not maintained for more than 24 months, WordPress will display the following warning.

The plugin may contain some deprecated functions, and may also not be compatible with the current WordPress version. I usually won’t install or keep this plugin unless there is no better replacement, and the plugin stil runs well, and I’m sure it would not harm the site it is on.

For instance, I’m still using Maintenance Mode plugin, even though it has not been updated since 2010 as it still does the job really well. We can customize the output by creating a custom template from within the theme.

3. It’s Not Native

I found many plugins that have their own styling for the Admin User Interface (Admin UI) i.e. it does not follow the native WordPress Admin UI styles. The problem comes when WordPress decides to overhaul the entire UI design like in WordPress version 3.8. The plugin’s Admin UI will look out of place. It could also look awful.

On the other hand, it will also add more workload for the developer to update their plugins once WordPress makes significant changes.

Take a look at this example. It is a plugin to make WordPress more secure. It has its own styling, which does not really blend well with the WordPress Admin U. It looks cluttered at best.

Let’s compare it with the following plugin, named Better WP Security, which offers similar functionalities. It uses native WordPress styles and looks tidier.

For me, I would always check out the Screenshot page of the plugin. If the screenshots look unappealing or they are not available, the developer probably isn’t paying enough attention to this plugin of his/hers. And I probably won’t install it.

The rule of thumb for creating Admin UI is to stick close to the WordPress native styles. Sadly, WordPress does not provide a thorough documentation as a guideline. The following, however, are a few references that may help you get started:

4. It’s Branded

I found many WordPress plugins that put their “brand name” everywhere on its Setting page. It is distracting, particularly when it comes to user experience. Here’s an example, a plugin that put its brand on the Menu Name as well as on the Settings Page, 6 different times.

I’m not against putting your “brand name” in a plugin. But it should be done in a more friendly way. It also should not sacrifice the aesthetics of the User Interface design of the plugin. VaultPress is a good example in this matter:

5. It’s Obtrusive

Combine #4 with ads and pro version offerings and the plugin becomes obtrusive. Creating a plugin takes a lot of time and financial support for continual developent, but displaying ads and offers around every corner is can make the developer look desperate. As always, there are better ways to do this, and they are less obtrusive.

Advanced Custom Fields is one good example for this. It is a free plugin that allows us to create WordPress custom meta box easily with GUI. It has some premium extensions that are offered in a neat way, under a sub-menu named "Add-on".

Conclusion

I have my favorite set of WordPress plugins that I cannot do without but if we end-users are more selective with the plugins that we adopt for use, picking only those that are done well, this may little by little help improve the overall quality of plugins. Here is to the development of more powerful WordPress plugins.


    







How to Build a Fully Customized WordPress Login Page

Share

Many of you, I believe, are familiar with the WordPress login page at wp-login.php. It looks nice, and works fine. But when it comes to creating a website for clients, you might want a more customized login page, so that it integrates nicely with the website design as a whole. In addition, having a customized login page could also give your clients a good impression of your skills.

If this is something that you want to achieve on your site, here’s how you can build a fully customized WordPress login page.

Custom Login Page

First, we need to create a custom page template for the login page. To do so, you can create a new page template and name it – for example – page-login.php. Then, create a new Page from the WordPress backend and set the permalink to login so that WordPress will automatically take the page-login.php template for the page.

The Login Form

Put the wp_login_form tag in the page-login.php page template to display the login form.

 <?php wp_login_form(); ?> 

The following is optional, but could be useful in certain cases. You can configure a few things for the login form, like specifying the redirecting of URL after the user has successfully logged in, changing the ID of the username, and the password input field.

 <?php $args = array( 'redirect' => home_url(), 'id_username' => 'user', 'id_password' => 'pass', ) ;?> <?php wp_login_form( $args ); ?> 

Furthermore, you can also add something aside. It could be your logo and a little description of your site, for example.

 <div class="login-branding"> <a href="#" class="login-logo">Hongkiat.com</a> <p class="login-desc"> Hongkiat.com is a design weblog dedicated to designers and bloggers. We constantly publish useful tricks, tools, tutorials and inspirational artworks. </p> </div> <div class="login-form"> <?php $args = array( 'redirect' => home_url(), 'id_username' => 'user', 'id_password' => 'pass', ) ;?> <?php wp_login_form( $args ); ?> </div> 

Now, let’s make the form nicer with CSS. You can make the CSS up on your own as per your site requirements. In this example, here is how my login form looks like. It has black background, with a blue button, which fits quite well with the Hongkiat.com site theme.

Validation

At this point, the login page is already functional. We can try logging in, and if suceeded we will be redirected to the URL that we have specified in the redirect parameter above. But, there is something that we need to address.

First, the wp-login.php page is still accessible. It would be better to redirect the wp-login.php to our new login page to deliver a unified experience to our clients.

To do so, you can add the following codes in the functions.php of your theme.

 function redirect_login_page() { $login_page = home_url( '/login/' ); $page_viewed = basename($_SERVER['REQUEST_URI']); if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') { wp_redirect($login_page); exit; } } add_action('init','redirect_login_page'); 

Remember to change the $login_page variable to your own login page (thanks to Montana Flynn for the tip).

Second, the login page can work as expected when we are successfully logged in. But if an error occurs like when submiting invalid user and password combinations, or submitting an empty field, we will also be thrown away to wp-login.php. To solve this issue, add the following functions in the functions.php.

 function login_failed() { $login_page = home_url( '/login/' ); wp_redirect( $login_page . '?login=failed' ); exit; } add_action( 'wp_login_failed', 'login_failed' ); function verify_username_password( $user, $username, $password ) { $login_page = home_url( '/login/' ); if( $username == "" || $password == "" ) { wp_redirect( $login_page . "?login=empty" ); exit; } } add_filter( 'authenticate', 'verify_username_password', 1, 3); 

These two functions perform two tasks. They will redirect the user upon failing, and append a login query string to the URL with the value of either failed or empty.

The last problem is we will also be redirected to wp-login.php when we have logged out from the site. So, we also need to specify the redirecting URL upon logging out, like so.

 function logout_page() { $login_page = home_url( '/login/' ); wp_redirect( $login_page . "?login=false" ); exit; } add_action('wp_logout','logout_page'); 

Error Message

We will display an error message, showing the user when the error occurred, and when they have logged out by using the query string that we have put in the URL. To get the value from the login query string above, we can use $_GET.

Put this code below in the login page template.

 $login = (isset($_GET['login']) ) ? $_GET['login'] : 0; 

The above code will check whether the login variable contains value, otherwise it will set to 0. Then we will display different notification messages based on the value of $error, like so.

 if ( $login === "failed" ) { echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>'; } elseif ( $login === "empty" ) { echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>'; } elseif ( $login === "false" ) { echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>'; } 

And below is what the error message looks like.

Conclusion

There are several things that we could do to improve our login page such as adding Lost Password link, Register Link, and a personalized error message. But, at this point it is now functioning well enough for our users to login and logout, and it could also be a good start to create a more advanced login page.

We hope that you find this tutorial useful.


    







How to Create WordPress Custom Fields The Easy Way

Share

WordPress provides the essential fields that allow us to publish posts and pages. A few of these fields include the Content Editor, Category Options, Tags, and Featured Image.

These fields, however, are not sufficient to accommodate certain cases. Let’s say you build a Book Listing site that will show the book author, the ISBN number, and the publisher. You will need some extra fields to input the extra information.

Luckily, WordPress is now quite extensive, it gives developers the ability to create custom fields to cater to any website needs. These custom fields could be a general text input, a textarea, a dropdown option, a color picker, calendar, and even an image uploader. In this tutorial, we show you how to create WordPress custom fields the easy way. Let’s get started.

Advanced Custom Fields

To give you a real example, let’s try building a book listing site. To create our custom fields easily, we will use a plugin called Advanced Custom Fields by Elliot Condon. With it, we won’t need to touch the code too much for creating the custom fields. However, some code-level editing in the theme files is required to display the data that we have entered into the fields.

Once we have installed it, it adds a new side-menu called Custom Fields. Go to this menu, click on the Add New button, and name the Fields Group. For example, "Custom Settings" (see shot).

Click on the + Add Field to create a new custom field, and we name the field label as Author. Below it, set the Field Name simply as book_author, which we will use to call out or display the data of Book Author. You may also set Field Instruction, and the Placeholder Text, but those are optional.

Then, we can create a set of other fields as in Page Length, the Publisher, and Book Language like so.

Next, we need to assign the field group to display it in a particular Post Type. You can assign it with Post, Page, Page Template, Attachment, or set rules that involve several Post Types altogether. In the following example, I would like to display the fields to Book Post Type, which you can easily create on your own with this handy tool, GenerateWP.

Then we head over to our Book Post Type editing screen, and fill it up.

Displaying the Data

Before proceeding, since we assigned the fields to Custom Post Type, we need to create a new file to display the content called single-book.php (have a look at this page for reference). We will also put our codes in this file.

Once all our custom fields have been populated, we will display them in the front-end by using the_field() function followed by the field name. For example, this code below displays the data from the Author Book field that we’ve created above.

 the_field('book_author') 

It’s really that easy. Furthermore, if you want to make sure that it should only be displayed when the data is present, you can wrap the code with a conditional statement. For example:

 if( !empty(the_field('book_author')) ) : the_field('book_author'); endif; 

And below you will find all the codes that we put in single-book.php to display our book.

 <div class="entry-content"> <?php if ( has_post_thumbnail() ) { echo '<figure class="book-thumbnail">'; the_post_thumbnail('book-thumbnail'); } echo '</figure>'; ?> <div class="book-info"> <h3 class="book-title"><?php the_title() ?></h3> <p class="book-description"><?php the_content() ?></p> <h4 class="book-details-title">Book Details</h4> <div class="book-details"> <ul> <li class="book-author"><span class="label">Author:</span> <?php the_field('book_author') ;?></li> <li class="book-pub"><span class="label">Publisher:</span> <?php the_field('book_publisher') ;?></li> <li class="book-pages"><span class="label">Length:</span> <?php the_field('book_pages') ;?></li> <li class="book-lang"><span class="label">Language:</span> <?php the_field('book_language') ;?></li> <li class="book-pubid"><span class="label">ISBN/ASIN:</span> <?php the_field('book_isbn_asin') ;?></li> </ul> </div> </div> </div> 

With a little bit of styling with CSS, we can achieve the following neat and subtle result.

Final Thought

In this tutorial, we’ve shown you the very basic example of using Advanced Custom Fields plugin to create your own a set of new Text fields and assign them to a Custom Post Type easily.

Apart from that, this plugin provides a number of custom fields to enhance our website including WYSIWYG Editor, TextArea, Dropdown, User List Options, Google Maps, and many more. You can explore the plugin further and see what cool things you can come up with.


    







Find and Install WordPress Plugins through Github

Share

WordPress plugins are “officially” distributed through the WordPress-owned plugin repository. You can search for any kind of plugin to add extra functionalities to your website or blog. But, there are also a number of great plugins that we can find outside that are not hosted in the official repo.

Some plugins can only be found in its developer website, while some can only be found in Github.

Github is like a gold mine for developers. There are a bunch cool projects including WordPress plugins that are hosted in it. But sadly Github does not return quite an accurate result when we search for WordPress plugins. Using keywords like “WordPress Plugins” does not help much either. But here is what you can do with a plugin.

Github Plugin Search

Github Plugin Search is a plugin created by Paul Clark. This plugin, as the name implies, allows you to search and install WordPress plugins from Github. To do the job, this plugin utilizes Github API Search, Plugin File Header and WordPress Installer API.

Once installed, you can search and add new Plugins from Plugins > Add New menu as usual. But as this plugin is still undergoing development, it replaces the Plugins search result entirely with a list of plugins found in Github.

In this example below, I searched for “bootstrap”. And it returns several results.

Word Of Caution

This plugin could be a good alternative source to find WordPress plugins. But there is one important thing to note when you are using it:

Github is not designed specifically to distribute WordPress plugins. Unlike WordPress.org repo, which moderates all the submitted plugins, Github allows anyone to upload and host their project in it without strict screening. This could be taken advantage of by people who upload plugins with malicious codes, which for intance could allow backdoor access to your blog without your permission.

So, while this Github is a great alternate source to find WordPress plugins, you have to be cautious with your choices. Make sure that you know what the plugin and the codes in it do before getting the plugin.

Final Thought

I’m looking forward to the enhancements of this plugin. In the future, the developer, plans to add the capability to let you opt between WordPress.org repo and Github.