WordPress for beginners is a step by step guide on how to set up your new WP website. Just a few years ago only the most advanced Internet users knew what actually a blog is. Nowadays every kid hanging around seems to have a page on livejournal and you meet hundreds of websites hosted on Blogspot or say WordPress every other day in the search engine results or in the spam emails in your inbox. I would like to give you some insight into what actually a blog is and give a quick guide on starting a WordPress website.

Let’s get into work. First of all and when starting on a website, you should understand that WordPress is not just some place where you can post some kind of an updates. This is an amazing content management system that can be used to create any type of website of any complexity. What you usually see online is the 10% usage of the WordPress functionality and capabilities while most possibly you’ll be using only 5% if you just plan to post news from time to time.

Advanced Content Management System

The WordPress CMS is theme based which means that you can change designs any time you want while the content and the settings will remain the same in most cases. Using WordPress you can 10x increase the speed of your website development!

There are lots of free professional themes available online as well as template solutions by numerous companies. Apart from design changes, you can choose what functionality to have on your WordPress website. Thanks to various widgets and plugins you can create a real monster with the features that would cost tens of hundreds of dollars if ordered on a custom basis for a custom website.

There are lots of reasons why WordPress websites are so popular, I will list just a few why I personally like it so much.

1) For years and till now WordPress remains the cheapest solution to have a website built. It’s widely used by developers and web companies to create satellite websites (like the network of TemplateMonster websites devoted to different template categories) as well as by spammers (though as a rule they use free hosting or host at wordpress org). The system is free and there are lots of professional themes available online.
2) Creating a WordPress website is the quickest way to build an online presence for your company.
3) You will be able to manage your website in a convenient way on your own without paying the developer an hourly fee to carry out the updates.
4) WordPress system is SEO friendly by default (though of course there are enhancements that can be made). Google loves WordPress blogs.
5) You can change designs any time you’re up to. No additional fees and no special set-up.
6) WordPress capabilities are endless. There are thousands of free plugins available and you don’t need any special skills to use most of them.


Table of Contents:

  1. WordPress For Beginners: Step by Step Guide To Your New WordPress Website
  2. 9 WordPress Security Tips To Protect Your Website From Harm
  3. How to Backup WordPress Sites to Dropbox
  4. Roundup of WordPress CMS Plugins
  5. Choosing a WordPress Theme: Free or Premium?
  6. 11 Powerful WordPress Scripts That Will Improve Your WordPress Website
  7. Energize Your Static Website with This WordPress Conversion Tutorial
  8. Know Your Top 5 PSD to WordPress Conversion Services
  9. Is My Website Ready for Some Serious Hacks?

WordPress For Beginners: Step by Step Guide To Your New WordPress Website

When starting my first WordPress website I was feeling quite lost and could hardly understand what is all about. I found heaps of information in different places and was trying to put things together for hours. Now having a new WordPress website set-up takes me no longer than 30 minutes. This guide is made for beginners and those thinking of setting up their first WordPress blog. Don’t panic, there’s nothing you can’t do!


1. Registering Hosting and domain name.

You can either have your WordPress website set up on your server and thus show up for your domain name or host for free at WordPress and choose a website like “bestdesigns.wordpress.com”.I recommend setting up a separate domain name and hosting and this looks less spamy and more professional.

Most of the companies offer hosting and domain registration in one place. It may happen that you have a domain name registered in one place and the hosting account in the other. In this case all you have to do is ask your hosting provider to send you the so called name servers (ns) that you should email to your domain register.This will ensure your domain name is associated with your hosting and will show up the website you have uploaded to the server.

Now about hosting requirements. All you’ll need is PHP version 4.3 or greater and MySQL version 4.1.2 or greater running on the server. If you have no clue what is php and database, just send a following email to your hosting provider and see what they say:
“I’m interested in running the open-source WordPress blogging software and I was wondering if my account supported the following:
* PHP 4.3 or greater
* MySQL 4.1.2 or greater
* The mod_rewrite Apache module
Thanks!”

2. Downloading the WordPress.

To have the website running on the WordPress CMS first of all you’ll have to download the WordPress software to your computer. It’s highly recommended to use the latest version of WordPress that can be found here https://wordpress.orgdownload/ Once saved to your hard drive, unzip the files.

3. Adding your information.

Open the folder with the WordPress files and look for wp-config-sample.php. Rename wp-config-sample.php to wp-config.php and open it in any text editor. This is the place where you have to fill in your database details. Login to your hosting panel and look for MySql section. Create a new database and save the info on file. If you’re not sure how to created the database you may contact your hosting provider for help.

Fill in database details in the wp-config.php file, save it and close it. Now we are ready to move forward.

4. Uploading files to your server.

If you have never uploaded files to a server earlier you may find it a bit tricky, but it’s easy once you understand how it works. Uploading files to the server is almost the same as copying files from one folder on your computer to the other. The only difference is that you are copying the files to the remote computer and thus need the login and password to get access to it.

Login to your hosting panel and look for something like FTP accounts. Create a new user and put down the information: FTP name, user and password. Go to http://www.coreftp.com/ and download the so called FTP client. Follow the installation instructions. Once complete, add a new account and connect to your server with your FTP info.

In most cases, WordPress files have to be uploaded to www or public_html folders depending on your server settings. If you are not sure where to upload, contact your hosting company for help.

Finally, upload the WordPress files to the server.

5. Installing the WordPress.

Once the upload is complete you have to install the WordPress. Open the browser and go to www.mywebsitename.com/wp-admin/install.php That’s it! WordPress should now be installed. After installation you will be given a login and randomly generated password to the admin area. Save them on file.

6. Choosing the design theme.

After the WordPress installation you should be able to see your website at www.mywebsitename.com. The WordPress is installed with the default theme you most likely would wish to change and here’s how to make it.

As I have mentioned in the very beginning of this post, there are hundreds if not thousands of professional free WordPress themes available online. There are also multiple companies where you can buy a WordPress theme but I wouldn’t recommend doing that. First of all why spend money if you can get cool stuff for free? Secondly, there are special support forums for almost all the free themes where you can have all your questions answered by the users as well as theme bugs fixed as apposed to the template option where you just get it as is and get almost zero support. As a rule, free themes have more advanced functionality as they are created by real developers and not by a group of people taught to code certain number of things.

So where you can get the free WordPress themes? While there are lots of websites online, I recommend https://wordpress.orgshowcase/. This is a 200% reliable resource with user recommendations and notes. There’s a list of categories available and you can also search by tags like white, clean, orange, minimal etc. Once you find the theme you like download it to your computer and unzip the files. Connect to the server as described above and upload the folder with the theme to ‘wp-content/themes’ directory.

7. Accessing your blog admin area.

To login to the website admin area go here www.mywebsitename.com/wp-admin/ and enter login and password you have received after installation. You’re in.

Once you login you will be prompted to the main page of the WordPress content management system. You might be overwhelmed by the number of buttons, links and other options but pretty soon you’ll get used to it. The main management menu is located on the left and there are lots of settings to play around with. You can hardly spoil anything, so let the researcher inside you do this exciting job for you.

8. Setting your theme and updating general settings.

To activate the theme you have uploaded in point 9 go to Appearance >>Themes in the left panel menu. You should see the list of themes available. Click on the theme you’d like to use and confirm your choice.

To set your website title and some of the main settings go to Settings>>General.

That’s it for today. By now you have your new WordPress website up and running online. You can play around with the admin area to see how to add new posts and create new text pages. In our next post we will tell you about some necessary and useful plugins as well as the settings that will make your blog both user and search-engine friendly.

Now we will look at some other stuff that can come in handy to all not just beginners with WordPress.


9 WordPress Security Tips To Protect Your Website From Harm

In this section I will talk about tips, tricks and plugins to keep your WordPress blog safe from hackers and robots. This doesn’t mean you have to do all of them, but using as many of them as possible is recommended.


1. Always Update

Keeping your WordPress updated all the time is important, because the developers work to solve security issues as well and if they release an update, it is a good idea to update. It takes only a few seconds, is safe (because WordPress backs up your data before actually updating, so you can’t lose anything) and will help your blog run better and be compatible with more plugins too. When you update, do it through your dashboard or if you want to do it manually, do not download the update from another site than WordPress.org.

2. Strengthen your password

Now this shouldn’t be something new to you. If you’ve been on the internet for some time you know strong passwords are recommended. Include small and capital letters, numbers and different symbols to make your password not difficult, but impossible to guess. Once somebody has full access to your blog, it’s not yours anymore!

3. Keep an eye on file permission

It is a good idea to keep an eye on the file permissions. You have a link at the end of the article with a guide about what file permissions are and how should they be used. You can set file permission with FTP clients and FileZilla works just fine, so I recommend it.

4. Use .htaccess

The .htaccess file is available by default in your hosting folder. You can use this file to block different IPs and you can learn how to do this by following the links at the bottom of the article.

5. Use SSL Encryption

SSL Encryption is used for encrypting data your blog sends. This means that nobody accessing your router can intercept the data you use, such as account credentials. This way your data is not only really difficult to intercept, but also to decrypt. The bad in general is that you have to pay for having an SSL encryption, but most of the services out there do a tremendous job and also help you set up the SSL server. However, for WordPress SSL encryption is free and you only have to add this particular line to your wp-config.php:

define (‘FORCE_SSL_ADMIN’, true);

6. Always Back-up

Backing up once a week is something I would like to recommend as well, because no matter how much you protect the blog, anything can happen. There are things you can’t even do anything about (like the host servers getting hijacked – which doesn’t really happen too often, but it is a possibility) and it is good to have a back-up which you can install again right away.

7. Protect the wp-config.php

This is one of the most important files in your WordPress folder, therefore you really have to protect it. You can hide it from public view by inserting few lines of code into your htaccess file:

<Files wp-config.php>

order allow, deny

deny from all

</Files>

This prevents the wp-config.php file from being seen by public users and makes it therefore more difficult to spot for hackers and robots.

8. Never use “admin” as login

A common mistake is to use “admin” as the login username. When you install WordPress, right after the process is done create a new account and use that one as default. The “admin” account is quite dangerous to use because all the robots go for it.

9. Use an SFTP

Most of the time people upload files by using FTP, but you could use a Secure FTP (SFTP) so that the files you send are encrypted. You can find a detailed guide about how to do this here.

Now we move onto plugins you can use to secure your WordPress.

1. Login Lockdown

You can use a plugin called Login Lockdown, but make sure you remember your password. Login Lockdown registers every failed login attempt and the IP of the person, and blocks the ability to login for a range of IPs if the number of failed logins exceeds the number you set. As a default setting, the plugin locks down IPs for an hour after 3 failed logins within 5 minutes. The IP addresses which have been blocked can be removed from the plugin panel in the WordPress dashboard.

Login Lockdown protects your WordPress login page from people trying to guess your password.

2. WP-DB-Backup

I told you earlier you should have backups for your database all the time. This is the plugin that I use for this purpose. It sends you backups on your e-mail or can also store them on the server. You can also set how often you wish the plugin to back up your data.

3. WP Security Scan

Removing the version of WordPress you have should be a basic option, but WordPress makes it difficult. Therefore you need to use a plugin to remove the version of WordPress from the header of your PHP page. Why? Because knowing which version you have means hackers know the security issues you have, therefore this makes it easier for them to hack you.

With all these plugins and tips being listed, I only wish to tell you that WordPress, although very popular and widely used, is threatened all the time by hackers and robots. WordPress security is something that has been discussed long and you should take a look into it, because finding out your blog is hacked and having no backup is definitely not fun. Try to avoid this by backing up regularly and following my tips and you will find yourself less often in troubles.

Further reading

You can read more about this topic on the following links:

Changing File Permissions on WordPress.org

Hardening WordPress on WordPress.org

Block IPs with .htaccess on htaccesstools

WordPress Security Tips and Hacks on Noupe

And of course don’t forget about our e-book with 21 quick tips for WordPress.

In the next section we will be talking about backing up your WordPress website. A very important thing. You wouldn’t want to lose your hard work.


How to Backup WordPress Sites to Dropbox

What would happen if all of the hard work you put into your website was all wiped away by a hacker or malicious virus of some kind? It would be difficult to find the motivation to start all over unless you have a backup of some kind. Using your already established Dropbox account, several options are available to Backup WordPress Sites to Dropbox.


Note: Depending on the size of your site and how much you use your Dropbox account, opening a dedicated Dropbox account for these backups might be a good idea.

1. WordPress Backup to Dropbox

WordPress Backup to Dropbox saves you the hassle of using your FTP client and making a total backup of your WordPress site. The first backup will take some time to complete because everything is being backed up: files, media, and database are all included. WordPress Backup to Dropbox creates a folder in Dropbox. This folder is the only folder this plugin can access.

After the initial full backup, each backup from then on will be an incremental backup. The incremental backups can be scheduled as frequently as daily. The scheduled backups can exclude different file types if desired.

2. BackWPup

BackWPup offers a few features beyond backing up WordPress files. Being a Dropbox user is not required to use BackWPup, other services such as Amazon S3, SugarSync and RackSpaceCloud are also supported.

Exporting the WordPress XML file, Checking, repairing and optimizing the Database are not common features among WordPress backup plugins. Choosing the backup file type (zip, tar, tar.gz, tar.bz2 format) is a nice touch too.

3. Cloudsafe365

Cloudsafe365 is more than just a WordPress backup solution. The backup portion allows for backing up to local servers and Dropbox. The backups will consist of your WordPress Database, Plugins, Current Theme and your Files and Images.

Additionally, Cloudsafe365 offers protection against hacking and Malware. The ability for automated mining and info scraping is removed and your content and images are protected (in plus version). People won’t even be able to right-click on your images to download them. They will need to share your whole post or page, not just the image. The plus version is $15 a month.

4. ManageWP

ManageWP

ManageWP is a full-fledged tool for managing one or multiple WordPress sites. The cost of the service (starting at $6.30 per month) is minimal for the amount of awesome you get. The Standard Package offers security, on click updates of WordPress, Themes and Plugins. Managing all of your sites from one dashboard makes backing them up super easy. Create a backup task, choose the sites to back up and the output destination such as Dropbox. Restoring from a backup is also just as easy.

Creating a WordPress Backup

To eliminate any doubt as to the difficulty of creating a backup, below is walk-through of the WordPress Backup to Dropbox plugin. Only a few steps are needed to create an initial backup and to schedule future backups. I’ll assume you already have a Dropbox account and the WordPress Backup to Dropbox plugin installed to your WordPress site.

In the left sidebar in your WordPress Dashboard, mouse over or click on the WPB2D tab to show the 3 options. Choose Backup settings

The first step is to link your Dropbox account to the plugin. Near the top left of the window, click the button to link the two.

You will be taken to the Dropbox site.

Enter in your Dropbox login credentials and authorize WordPress Backup to Dropbox. You should be taken back to your WordPress site when access is granted.

You will see when the next backup is scheduled (which there shouldn’t be anything scheduled), the backup history and settings. If you are using this plugin on several sites and backing up all of the sites to the same Dropbox account, you should check the box and use the subfolder option.

Next you can set the day and time to schedule the future backups. Remember, after the initial backup, only new and changed files are saved. This means choosing the daily backup isn’t all that bad of a choice.

The last part of the setup is choosing any folders to exclude from the backup. It may take a minute for all of the folders to display here so don’t get antsy right away of you don’t see what you’re looking for.

Once everything is set up and scheduled, it’s time to create the initial backup. Go to the left sidebar again and click on Backup Now. Click on the Start Backup button.

Give it a little time and check your Dropbox folder to make sure everything is there. Remember, the initial backup will likely be large and take some time to create.

While these are plugins are built with the purpose of backing up multiple aspects of your WordPress site, if the site has a really large database using the plugin will use considerable system resources. Keep an eye on your site to see if you notice any slowing down or even a crash. This will let you know you might want to look at a more robust server. Every bit of automation helps. The more you can automate the tasks you hate to do, the more money making work you will be able to do.

How have you been backing up your WordPress site?

Now let’s take a look at some great CMS plugins for WordPress, that can make your experience even better.


Roundup of WordPress CMS Plugins

These plugins help you with your content by either adding any fields or hiding it from certain users. You can set roles for each user visiting your site and set some exclusive rights for each one about how much they should be accessing your blog, some plugins help you with a smooth navigation which can be in the pages or in the sidebars which also supports the CSS drop down menus and manages you pages and posts.


WordPress Plugins To Help You Get Started

These are really just a starting point, for more plugins check the out by clicking on this link where you will find 100+ WP plugins.

1. Yet another related posts plugin

Yet another related posts plugin gives you pages related to the current entry and other relevant content on you site to the reader which features an advanced, versatile and customizable algorithm which considers the post titles, contents, tag and categories. You can know, how your related posts and pages are displayed and caches the relates posts data which improves its performance, displays the related posts in RSS and allows to disable certain tags and categories.

2. Wp pagenavi

WP PageNavi plugin adds an advanced and numbered paging navigation . You can use this plugin to replace the Previous pages and Next ones links from the home pages. The look and feel of this plugin is adapted from the original WordPress PageNavi plugin to match the LightWord WordPress theme. Has an option to display the texts for first, last, current, previous and next pages.

3. Multi level navigation plugin

Multi-level Navigation plugin adds a CSS based, SEO friendly accessible dropdown or slider menu to your blog. Produces W3C valid XHTML and CSS. This plugin allows you to control the animation speed of the dropdown menu, mouseover delay, what type of content should be displayed, keyboard accessibility, hover sensitivity and allows to hide the delay. This plugin also has a similar functionality to the PixoPoint menu plugin.

4. Breadcrumbs – Now Icluded in Yoast SEO Plugin

Yoast Breadcrumbs plugin allows you add to breadcrumbs in your theme for WordPress SEO here the posts, newletters, presentations everything comes under the SEO guide to WordPress. This is also decustomised for any website running WordPress and makes setting the options easy for administrator and making available a direct class for theme developers and adventurous users. Has a translation in more than eight languages.

5. Wp cms post control

Sometimes, you may feel that you don’t want to show certain items to others, in that case WP CMS Post Control plugin hides the unwanted items within the write / edit page for every user and alos gives you the complete control to create content. You can set an option of what kind of users need to see what type of content, and enable or disable the revisions, auto saves and Flash uploader.

6. User access manager

The plugin User Access Manager gives you complete control to manage your pages, files and posts where you can create a group separately for readers and editors, set the rights and allow only registered users to use the group which is accessible only for the members of that group. The main advantage in this plugin is that other people can write in your blog but not everywhere.You can hide pages, limit the access to uploaded files or give access even by IP address.

7. Role scoper

Role Scoper gives you complete access in reading and editing permissions for access control and editing where you can set the access and roles to specified pages or posts or categories ie control the categories where users can post, grant access for a limited time, limit the post / page publishing dates and inherit the restrictions and roles to certain categories and exclude the un-editable post and set default restrictions for any new post.

8. Custom post type UI

Custom Post Type UI plugin create for WordPress 3.0 manages to create and manage the custom post types, content sorting which makes the developers work easy especially if they are new to WordPress , panels and taxonomies without any PHP coding. You can also assign both the custom and built-in taxonomies to post types and label the post types.

9. Flexi pages widget

Flexi Pages Widget is sidebar widget which is configurable and is used to list the pages and sub pages, also can be used in place of ‘Pages’ widget. This plugin has many features like includes a link to the home page, has an option where only selected pages and sub pages can be displayed only in parent pages and related pages and lists. If you don’t want to use the widget, then you can use the function flexipages() which can be called anywhere from the template.

10. Google sitemap generator

Google XML sitemaps generates a special XML map to help search engines like Google, Yahoo, Bing to index your blog easily. Makes it easier to see the complete structure of your blog and also supports all kinds of WordPress generated pages and notifies the search engines whenever you create a post and calculates a priority for each post and is available in multi languages and doesn’t require any PHP knowledge. Also has a WordPress filter which allows other plugins to add their pages to the sitemap.

11. All in one SEO pack

SEO is the most important part for any blog and All in one SEO pavk plugin optimizes you blog for search engines taking care of the custom Post types, supports CMS style WordPress, finetunes the navigation links, generates the META tags automatically and over rides any title and allows you to set META description and keywords, optimizes the titles and avoids the duplicate content on the blog, is compatible with other plugins because of its built-in API.

12. Redirection

Redirection is a WordPress plugin which makes it easier to migrate from an old website or while changing the directory for WordPress installations because this plugin keeps track and maintains a log of 404 errors and maps these to 301 redirection which are based upon login status, redirect based on the referrer and random pages. Maintains a log for all redirected URL’s and has a pass-through redirection which allows you to pass an URL to another website or page.

13. SEO smart links

Initially to improve ranking in search engines, a manual work was done to interlink the old blog posts to the new one but SEO smart links plugin  gets your blogs interlinked and adds links to other sites which automates SEO benefits to you site. This plugin automatically links the keywords and phrases to corresponding pages and categories in your blog and also allows you to create or set up your own keywords and matching URL’s. These changes which are done by default can also be changed from the options in the administrative settings panel.

14. Search everything

Search Everything is a plugin which increases the search functionality by activating the Configure options Search (covers two steps) where the options (metadata) may be searching every page, tag, every category, highlighting, comments, excerpts, custom fields, custom taxonomies, exclude posts and exclude categories.

15. Subscribe2

Subscribe2 is a plugin to send email notifications to a list of subscribers when you publish any new content in your blog providing a comprehensive subscription management. The emails sent can be on periodical or pre-post basis where certain categories can be excluded for individuals through a custom field. This plugin also lets you handle requests for subscription or to register with your blog by submitting their email addresses in a simple user form where the format of the email can also be customized as an excerpt or full post.

16. Wp ecommerce

WP e-Commerce is a shopping cart plugin which features shopping cart application used for selling your products, services or fess online can be primarily used for crafters, artists, books, DVD’sm bands & record labels. This plugin is designed for great presentation and aesthetics.

17. Next gen gallery

A fully integrated image gallery plugin, NextGEN come with a slideshow option along with role settings where each gallery has an author, sortable albums, watermark functions, option to upload pictures via a zip file, sidebar widget, tag support for images, JavaScript effect like Lightbox, Shutter, Highslide and Thickbox. Also has a multiple CSS stylesheet which gives a shadow effect for the thumbnails and a TinyMCE button for easily adding the gallery tags.

18.Contact form

Another simple and flexible plugin, ContactForm7 manages multiple contact forms which can be customized with the mail contents with a simple markup. This plugin also supports AJAX submitting, spam filtering, CAPTCHA etc. Comes with more than 35 translators.

19.Multiple post thumbnails

Multiple Post Thumbnails plugin adds multiple post thumbnails to a post type i.e. you can have more than one Featured image on your post.

In the next section we will be talking about the never ending subject, free themes or paid. Ready? Alright.


Choosing a WordPress Theme: Free or Premium?

Perhaps one of the most striking features of WordPress is the easy availability of themes. Take a look at any of the other CMSs – be it Joomla!, Drupal or Textpattern – none of them comes even close when it comes to the availability of ready-made themes and templates. Not only does WP have numerous free themes to its merit, it is also well supplemented for by several Premium theme providers.


So, what exactly are Premium and Free themes anyway? In simple terms, Premium themes are those which come at a price that is paid to the theme provider whereas Free themes are just that – free! 

Premium Themes

Just like any other commercial commodity, Premium themes too often undergo the debate regarding pricing – there are some who claim that Premium themes are an unfair means to monetize an open source project, whereas there are still others who hold the view that Premium themes are solutions which cannot be provided in the absence of commercial funding and, owing to the competition, often Premium themes are under-priced.

X has gorgeous retina visuals and stunning animation effects.

X Premium WordPress theme

When it comes to positives, Premium themes have many advantages:

  1. First up, most Premium themes come with A+ grade support which is missing in Free themes. This is because the developers build Premium themes as a means of livelihood and thus tend to provide excellent grade support.
  2. Further more, Premium themes are reliable. They are updated on a regular basis, often come with extended or lifetime support and extensive documentation.
  3. Premium themes also have several unique features that are otherwise lacking in Free themes. Plus, due to stiff competition, theme providers are working hard to make their offerings the best of the lot and thus, Premium themes happen to be super-rich in features.
  4. Premium themes generally pay great attention to details. In fact, they often have better tweaks for settings such as SEO than their Free counterparts.
  5. Along similar lines, Premium themes come in several forms to suit your needs – there are special offerings depending on the genre of your website.
  6. Unlike Free themes, Premium themes are not so common and this can lend a unique appeal to your blog.
  7. You can speed up your website development process about 10x when using recent premium WordPress tools.

On the downside, Premium themes also have their share of disadvantages:

  1. Unlike Free themes, which are generally added to the official WP repository and undergo a review process, Premium themes can at times be mere commercial entities that may or may not be standards compliant in terms of licensing.
  2. Premium themes generally come for a fee and spending money on a blog that might just be a hobby may not suit everyone’s purpose.
  3. While this does not apply to everyone, at times, Premium themes, in their bid to be super-awesome, may come loaded with several features, whereas in reality, you may not need all of them. You will therefore, be using just a sub-set of the total number of features. In other words, for certain scenarios, using a Premium theme might be an overkill.
WP Theme Repo is an excellent place to look for free themes

WP Theme Repo is an excellent place to look for free themes

Free Themes

There are several Free themes for WordPress from different providers. Often, many developers develop Free themes to build their portfolio or just for fun. On the other hand, many Premium theme providers as well as WP-related blogs may release Free themes for their visitors.

Pictured: 'Sight' -- a Free Theme by WPShower

Pictured: ‘Sight’ — a Free Theme by WPShower

Link to ‘Sight’ by WPShower

There are several advantages of Free themes:

  1. Firstly, Free themes don’t burn a hole in your pockets – simply download and use! There are no prices to pay.
  2. While personalized support is generally absent with Free themes, many developers respond to queries and comments in forums. Plus, you can always get great support from WP Codex and official forums.
  3. Since Free themes are more common, the number of plugins and configuration settings that they support is also large. And just in case a particular plugin does not work with a given theme, you can always report the issue to the official repository. With Premium themes, however, due to smaller user base, the process takes some extra time.

On the downside, Free themes come with certain disadvantages too:

  1. Free themes generally do not come with any warranty or assurance of working.
  2. Unlike Premium themes, you cannot expect top-notch personalized support with Free themes.
  3. The update frequency, though good, is not as great as that of Premium themes.
  4. Most Free themes tend to be quite common and this can kill the ‘unique’ look of your blog.
  5. Lastly, there are several Free theme providers who offer themes with spam or phishing links. If you are downloading Free themes, the ideal method is to do so from reputable providers, instead of simply searching for themes on Google.

Tips for Choosing an Ideal Theme

Irrespective of it being Free or Premium, a theme should serve your purpose well. Only you can comment on what exactly your needs are, but it helps to bear a few basic points in mind when settling on a theme:

  1. Do not compromise on the features and functionality that you need. A good theme should provide ample features to suit both your present and future needs.
  2. Even though you may be well-versed in coding, look for a theme that is easy to use and modify. In other words, try to choose a theme that does not require rocket science for customization – the time and efforts invested in configuring a theme, if saved, can be invested elsewhere too.
  3. If you have a specific genre of website, such as a photo/video gallery, opt for a theme meant for that specific purpose.
  4. Ensure that the developers are active and the theme is regularly updated.
  5. Plus, check for the available support options. If it’s a Premium theme, ask for nothing less that personalized email support/ticketing system. And if it’s a Free theme, look for the level of activity in the forums (if any) and/or the frequency with which the developer responds to the comments on his website.
  6. Next up, bear in mind that the theme you are opting for should not be too old – this is especially true if you are choosing a Free theme. Web technology tends to get updated at a rapid pace, and it makes sense to opt for a theme that is updated.

Just in case even Premium themes fail to impress you, and you have the budget, consider opting for a Custom Design.

1WD Recommends

Recently we have been deeply exploring premium WordPress theme market and did two detailed reviews about the best options in the market right now in 2015.

Let me plug in a really great premium WordPress theme you can use as a framework and that comes with 33 unique designs. If you are any serious about developing quality websites on WordPress, that look incredible are super powerful, you should read this article and check out X theme.

We wrote a detailed review about X WordPress theme and really went in deep analyzing its pros and cons. Really recommended to check it out, I started this very website with a free WordPress theme, but now I never would again. Why? Because I just save so much time by getting affordable cheap WordPress theme with support, professional design and powerful functionality, that I wouldn’t go for free WordPress themes ever. If it takes 40 hours to modify, customize, fix bugs, how much is my rate hourly? If you can save 30 hours by getting premium theme for $63, why wouldn’t you?

xtheme themes

If you are wondering another review and analysis we did was with StudioPress Genesis theme and framework. It is the most popular option right now in WordPress market for web professionals. Read the review here.

Which theme do you use for your blog? Is it free or Premium? Feel free to let us know in the comments!

Next up are some WordPress scripts that can help improve your website.


11 Powerful WordPress Scripts That Will Improve Your WordPress Website

In this section you will get 11 WordPress scripts that will help improve your blog’s performance and that may or may not stop North Korea from terrorizing us. Either way, you will find these little WordPress hacks very useful for your daily blogging needs, which can help you save lots of precious time! If you’re eager to enhance or improve the functionality of your WordPress site, then below are powerful WordPress scripts that will definitely give you a great head start.


11 WordPress Scripts to Improve Your Blog…Right Now

On a serious note, these WordPress scripts will help you work smoothly on the back-end and will make your front-end more comfortable for your readers.

1. Add Post Meta Descriptions

WordPress does not support the use of meta description tags by default. Though metas have lost their significance in SEO, they can still influence the ranking of your blog in the search engines. To make your site search engine friendly, you should open the header.php file of your theme and copy and paste the code below to the space between the opening <head> and closing </head> tags.

[php]
&lt;meta name="description" content="
&lt;?php if ( (is_home()) || (is_front_page()) ) {
echo (‘Your main description goes here’);
} elseif(is_category()) {
echo category_description();
} elseif(is_tag()) {
echo ‘-tag archive page for this blog’ . single_tag_title();
} elseif(is_month()) {
echo ‘archive page for this blog’ . the_time(‘F, Y’);
} else {
echo get_post_meta($post-&gt;ID, "Metadescription", true);
}?&gt;"&gt;
[/php]

As simple as it seems, this hack can help you enhance the SEO performance of your site today.

2. Split WordPress Content into Multiple Columns

Sometimes, you may want to create additional columns in your pages, but as we know, WP does not support this from the back-end. The best way of doing this is to use snippets to split page content. Locate your theme folder and add the following block of code within the opening and closing php tags.

// split content at the more tag and return an array
 function split_content() {
 global $more;
 $more = true;
 $content = preg_split('/&lt;span id="more-\d+"&gt;&lt;\/span&gt;/i', get_the_content('more'));
 for($c = 0, $csize = count($content); $c &lt; $csize; $c++) {
 $content[$c] = apply_filters('the_conte
 t', $content[$c]);
 }
 return $content;
 }

Once you do this and save the edited file, you will need to locate the specific theme files and comment out both the_content() and call split_content() function.

3. Redirect 404 Pages to Home Page

Although 404 Error Pages are an integral aspect of WordPress, they lower your page rankings significantly, thus making your blog or site ineffective. To help you out of your predicament, I suggest you copy the following snippet code to the .htacess file to redirect the 404 error pages to your home page.

&lt; IfModule mod_alias.c &gt;
RedirectMatch 301 ^/search/$ http://your-site.com/
RedirectMatch 301 ^/tag/$ http://your-site.com/
RedirectMatch 301 ^/category/$ http://your-site.com/
&lt; /IfModule &gt;

This hack will redirect search engine spiders way from the 404 error page to the home page and in the process, improve your rankings and site’s reputation online.

4. Define Posts Displayed in Home Page

Majority of bloggers display posts in more or less them same way on the home pages of their blogs. This is understandable since WordPress does not feature a default option to define how posts should be displayed. Fortunately, you can surmount this problem by using custom fields. To define posts in your home page, you can use either the full post or post excerpt only. You will need to access your index.php file and replace the default loop with the following custom code:

[php]
&lt;?php if (have_posts()) :
while (have_posts()) : the_post();
$customField = get_post_custom_values("full");
if (isset($customField[0])) {
//Custom field is set, display a full post
the_title();
the_content();
} else {
// No custom field set, let’s display an excerpt
the_title();
the_excerpt();
endwhile;
endif;
?&gt;
[/php]

5. Insert Google Maps into Pages

Have you been using iframes to embed Google maps in your contact page or sidebars? If so, chances are high that it will be rendered poorly because of the interference of the visual editor. To save yourself the trouble of using iframes, I recommend that you copy and paste the following short codes into the function.php page.

[php]
//Google Maps Shortcode
function fn_googleMaps($atts, $content = null) {
extract (shortcode_atts (array (
"width" =&gt; ‘640’,
"height" =&gt; ‘480’,
"src" =&gt; ”
), $atts));
return ‘&lt;iframe width="’.$width.’" height="’.$height.’" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="’.$src.’"&gt;&lt;/iframe&gt;’;
}
[/php]

Once you copy and paste the above code to your function.php, you will need to copy the short code below into the exact place where you want Google Maps to be displayed.

[googlemap width="200" height="200" src="[url]"]

6. Display Page Categories in a Drop Down Menu

Sometimes, you may want to add a cool drop down menu that will show all existing categories in your WordPress site. Here is a simple way of doing it. Copy and paste the code below into the index.php or sidebar.php file.

[php]
&lt;form action="&lt;?php bloginfo(‘url’); ?&gt;/" method="get"&gt;
&lt;?php
$select = wp_dropdown_categories(‘show_option_none=Select category&amp;show_count=1&amp;orderby=name&amp;echo=0’);
$select = preg_replace("#&lt;select([^&gt;]*)&gt;#", "&lt;select$1 onchange=’return this.form.submit()’&gt;", $select);
echo $select;
?&gt;
&lt;noscript&gt;&lt;input type="submit" value="View" /&gt;&lt;/noscript&gt;
&lt;/form&gt;
[/php]

7. Display Similar Posts without Plugins

It’s also possible to display similar posts in your blog so as to draw the attention of visitors and engage them. I know you will be tempted to use a plugin to display similar posts, but there is no need to overload your WordPress blog with plug ins when you can use tags and custom codes. Here is a powerful code to do display related posts quickly. Copy and paste it to the functions.php file.

[php]
&lt;?php
//for use in the loop, list 5 post titles related to first tag on
//current post
$tags = wp_get_post_tags($post-&gt;ID);
if ($tags) {
echo ‘Related Posts’;
$first_tag = $tags[0]-&gt;term_id;
$args=array(
‘tag__in’ =&gt; array($first_tag),
‘post__not_in’ =&gt; array($post-&gt;ID),
‘showposts’=&gt;5,
‘caller_get_posts’=&gt;1
);
$my_query = new WP_Query($args);
if( $my_query-&gt;have_posts() ) {
while ($my_query-&gt;have_posts()) : $my_query-&gt;the_post(); ?&gt;
&lt;p&gt;&lt;a href="&lt;?php the_permalink() ?&gt;" rel="bookmark" title="
Permanent Link to &lt;?php the_title_attribute(); ?&gt;"&gt;
&lt;?php the_title(); ?&gt;&lt;/a&gt;&lt;/p&gt;
&lt;?php
endwhile;
}
}
?&gt;
[/php]

8. Change WP Login Logo

If you are tired of seeing the same old default “log in” logo, then you can change that to display a logo of your choice. To change the logo, you need to create and copy the new custom logo.png image into the image file in your root folder then copy and paste the following code into your functions.php file.

[php]
// login page logo
function custom_login_logo() {
echo ‘&lt;style type="text/css"&gt;h1 a { background: url(‘.get_bloginfo(‘template_directory’).’/companylogo.png) 50% 50% no-repeat !important; }&lt;/style&gt;’;
}
add_action(‘login_head’, ‘custom_login_logo’);
[/php]

9. Display Number of Facebook Fans

If you have a Facebook fan page then chances are high that you are thinking of displaying the total number of Facebook likes to visitors who access your WordPress site.

[php]
&lt;?php
$page_id = "YOUR PAGE-ID";
$xml = @simplexml_load_file("http://api.facebook.com/restserver.php?method=facebook.fql.query&amp;query=SELECT%20fan_count%20FROM%20page%20WHERE%20page_id=".$page_id."") or die ("a lot");
$fans = $xml-&gt;page-&gt;fan_count;
echo $fans;
?&gt;
[/php]

In order for this code to work, you only need to replace your current page ID with your personal Facebook page id.

10. Create Custom Widgets

As much as WordPress themes come with various widgets, some users may want to add custom widgets that meets the needs of their blogs. If you are one of them, then here is a handy snippet for this purpose. Copy and paste the following code into your functions.php file.

[php]
class My_Widget extends WP_Widget {
function My_Widget() {
parent::WP_Widget(false, ‘Our Test Widget’);
}
function form($instance) {
// outputs the options form on admin
}
function update($new_instance, $old_instance) {
// processes widget options to be saved
return $new_instance;
}
function widget($args, $instance) {
// outputs the content of the widget
}
}
register_widget(‘My_Widget’);
[/php]

11. Display Google Users’ Search Terms

Have you been trying to monitor and understand the search patterns of prospects and visitors who access your website from Google Search?If so, then you need a script that will display all terms that were searched by clients who came across your site. Paste the following code outside the header section.

[php]
&lt;?php
$refer = $_SERVER["HTTP_REFERER"];
if (strpos($refer, "google")) {
$refer_string = parse_url($refer, PHP_URL_QUERY);
parse_str($refer_string, $vars);
$search_terms = $vars[‘q’];
echo ‘Welcome Google visitor! You searched for the following terms to get here: ‘;

echo $search_terms;
};
?&gt;
[/php]

Conclusion

Though these codes appear simple, they are powerful code snippets that you can use to customize WordPress websites. You can use these codes to change the layout and functionality of your theme instantaneously and save yourself the trouble of line-by-line coding.

Do you know any WordPress scripts I have missed?

We know a lot by now, but we want to go on. Ready? Okay, then let’s look at how to convert your website into WordPress site.


Energize Your Static Website with This WordPress Conversion Tutorial

As online business are grows, more and more clients are willing to pay large amounts of dollars for their sites to those with the right skill sets. You’ve probably have learned how to create an HTML and CSS website but, chances are, these sites won’t make any more sense for a big business or even blog site nowadays. This is the very reason why it’s important that there should be WordPress conversion of your site from HTML and CSS.


Why do people have static websites in the first place?

  • You want to make it easier to customize your site even if you are not a developer.
  • A static website is supported on almost every browsers.

But when it comes to functionality, a dynamic site like a WordPress site is the best way to go.

Why?

  • Static websites cannot produce dynamic output alone since it is built on a static language.
  • Faster turnaround. You need not spend a lot of time on getting the colors and layout right. You can go straight to admin panel to customize it.
  • Templates look much better than sites developed in traditional static HTML sites.
  • You don’t need to code if you want to add a page or a post. Simply go to the admin panel.
  • Security features offered by HTML are much more limited than a dynamic site like WordPress.

In the previous tutorial, you learned how you can create a WordPress child theme. This WordPress two-part tutorial series will introduce the basics of converting the markup into a fully functional WordPress theme using the built-in NeoBlog HTML and CSS theme.

This tutorial aims to provide more flexibility to the site owners, thus, giving you more power to do more on your site.

Resources You Need to Complete This Tutorial

What We Are Going to Build

Final_theme

What Codes Should Readers Take Note Of?

A WordPress theme is a way of ‘skinning’ the external design of your website. The theme can make a big difference to the overall look of your site. It offers a graphical interface via the WordPress template files.

In creating a WordPress theme, it is worth to note the following:

  • Be careful of the name of the templates file you created. By default, WordPress recognizes the default template name such as single.php and page.php file. I recommend checking the name of the default WordPress template before naming or creating a new custom file.
  • Check out WordPress Codex for some functions, tags or some other PHP codes before using it on your template files. This will keep you on the right track on what you want to do in your codes.
  • Sometimes you need some external jQuery files to improve the look of your WordPress theme or add some functionality. WordPress will not provide everything in a box.
  • Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
  • Use clean, valid CSS. See CSS Coding Standards.
  • Follow design guidelines in site design and layout.
  • Backup your files. You never have anything to lose by creating a backup. As a precautionary measure, you should backup all of your theme files, plugins you are using as well as some other files related to your theme development.

Why You Need to Take Note of PHP?

PHP is a programming and scripting language that creates dynamic interactive websites. It is a widely-used and open-sourced general purpose scripting language that is especially suited for web development. In addition to that, this programming language can be embedded into HTML.

WordPress is written using PHP as its scripting language. This has an open source license, certified by the Open Source Initiative. Just like WordPress, PHP is also open-sourced.

Some parts of the WordPress code structure for PHP markup are inconsistent in their style so it is important you have a basic knowledge about PHP.

However, you don’t need to be a PHP web developer to create a WordPress theme. You just need to have a solid foundation about HTML, CSS, JavaScript as well as a basic background on PHP.

Just in case you need to know more:

How Does This Work?

First, you will identify first the files you need to create to build a complete WordPress theme. The next step you will do is to start putting codes on each template files.

Along the way there will be functions that might not be clear to you. In this case, the WordPress Codex will be your best friend.

After you created each template, you will add contents to your theme to test if the whole codes you are using are working on your site.

Getting Started

To start converting your NeoBlog WordPress theme, create the theme folder in the wp-content/themes directory in the WordPress installation folder.

Please take note that the name of the folder should correspond to the name of the theme you want to create. For this tutorial, it is named NeoBlog.

file-folder

The Template Files

Compared with static HTML and CSS sites, a WordPress theme consists with a bunch of template files.

These are files that contain the codes to make a working WordPress theme. To do this, create the following files into the NeoBlog theme directory:

  • css folder – This folder contains all the stylesheets. Copy this folder from the NeoBlog HTML and CSS theme.
  • fonts folder – This folder contains all the external fonts used in the markup. Copy this folder from our NeoBlog HTML and CSS theme.
  • images folder – This folder contains all the images such as the logo and so on. This folder will be copied from NeoBlog HTML and CSS theme.
  • js folder – This folder contains all of the javascripts. Also, copy this from the NeoBlog HTML and CSS theme.
  • header.php – This file will contain the code for the header section of the theme.
  • footer.php – This file will contain the code for the footer section of the theme.
  • index.php – This is the main file for the theme. It will contain the code for the Main Area and specify where the other files will be included.
  • functions.php – This file behaves like a WordPress Plugin, adding features and functionality to a WordPress site.
  • single.php – This file will contain the basic layout of a blog page.
  • page.php – This file will contain the basic layout of a page.
  • page-about.php – This is a WordPress’s built-in Post Types template. If a specific page, or a group of pages should behave or display differently, this is easily accomplished with this page template. For this template, it will display an About page layout
  • page-contact.php – Another type of WordPress’s built-in Post Types template. This template will display a contact form on the pages it was set.
  • content-search.php – This file will run the loop for the search to output the results.
  • search.php – This file is responsible for displaying search results pages.
  • searchform.php – This file contains the layout of the search form.
  • comments.php – This file will contain the code for displaying comments.
  • sidebar.php – This file will contain the sidebar widget area.
  • 404.php – This file will return a “Not Found” notification if a particular search query is not found or doesn’t exist in the database.
  • style.css – This file will include all of the styles and information of the NeoBlog theme.
  • screenshot – a png image file, that should accurately show the theme design or the title of theme. For more information see check this page.

Over the course of this tutorial, codes are going to be added to these files that will include menus, hooks, loops and widgets.

For this part of this tutorial series, you are going to work on the following:

  • Copying Files to NeoBlog WP directory
  • style.css
  • screenshot.png
  • Activating the theme

STEP 1 – Copying Necessary Files to the NeoBlog WP Theme

To get started, copy the css, fonts, images and js folders from the NeoBlog HTML and CSS theme to the NeoBlog WP theme folder.

file-folder

STEP 2 – Naming Your WordPress Theme with style.css

Before stating with the template files, first add the links of the stylesheets of the NeoBlog HTML and CSS theme to the NeoBlog WP theme. Go ahead and create the style.css file on NeoBlog WP theme and then copy the code below.


/*
Theme Name: NeoBlog
Theme URI: http://1stwebdesigner.com/
Author: Sam Norton
Author URI: http://1stwebdesigner.com/
Description:  A Simple Blog Theme for 1stwebdesigner.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

@import url(&amp;quot;css/reset.css&amp;quot;);
@import url(&amp;quot;css/bootstrap.css&amp;quot;);
@import url(&amp;quot;css/style.css&amp;quot;);

There is nothing special here but the information about the theme such as the name, author, author’s website and so on are enclosed within comment tags. This will make the theme easily identifiable upon installation.

It also has a series of @import tags. This will link the stylesheets from the CSS folder to the main stylesheet of the NeoBlog WP theme, which is this file.

STEP 3 – Adding a Screenshot Image File

Now that the theme has been successfully named thru style.css file, add a screenshot of the theme. Create an 880 x 660 px file in Photoshop and put a title text, the short description and the author of the theme on it.

The screenshot will only be shown as 387x 290 px on the WordPress admin panel, but the over double-sized image allows for high-resolution viewing on HiDPI displays.

screenshot

Afterwards, save it as a screenshot.png file on the root directory of the NeoBlog WP theme.

STEP 4 – Activating the Theme

After adding the screenshot of the theme, activate the NeoBlog WP theme.

But before doing that, to check on if the theme is working or not, create first a blank index.php on the root directory of the NeoBlog WP theme (don’t worry codes will be added on this later on).

Next, activate the theme, go to the WordPress admin panel and mouse over your mouse to Appearance -> Themes. Click on the Activate button.

themes

activate

If you are going to check the NeoBlog WP theme on the front end, you will notice a blank page because you have not put anything on our index.php file yet.

Major Issues You Might Encounter While Trying This Tutorial

While trying out this tutorial, you might have issues with combining PHP codes with the HTML codes.

What you should do

Double check it. It is better that, by this time, double check your codes. Sometimes you might forget putting an end if or end while statement inside a WordPress loop.

The code below will have an error since it does not have an end if statement:

For example:

&amp;lt;?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} // end if supposed to be here
?&amp;gt;

The code you see below will solve the issue.

&amp;lt;?php
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post();
		//
		// Post Content here
		//
	} end while;
} end if;
?&amp;gt;

It would also help if you can check the the ending and closing tags of your PHP codes; otherwise, the codes might not work when mixed with HTML codes.

If you want to learn more how to add more functionalities on this blog, you might want to check and study the WordPress Codex.

What Limitations Does This Tutorial Have?

Although this tutorial will give you a head start on how you can create a theme, there will be limitations on this one.

It can only provide the basic features of a blog theme such as the sidebar, footer, search box, post list, featured images and so on.

Some More Recommendations

If you want more features you can try to study the WordPress codex as well as online courses on tutplus.com or Lynda.com in creating an advanced theme.

But Wait!

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 1 of this tutorial series, you need to watch the whole playlist.

Full HTML to WordPress course playlist

Do you want to know what the contents this playlist? Don’t worry, a list has been provided so you know what to expect:

  • Introduction: What Do You Need to Build a WordPress Theme
  • Copying Necessary Files to the Theme’s Folder
  • Naming Your WordPress Theme with style.css
  • Adding a Screenshot Image File
  • Activating the Theme

Round Up

Great! We are done with the first part of this two-part series tutorial. In this article, you learned how to set up template files, things to avoid and some notes to look out for as well as the steps in creating a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

Our HTML file is now prepared and ready to be converted into a set of theme files. In the next tutorial, Let’s work on some template files and add functions to support some functionality of your WordPress theme.

Customizing Your WordPress site

You can design your ideal site by creating a mockup in Photoshop and then convert the PSD file to HTML and CSS. Afterwards, you can then convert it to a fully functional WordPress theme.

Designing websites using Photoshop PSD files and then converting it to WordPress themes is one of the easiest shortcuts in web design and development today. It is the most ideal way to provide your client a site with small amount of time and with ease.

What You Should Expect

To be specific, you will work on the following:

  • functions.php
  • header.php
  • footer.php
  • searchform.php
  • sidebar.php
  • index.php
  • single.php
  • page.php
  • page-about.php
  • page-contact.php
  • page-contact.php
  • search.php
  • content-search.php
  • comments.php
  • 404.php

Resources You Need

What’s the Fuss about This Tutorial

In the first part of this series, you were how to prepare your HTML and CSS files for WordPress and then brand and activate the theme.

In this last part of the series, you will learn what codes each remaining WordPress template must have to build a working WordPress theme.

At the end of this tutorial, you will have the same output just like the demo image file we posted in part 1 of the series.

STEP 1 – Defining constants and registering navigation menu support

The theme is already active! Now add support to the theme directory as well as the navigation menu thru the functions.php. Go ahead and create the functions.php file first on the root directory of the NeoBlog WP theme.

Next, define the constants for the theme directory. Go ahead and copy the code below to the functions.php recently created.

(Note: Since this is a php file all of the functions and codes relating to php must be enclosed with < ?php ?> tag.)

/***********************************************************************************************/
/* Define Constants */
/***********************************************************************************************/
define('THEMEDIR', get_stylesheet_directory_uri());
define('IMG', THEMEDIR.'/images');

You also need to register a function for the navigation menu. Below are the functions needed to make a working navigation. Go ahead and grab it.

add_action('init', 'register_my_menus');
 function register_my_menus() {
   register_nav_menus(array(
       'main-menu' => 'Main Menu'
      ));
}

An add_action hook has been added to register the navigation menu. The first argument is the tag (to which the action will be added later) and the second argument specifies the register_my_menus function to call.

To learn more about this, check this page.

STEP 2 – Creating header.php

Now, create the header.php file. Open index.html and copy everything from the opening DOCTYPE declaration to the ending tag and then paste it into the header.php file created on the NeoBlog WP theme folder.

<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title>NEOBLOG</title>
<meta name="description" content="A simple WordPress blog theme for 1stwebdesigner.com">
<meta name="author" content="Sam Norton">

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="css/reset.css" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

</head>
<body>

<!-- HEADER -->





<header class="main-header align-center ">
<a href="index.html" class="logo" ><img src="images/logo.png" class="img-responsive" alt="NEOBLOG blog theme" /></a>





<nav class="main-nav">





<ul class="inline">





<li><a href="index.html" class="active">Home</a></li>










<li><a href="about.html">About</a></li>










<li><a href="contact.html">Contact</a></li>





</ul>





</nav>





</header>






Some of static HTML tags can be replaced by the WordPress built-in functions such as the language, meta information, body class and so on.

Add the wp_head hook before the closing head tag. Use this hook by having the function echo the output to the browser, or by having it perform background tasks. For more information about this, see the WordPress Codex.

For the navigation menu, use the wp_nav_menu function to display a navigation menu created in the admin panel of WordPress.

The theme_location parameter will display the menu assignment to the location it was set. Otherwise, if it was not set, the parameter fallback_cb will determine what is displayed.

To learn more about the wp_nav_menu, check this page.

Copy the code below and replace the static html header information just copied.


<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8"> <![endif]-->
<!--[if !IE]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->

<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php wp_title('|', true, 'right');?><?php bloginfo('name');?></title>
<meta name="description" content="<?php bloginfo('description'); ?>">
<meta name="author" content="Sam Norton">

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<!-- Stylesheets -->
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/style.css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>

<!-- HEADER -->





<header class="main-header align-center ">
<a href="<?php echo home_url(); ?>" class="logo" ><img src="<?php print IMG;?>/logo.png"  class="img-responsive" alt="<?php bloginfo('name');?>" /></a>






<nav class="main-nav">
<?php wp_nav_menu(array( 'theme_location' => 'main-menu',
      'container' => '',
      'menu_class' => 'inline'
));
?>

</nav>





</header>






STEP 3 – Creating footer.php

For this part, create the blank footer.php and once again open index.html from the NeoBlog HTML and CSS theme folder. Copy everything from the sharing idea section to footer section. Then paste it to the footer.php file on the NeoBlog WP theme folder.

You must have the same HTML codes below.

<!-- SHARING IDEAS AREA -->





<section>





<div class="sharing-container section-content align-center">





<h3>WANT TO SHARE YOUR THOUGHTS?</h3>








Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.






<h4><a href="contact.html" >CLICK HERE TO LEARN MORE >>></a></h4>





</div>





</section>






<!-- FOOTER -->





<footer class="main-footer section-content align-center" id="contact-info">


&copy; 2014 - <a href="http://1stwebdesigner.com/" target="_blank">NEOBLOG theme</a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a>

</footer>





</body>
</html>

Same with header.php file. Again, replace some of these HTML tags to the WordPress built-in functions such as the link to the homepage, the current year and the blog name information.

Check out the codes below.

<!-- SHARING IDEAS AREA -->





<section>





<div class="sharing-container section-content align-center">





<h3>WANT TO SHARE YOUR THOUGHTS?</h3>








Life is short. Start sharing your knowledge to people. It may inspire them to enjoy life and learn how to face life difficulties.






<h4><a href="<?php home_url(); ?>" >CLICK HERE TO LEARN MORE >>></a></h4>





</div>





</section>






<!-- FOOTER -->





<footer class="main-footer section-content align-center" id="contact-info">


&copy; <?php echo date('Y'); ?> - <a href="<?php home_url(); ?>"><?php echo bloginfo('name'); ?></a> by <a target="_blank" href="https://twitter.com/NickDalusung">Sam Norton</a>

</footer>






<?php wp_footer(); ?>
</body>
</html>

STEP 4 – Working with searchform.php

Next on the list, add the markup (with built-in WordPress functions), which will display a search box on the sidebar. Go ahead and create searchform.php and copy and paste the code below on it.

(Note: Most of the classes you see here came from the search box markup of index.html file)






<div class="controller">





<form role="search" method="get" class="search-form" action="<?php echo home_url(); ?>">
<input type='textbox' name="s" class="form-control" id="search-box" value="<?php the_search_query(); ?>" placeholder="Search.."/>
<input class="btn btn-primary no-border" type="submit" class="search-submit" value="Search" />
</form>





</div>





Notice that the the_search_query function as the value of the text box was used. This will simply display the search query for the current request, if a search was made.

STEP 5 – Working sidebar.php

Before creating the sidebar.php, register the sidebar on functions.php file. Go ahead and open functions.php and add the codes below on it.

register_sidebar( array(
    'id' => 'main-sidebar',
    'name' => __( 'Main Sidebar', $text_domain ),
    'description' => __( 'This the main sidebar.', $text_domain ),
) );

The codes above will build the definition for a sidebar and returns the ID.

Next, let’s call the sidebar. Create the sidebar.php file on the root directory of the NeoBlog WP theme and paste the codes below.

<?php if ( is_active_sidebar( 'main-sidebar' ) ) : ?>
<?php dynamic_sidebar( 'main-sidebar' ); ?>
<?php endif; ?>

The codes above contain function that calls main-sidebar widget callbacks and prints the markup for the sidebar but, first, it will test if the sidebar is active before proceeding.

STEP 6 – Populating the Index File

After adding all of these template files, work on the Home Page – the index.php file. Go ahead and create first the index.php on the root directory of the NeoBlog WP theme.
Now, put some codes on thew index.php file to display the changes.


<?php get_header(); ?>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now, let’s now check out the front page of the NeoBlog WP theme and see results.

temp

Notice that the header and the footer are on their proper positions except for the sidebar.

To add the contents inside the home page, open the index.html file and copy the blog area section up to the closing div tag of box-layer align-center page-nav class and then paste it just under the get_header function. You’ll get similar codes below.


<!-- BLOG AREA -->






<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">





<div class="row">






<div class="col-md-8">






<ul class="negative-margin">





<li>





<h1><a href="single-blog.html" class="gray">Should I use a Pencil or a Ballpen?</a></h1>







By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Hacks</a>







<figure>
<img class="opacity-hover box-layer img-responsive" src="images/thumb1.jpg" alt="Pencil or Ballpen" />
</figure>







Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

	






<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>





</li>











<li>





<h1><a href="single-blog.html" class="gray">How to test your patience!</a></h1>







By <a href="#">Sam Norton</a> / On July 20, 2014 / <a href="#">Life Tips</a>







<figure>
<img class="box-layer img-responsive" src="images/thumb2.jpg" alt="Pencil or Ballpen" />
</figure>








Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum..

	






<div class="btn-margin">
<a href="single-blog.html" class="btn btn-primary">CONTINUE READING >>> </a>
</div>





</li>






</ul>











<div class="box-layer align-center page-nav">





<ul class="btn">





<li><a href="#">Next Page >>> </a></li>





</ul>





</div>





</div>






The codes above will only show a static display of the theme. To make this dynamic, structure the WordPress loop within the markup of the blog area. Copy the code below and replace the blog area just copied from index.html file.


<?php get_header(); ?>

<!-- BLOG AREA -->





<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">

<?php if (have_posts()) : ?>





<div class="row">





<div class="col-md-8">






<ul class="negative-margin">





<li>
<?php while(have_posts()) : the_post(); ?>





<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>







By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?>

<?php if (has_post_thumbnail()) : ?>





<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>








 <?php the_excerpt(); ?> 






<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>





</li>






<?php endif; ?>
 <?php endwhile; ?>

</ul>






<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>





<div class="box-layer align-center page-nav">





<ul class="btn">





<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>










<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>





</ul>





</div>





 <!-- end box -->

<?php endif; ?>

<?php endif; ?>
</div>











<aside>





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>






</div>





</div>





</div>





</section>






<?php get_footer(); ?>

The WordPress loop are PHP blocks of code used by WordPress to display posts. Using the loop, WordPress processes each post to be displayed on the current page, and formats it according to how it matches specified criteria within the loop tags. The WP loop usually comes with these blocks of PHP codes:


<?php if ( have_posts() ) { while ( have_posts() ) { the_post(); // // Post Content here // } // end while } // end if ?>

The codes above is the basic loop along with the markup; however, it has to display the blog information using the following WordPress functions:

  • the_permalink – Displays the URL for the permalink to the post currently being processed in the loop
  • the_title – Displays or returns the title of the current post
  • the_author_posts – Displays the total number of posts an author has published
  • the_author – Displays the name of the author of the post
  • get_the_date – Retrieves the date the current $post was written
  • the_category – Displays a link to the category or categories a post belongs
  • the_post_thumbnail – Displays the Featured Image for the current post, as set in that post edit screen (more on this below)
  • the_excerpt – Displays the excerpt of the current post after applying several filters to it, including auto-p formatting which turns double line-breaks into HTML paragraphs

With regards to the featured image, use the code the following codes.

<?php if (has_post_thumbnail()) : ?>





<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>





<?php endif; ?>

First, test it if there is a featured image set on the WordPress post panel. If the statement is true, it displays the URL of the post and the featured image itself.

Notice that an array is added with a class opacity-hover box-layer img-responsive. This is a way of adding a class in the Featured image to make a nice hover, border and box shadow on it.

But, doing this won’t display the featured image. You need to add functions first to register the featured image. Copy the codes below and paste it into the functions.php.

/***********************************************************************************************/
/* Add Theme Support for Post Thumbnails */
/***********************************************************************************************/
if (function_exists('add_theme_support')) {
  add_theme_support('post-thumbnails');
  set_post_thumbnail_size(742, 428);
}

Great! The featured image will now appear. Next, add function to remove brackets, ellipsis or the hellip word at the end of the excerpt (which is the default display of the excerpt).

Open the functions.php and add again the following codes.

/***********************************************************************************************/
/* Remove the brackets, ellipsis and hellip on excerpt */
/***********************************************************************************************/
function trim_excerpt($text) {
 	$text = str_replace('[&hellip;]', '...', $text);
     return $text;
	}
add_filter('get_the_excerpt', 'trim_excerpt');

Next, you will tinker the page navigation that was already added on the index.php file. The following code will call the wp_query, a class defined in the WordPress core that deals with the intricacies of a posts (or pages) request to a WordPress blog.

It will then set the previous_post_link and next_posts_link function to add a navigation to the blog post list.

Check out the code below:


<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>





<div class="box-layer align-center page-nav">





<ul class="btn">





<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>










<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>





</ul>





</div>





 <!-- end box -->
<?php endif; ?>
<?php endif; ?>

As a final touch, place the get_sidebar function inside the col-md-3 col-md-offset-1 margin-sidebar div along with an HTML5 aside tag to make it float on the right side of the page.

Check the code the below.






<aside>





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>





As a review, the index.php will contain all of the following PHP codes. Check out the code to avoid missing something.


<?php get_header(); ?>

<!-- BLOG AREA -->





<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">
<?php if (have_posts()) : ?>





<div class="row">






<div class="col-md-8">






<ul class="negative-margin">





<li>
<?php while(have_posts()) : the_post(); ?>





<h1><a href="<?php the_permalink(); ?>" class="gray">
<?php the_title(); ?> </a></h1>







By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> / In <?php the_category(', '); ?>

<?php if (has_post_thumbnail()) : ?>





<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>








 <?php the_excerpt(); ?> 






<div class="btn-margin"> <a href="<?php the_permalink(); ?>" class="btn btn-primary">CONTINUE READING >>> </a> </div>





</li>





<?php endif; ?>
<?php endwhile; ?>

</ul>






<?php global $wp_query; if ($wp_query->max_num_pages > 1) : ?>





<div class="box-layer align-center page-nav">





<ul class="btn">





<li><?php previous_posts_link('<<< Previous Page', $wp_query->max_num_pages); ?></li>










<li><?php next_posts_link('Next Page >>>', $wp_query->max_num_pages); ?></li>





</ul>





</div>





 <!-- end box -->

<?php endif; ?>

<?php endif; ?>
</div>











<aside>





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>






</div>





</div>





</div>





</section>






<?php get_footer(); ?>

STEP 7 – Working with single.php

Now, to display each individual posts in a blog page, create the single.php file and then copy and paste the code below.


<?php get_header(); ?>

<!-- BLOG AREA -->





<section>





<hr class="no-margin" />






<?php if (have_posts()) : while(have_posts()) : the_post(); ?>





<div class="blog-container section-content">





<div class="container">





<div class="row">





<div class="col-md-8">





<div class="box-layer custom-padding">





<section>






<h1><a href="<?php the_permalink(); ?>" class="gray"><?php the_title(); ?></a></h1>







By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  In <?php the_category(', '); ?> 


<?php if (has_post_thumbnail()) : ?>





<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a>
</figure>








 <?php the_content(); ?> 

<?php endif; ?>
</section>






<?php endwhile; ?>
<?php endif; ?>






<section>






<div class="comment-section">
<?php // If comments are open or we have at least one comment, load up the comment template if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?>

</div>





</section>





</div>






<!-- RELATED ARTICLE AREA -->






<section>





<div class="box-layer related-articles custom-padding">





<h2 class="align-center">Related Articles</h2>





<?php $current_categories = get_the_category(); $first_category = $current_categories[0]->term_id;

$args = array(
 'post_per_page' => 3,
 'category__in' => array($first_category),
 'post__not_in' => array($post->ID)
);

$related_articles = new WP_Query($args);
if ($related_articles->have_posts()) : ?>






<ul>

<?php while ($related_articles->have_posts()) : $related_articles->the_post(); ?>





<li class="col-md-4">
<?php if (has_post_thumbnail()) : ?>





<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>





</figure>








<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

<?php endif; ?>
</li>





<?php endwhile; ?>






<div class="clear"></div>





</ul>





<?php endif; ?>

<?php // Restore original Post Data wp_reset_postdata(); ?>

</div>





</section>





</div>






<!-- SIDEBAR AREA -->





<aside>






<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>






</section>






<?php get_footer(); ?>

There is for the comment section. Check out the codes below.






<section>






<div class="comment-section">
<?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?>
</div>





</section>






This code will check if comments are open or at least have one comment. It will load up the comment template (more on the comment template later).

STEP 8 – Working with page.php

After working on the blog page, work on the regular pages. Create the page.php file and then copy and paste the code below.


<?php get_header(); ?>

<!-- BLOG AREA -->






<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">





<div class="row">






<div class="col-md-8">





<div class="box-layer custom-padding">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>





<h2> <?php the_title(); ?> </h2>






<?php if (has_post_thumbnail()) : ?>





<figure> <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail('', array('class' => 'opacity-hover box-layer img-responsive')); ?></a> </figure>






<?php endif; ?>


<?php the_content(); ?> 

<?php endwhile; endif; //ends the loop ?>
</div>





</div>






<!-- SIDEBAR AREA -->





<aside>





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>






</section>





<?php get_footer(); ?>

Again, there is nothing new to this file except that it doesn’t have the comment section since this is a regular page.

In the next 2 files, create 2 WordPress built-in Post Types template. These are pages that display page layout differently.

STEP 9 – Working with page-about.php

For this part of the tutorial, first create a php file and call it page-about.php. Since this page is focused on the details about the website owner, it just contains plain HTML codes along with the header, sidebar and footer.

Add a comment at the beginning of the page-about.php file to make sure WordPress will treat the file as a page template.

Copy the codes below and paste it to the page-about.php file.


<?php /* Template Name: About Page */ ?>

<?php get_header(); ?>

<!-- BLOG AREA -->






<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">





<div class="row">





<div class="col-md-8">





<div class="box-layer custom-padding">

<img src="<?php print IMG; ?>/my_image.png" class="opacity-hover img-responsive center" alt="my image" />





<div class="align-center">






<h2>About Me</h2>







I am a web designer and a front web developer with over 2 years of experience in the industry. Have a passion for designing detailed, creative and modern websites & graphics. I spend most of my time practically every day, experimenting with HTML, CSS and WordPress.

<hr/>






<h3 class="blue">Feel free to contact me for some Web Projects</h3>







<i class="fa fa-envelope"></i>  Email: [your email] 



<i class="fa fa-twitter"></i>  Twitter: [your twitter username] 

</div>





</div>






<!-- END RELATED ARTICLE AREA -->
</div>






<!-- SIDEBAR AREA -->





<aside>





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>






</section>





<?php get_footer(); ?>

STEP 10 – Working with page-contact.php

Many WordPress plugins can add a contact form to the blog, but a plugin is sometimes unnecessary. For the page-contact.php file, add a little bit of PHP and JavaScript codes. First, go ahead and create the page-contact.php file.

Now, create a simple contact form. Simply paste the following code on the page-contact.php.

<?php /* Template Name: Page Contact */ ?>

<?php
if(isset($_POST['submitted'])) {
if(trim($_POST['contactName']) === '') {
$nameError = 'Please enter your name.';
$hasError = true;
} else {
$name = trim($_POST['contactName']);
}

if(trim($_POST['email']) === '')  {
$emailError = 'Please enter your email address.';
$hasError = true; } else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+.[a-z]{2,4}$/i", trim($_POST['email']))) {
$emailError = 'You entered an invalid email address.';
$hasError = true;
} else {
$email = trim($_POST['email']);
}

if(trim($_POST['subject']) === '') {
$subjectError = 'Please enter a subject.';
$hasError = true;
} else {
$subject = trim($_POST['subject']);
}

if(trim($_POST['comments']) === '') {
$commentError = 'Please enter a message.';
$hasError = true;
} else {                            	

if(function_exists('stripslashes')) {
$comments = stripslashes(trim($_POST['comments']));
} else {
$comments = trim($_POST['comments']);
}
}

if(!isset($hasError)) {
$emailTo = get_option('tz_email');
if (!isset($emailTo) || ($emailTo == '') ){
$emailTo = get_option('admin_email');
}

$subject = '[PHP Snippets] From '.$name;
$body = "Name: $name nnEmail: $email nnComments: $comments";
$headers = 'From: '.$name.' <'.$emailTo.'>' . "rn" . 'Reply-To: ' . $email;

wp_mail($emailTo, $subject, $body, $headers);
$emailSent = true;
}

} ?>

What has been done here is simply to make sure that the form has been submitted and filed correctly. If an error, such as an empty field or incorrect email address occurrs, a message is returned and the form isn’t submitted.

Next, create the form and display the error messages below each text box and text area field.


<?php get_header(); ?>





<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">





<div class="row">





<div class="col-md-8">





<div class="box-layer custom-padding">






<div id="container">





<div id="content">





<div class="align-center">





<h2>We want to hear from you!</h2>







If you are seeking to contact us, please fill up the form below. If you want to advertise or be partner with us just inform us on the message box below. 




Thank you so much for your support!

We really appreciate!







<div class="entry-content">
<?php if(isset($emailSent) && $emailSent == true) { ?>






<div class="thanks">

Thanks, your email was sent successfully.

</div>






<?php } else { ?>
<?php the_content(); ?>
<?php if(isset($hasError) || isset($captchaError)) { ?>


Sorry, an error occured.

<?php } ?>






<form action="<?php the_permalink(); ?>" id="contactForm" method="post" class="general-form">





<div class="contactform">



                                                                                                                            <input type="text" name="contactName" class="form-control" id="contactName" placeholder="Your Name.." value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" class="required requiredField" />
                                                                                                                            	<?php if($nameError != '') { ?>
                                                                                                                                            	<span class="error"><?=$nameError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	

                                                                                                                           	<input type="text" name="email" id="email" class="form-control" placeholder="Your Email.." value="<?php if(isset($_POST['email'])) echo $_POST['email'];?>" class="required requiredField email" />
                                                                                                                            	<?php if($emailError != '') { ?>
                                                                                                                                            	<span class="error"><?=$emailError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	



                                                                                                                            	<input type="text" name="subject" id="subject" class="form-control" placeholder="Your Subject.." value="<?php if(isset($_POST['subject'])) echo $_POST['subject'];?>" class="required requiredField subject" />
                                                                                                                            	<?php if($subjectError != '') { ?>
                                                                                                                                            	<span class="error"><?=$subjectError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	

                                                                                                                     	<textarea name="comments" id="commentsText" class="form-control" placeholder="Your Message" rows="4" cols="100" class="required requiredField"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                                                                                                                            	<?php if($commentError != '') { ?>
                                                                                                                                            	<span class="error"><?=$commentError;?></span>
                                                                                                                            	<?php } ?>
                                                                                                            	




<input type="submit" class="btn btn-primary no-border" value="Send Message"></input>

</div>





<input type="hidden" name="submitted" id="submitted" value="true" />
</form>





<?php } ?>
</div>





<!-- .entry-content -->
</div>





<!-- .post -->
</div>





</div>





</div>






<!-- RELATED ARTICLE AREA -->
</div>










<aside>
<!-- SIDEBAR AREA -->





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</aside>





</section>






<?php get_footer(); ?>

The form is now working but you can enhance it further by adding client side verification. To do this, use jQuery and the validate jQuery plugin.

First, download the validate plugin and then place it on the js directory on the NeoBlog WP theme. Add the following links to the header.php file before the closing head tag.


<?php if( is_page('contact') ){ ?>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.validate.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/verif.js"></script>
<?php }?>

Now, create the verif.js file and put the jQuery code to enable the validation. Here are the codes:


$(document).ready(function(){
$("#contactForm").validate();
});

Great! The contact form has just been created. The form will now validate every input and simply picks a form element with class required and verifies if the form is properly filled.

Note: Use a plugin if doing the coded above is too difficult.

Try Contact Form 7, a very powerful and flexible plugin that adds a contact form to the pages.

STEP 11 – Assigning page templates to pages

Cool! The page templates have been created. To make them work, assign them to a page.

For this part of the tutorial, create first a page from the WordPress admin panel and then assign a page template to it.

To do this, go to Pages -> Add New and then give it a title About or Contact.

pages

Now to assign a page template to the page, go to the right side panel and look for Page Attributes panel on the right side. Under template, select the preferred template and hit Publish.

page-attributes

Now you can check the page if it works in the front-end.

STEP 12 – Working with search.php

The structure of the search box is now set up but it is not working yet; it needs some functions to make it work.

For this part of the tutorial, add the functionality to enable the search query on the search box.

The codes below will have some PHP codes for the search to output the results; otherwise, it will return an error message: “Bummer! No results found”, which is wrapped in an H2 tag.

Create first the search.php file and grab the following code below on it. Otherwise, if there is a result returned, it will display the result within an H2 tag.

Note: The codes below contains HTML tags based on the page.php and single.php


<?php get_header(); ?>





<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">





<div class="row">





<div class="col-md-8">

<?php if ( have_posts() ) : ?>





<header class="page-header">





<h2 class="page-title"><?php printf( __( 'Search Results for: %s', '_s' ), '




<h3>' . get_search_query() . '</h3>





' ); ?></h2>





</header>





<!-- .page-header -->

<?php /* Start the Loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>

 <?php /*** Run the loop for the search to output the results. */ get_template_part( 'content', 'search' ); ?>

<?php endwhile; ?>
<?php else : ?>






<h2>Bummer! No results found</h2>





<?php endif; ?>

</div>










<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>
</div>





</div>





</div>





</div>





</section>






<?php get_footer(); ?>

STEP 13 – Working with content-search.php

The search.php will control the layout of the search results; however, add the loop of the search to output the results.

For this part, create the content-search.php file on the NeoBlog WP theme directory and then paste the code below on it.







<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>





<header class="entry-header">

<?php the_title( sprintf( '




<h1 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h1>





' ); ?>

<?php if ( 'post' == get_post_type() ) : ?>





<div class="entry-meta">
<?php endif; ?>
</header>








By <a href="<?php the_author_posts() ?>"><?php the_author(); ?> </a> / On <?php echo get_the_date('F j, Y'); ?> /  <?php the_category(); ?> 



<?php the_excerpt(); ?>


</div>






STEP 14 – Working with comments.php

To check again the single.php file, notice that there is a part on that file that contains a div class of comment-section along with some PHP codes.

See code below.







<div class="comment-section">
<?php if ( comments_open() || '0' != get_comments_number() ) : comments_template(); endif; ?>
</div>





These codes will simply check if the comments are enabled on the WordPress admin panel using an if statement. If it returns true, it will get the number of comments and simply display all comments returned.

Take note these codes alone won’t yet display comments, one needs to create the comment_template, using the comments.php file. For this part of the tutorial, go ahead and create this file on the NeoBlog WP theme directory.

Now copy the code below and paste it on the created file.


<?php /** * The template for displaying comments. * * The area of the page that contains both current comments * and the comment form. * * @package NeoBlog */ /* * If the current post is protected by a password and * the visitor has not yet entered the password we will * return early without loading the comments. */ if ( post_password_required() ) { return; } ?>






<div id="comments" class="comments-area">
<?php // You can start editing here -- including this comment! ?>
?php if ( have_comments() ) : ?>





<h2 class="comments-title">
<?php printf( _nx( 'One Comment on &ldquo;%2$s&rdquo;', '%1$s comment on &ldquo;%2$s&rdquo;', get_comments_number(), 'comments title', '_s' ), number_format_i18n( get_comments_number() ), '




<h3>' . get_the_title() . '</h3>





' );
?>
</h2>






<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>





<nav id="comment-nav-above" class="comment-navigation" role="navigation">





<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>










<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>










<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>





</nav>





<!-- #comment-nav-above -->
<?php endif; // check for comment navigation ?>






<ol class="comment-list">
<?php wp_list_comments( array( 'style' => 'ol',
'short_ping' => true,
));
?>
</ol>





<!-- .comment-list -->

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>





<nav id="comment-nav-below" class="comment-navigation" role="navigation">





<h1 class="screen-reader-text"><?php _e( 'Comment navigation', '' ); ?></h1>










<div class="nav-previous"><?php previous_comments_link( __( '&larr; Older Comments', '_s' ) ); ?></div>










<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &rarr;', '_s' ) ); ?></div>





</nav>





<!-- #comment-nav-below -->
<?php endif; // check for comment navigation ?>

<?php endif; // have_comments() ?>

<?php // If comments are closed and there are comments, let's leave a little note, shall we? if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>


<?php _e( 'Comments are closed.', '' ); ?>

<?php endif; ?>
<?php $fields = array( 'author' => '

'.'<input class="form-control" placeholder="Your Name.." id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' />

',
        'email'  => '

'.'<input id="email" class="form-control" placeholder="Your Email.." name="email" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' />

',
        'url'   => '

' . '<input id="url" class="form-control" placeholder="Your Website.." name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" />

'
	);

$comments_args = array(
'fields' =>  $fields,
 'title_reply'=>'




<h2>'.'Leave a Comment'.'




<h2>',
'comment_field' => '

<textarea id="comment" class="form-control" name="comment" rows="4" cols="100" aria-required="true" placeholder="Write your comment here.."></textarea>

',
'comment_notes_after' => '',
 'id_submit' => 'submit-btn'
);

?>

<?php comment_form($comments_args); ?>
</div>





<!-- #comments -->

There are a lot of things happening on this file. First, it will test if the post needs a password for the user to be able to comment. Next, if it returns true, the comments number and comments will be displayed.

Notice that there is also a navigation to see the comments (both previous and next) using the previous_comments_link and next_comments_link function.

Finally, use wp_list_comments to display all comments for a post or page based on a variety of parameters, including the ones set in the administration area.

Next, add some wp_enqueue_script to check if the threaded comment is enabled. If it returns true, it will enable comment reply. Open up your functions.php and copy the code below on it.


if( get_option('thread_comments') ){
wp_enqueue_script('comment-reply');
}

STEP 15 – Working with 404.php

Creating a custom 404 page is easy using the 404.php template in a WordPress theme. This will make sure that every link actually goes to a specific web page. If there is a broken link, it will display this page.

For this part of the tutorial, create a simple 404 page template. Copy the code below.


<?php get_header(); ?>

<!-- BLOG AREA -->






<section>





<hr class="no-margin" />










<div class="blog-container section-content">





<div class="container">





<div class="row">





<div class="col-md-8">





<div class="box-layer custom-padding">





<section>





<h2> Oh Snap! Page not found!</h2>










<h3> It seems you're looking for something that isn't here!</h3>







 <a href="<?php echo home_url(); ?>">Click here</a> to go back to homepage! 

</section>





</div>






 </div>










<aside>
<!-- SIDEBAR AREA -->





<div class="col-md-3 col-md-offset-1 margin-sidebar">
<?php get_sidebar(); ?>                                                                                                        	</div>





</aside>






</section>





<?php get_footer(); ?>

A 404 ‘Not Found’ error page is a page generated by the server to inform a user about non-existing page.

On the code above, a simple message error message “Oh Snap! Page not found!” is displayed along with a home link URL. This is making sure that the visitor will stay on the site.

The NeoBlog WordPress theme is now complete! Congratulations!

Our Final Project

Final_theme

 

[Download Source]

Tips You Ought to Remember for This Part of the Tutorial

  • Always check out the WordPress Codex for functions, tags and PHP codes. This will keep you on the right path in dealing with codes.
  • Make sure to use well-structured, error-free PHP and valid HTML. See WordPress Coding Standards.
  • Follow design guidelines in site design and layout.
  • Always Backup your files. Always, always backup your files just in case you made changes on a template file so that you can easily retrieve it later.
  • Seek for help. If you are working on a different theme, chances are you might have some issues while converting some files. I recommend asking help in Stackoverflow community, which is a community of developers helping each other’s codes issues.

What Troubleshooting Techniques You Can Use

There is not really an official rule to check on errors while you are developing a theme. It might be your own codes or some typographical error you just missed on your WordPress templates.

However turning on the Debugging mode or checking your error log might help.

Before You Leave

You don’t want to read the whole thing? You might wanna try the video version! If you need to know the Part 2 of this tutorial series, you need to watch the whole playlist.

Round-up

Congratulations! You just converted an HTML and CSS template into WordPress blog theme. That was easy, right?

You’ve successfully converted your plain static HTML and CSS NeoBlog theme to a WordPress theme.

Now to make it easier for you to follow these steps, we created these video tutorials to make it easier for you to follow the steps on this tutorial by just watching how to do it.

You can also add more functionalities and styles on it by just browsing the WordPress codex to check all the functions you need.

If you have any comments or suggestions, please feel free to drop a line in the comment section.

Hope you learned something on this tutorial and see you again next time!

Now if you still don’t feel comfortable with converting your site to WordPress yourself, the you can find some great conversion services bellow.


Know Your Top 5 PSD to WordPress Conversion Services

No matter how big is your business, a website serves as an effective tool in promoting your products and services. That is where  PSD-to-WordPress conversion services come in since the processes involved are complicated.


Why hire a WordPress conversion expert?

When you choose to convert Photoshop into a WordPress theme, good coding is vital. A company needs to hire a PSD to WordPress conversion expert because:

  • Complexity of the process – involves programming expertise
  • Website customization – proficiency in HTML and CSS coding is needed
  • Project management – best handled by a trained web developer
  • Addition of user-friendly features – a set of themes and plugins are added to give easy access with clients

A PSD-to-WordPress conversion is a process that involves several complicated operations such as PSD slicing, HTML & CSS coding, designing the initial HTML file and so on. A professional PSD-to-WordPress- theme-conversion specialist is familiar with all the complicated operations related to WordPress file structure so it makes all the elements in the project work flawlessly.

To ensure that you have a perfect website capable of delivering a superior result, why not check these top PSD to WordPress conversion services.

1. PSD to WordPress Experts

psd to wp

Image from Flickr

Being at the top of the list, this service does not require you to develop a separate website for mobile users; the service gives you a 100% responsive WordPress website for better viewing experience.

The responsive WordPress design ensures smooth navigation with no horizontal scrolling, regardless of the screen size and resolution. Moreover, their commitment to deliver on time is superb. They give better service to quality, response time, clear communication and regular customer support.

To add more, services include:

  • 100% unique PSD to WordPress themes/templates
  • SEO-semantic for improved search engine rankings
  • 100% tableless layout for fast loading speed & easy navigation
  • Completely hand-coded markups with W3C validations
  • Flawless PSD to WordPress integration with cross-browser compatibility
  • Dedicated 24/7 technical assistance
  • Exhaustive WordPress customization solution

2. CSS Chopper

csschopper

Image from Flickr

Being the leading web design and development firm in India, CSS Chopper provides high quality PSD-to-WordPress conversion services to its clients around the world. With its new service called 50/50 business partnership, web designers can showcase their designing skills via freelance web design projects.

You can get maximum profit and exposure with freelance projects. With their new system upgrade, they  level up their services by providing status about your project. You can communicate with their sales executive via email or online chat through Skype.

3. Markupcloud.com

markup clouds

Talking about efficiency and support, with Markupcloud’s professional team composing of 150+ developers, they are truly effective in giving quality services to their clients. They have a group of efficient individuals who are easy to work with. Plus, they give insight throughout the project development process.

If you are a client, it is not difficult for you to pitch in a lot of ideas. Just by giving them some input,  Markupcloud can create highly intuitive insights for your project. The technology they use is also update, ensuring that you get the best results. It also follows rigid standards as it is ISO 9001:2008 certified.

Markupcloud.com offers:

  • Seamless communication
  • Fast, high-quality conversion
  • Comprehensive workflow
  • Competitive pricing
  • Money-back guarantee
  • 100% satisfaction guarantee

4. PixelCrayons

pixelcrayons

Image from Flickr

Are you opting for a systematic correspondence and quality coding? When it comes to your website, you better choose PixelCrayons. Pixelcrayons gives maximum service to their clients by charging very affordable prices, especially for small businesses or start-ups.

They are very efficient in customizing projects that give superb results and do amazing projects in quick turnaround time.

They also have custom solutions like:

  • Corporate Intranet/Extranet
  • Social Networking Websites
  • Document Management
  • B2B & B2C Portals
  • Online Storefront
  • Online Marketplaces and Auctions

5. MarkupBox

Markup box

Image from Flickr

For over 5 years, Markupbox has been delivering specialized PSD-to-HTML conversion services based on their set of industry ethics. With proficient developers that meet your expected satisfaction level, their turnaround varies depending on the complexity of the design. Normally, MarkupBox would take 1 business day for them to deliver their first page code and 4-6 business hours for each additional page.

You can pay MarkupBox by:

  • Paying directly with your credit card through Visa, MasterCard, DISCOVER, American Express and Diners Club.
  • You can also make your payment using your PayPal account.

To Conclude

Creating a good design is a challenge of creativity which not everyone has. Coding the design requires deep knowledge of PHP, HTML, JavaScript and CSS. Thus most people can create a PSD image of their design but coding it is often a challenge. That is why you need conversion services to get things done in an easy way.

What’s the best efficient conversion services for you?

Now let’s take a look at website security issues that you can encounter in our business.


Is My Website Ready for Some Serious Hacks?

The issue of website security has been a top priority for web designers and developers for a long time. In the course of Internet’s colorful history, a lot of methods and tools have been developed (and some are still at the brink of development) to ensure that websites will be hack-proof, or at least be ready for some serious hacks.


 

hacker

Either you may be designing an online store, a niche blog, or maybe even just a corporate website, protection should always be put in mind.

Now, as a web designer/developer, you are tasked to not only create beautiful and running web pages but also to keep it protected from parties that would want to penetrate and take advantage of it. You need to enforce security measures to prevent the dreaded situation of being hacked.

There are a lot of ways of hacking a website. By this, many measures should be implemented to prevent these unfortunate situations. However, there is no single fool-proof way to prevent and eradicate hackers. The best thing you can do is to make the invasion really difficult to a point where the hacker just gives up.

In this article, you will know the measures you could take to make your website ready for a possible breach. You will also be reading some of the most common techniques hackers use to compromise your website’s security.

Common Hacking Methods

As I’ve said, there are various methods in penetrating through a website’s security. Hackers employ these methods to destroy or manipulate the website they are about to hack. We are introducing these to you so that you can apply your security measures to prevent and fight such shenanigans.

SQL Injection

You cannot deny that SQL Injection is listed as one of the most dangerous attacks against websites and systems. It mainly involves the input of SQL codes into forms like login fields or even in the browser address field. Doing so will give the hacker access to the database of the website or system.

Once you enter your username and password in the login forms, the data that you are keying will be inserted into an SQL command. The said command will check the data that you just entered and compare it against the relevant table in the database.

Once the two values match, you will be granted access. Otherwise, you’ll not be able to log in.

evil-person-with-syringe

SQL Injection attacks happen when a hacker tries to paste SQL commands into your website fields. In some normal cases, the website will just check the data being entered by the user and validate it.

In the event that a data contains  a simple single quote (‘) at the end of a username, your database might see this one as a constructed SQL. Because of this, it will be validated as a query.

The hackers may not enter your website using this query, but the method will let them have access to your database name, tables and key fields. From these data, the hacker can now use the information he has to submit SQL commands into the other fields of your website. From then, they can see the contents on your database.

How do I defend my site against this?

  • Ensure correct data types
  • Parametrized queries
  • Permissions
  • IIS global filtering
  • Leave validate request on
  • Consider using an ORM

Cross Site Scripting (XSS)

Commonly known as XSS, Cross Site Scripting is one of the more difficult hacks to deal with. In the past years, Microsoft, MySpace and Google have had a difficult time dealing with such cases.

XSS deals with the use of malicious JavaScript routines that are attached within hyperlinks to take control over sessions, hijack ads in apps and steal personal information.

You will surely remember this: You accidentally clicked a weird looking pop up and it leads to a website that seems like a messenger app. Then a cute girl with a seemingly questionable English chats you up and says, “You wanna see my p*ssy? Click here.”

With the what-the-hell-she’s-hot-anyway mentality, you click the link and an address with a sketchy URL appears:

[%63%61%74%69%6f%6e%3d%274%74%70%3a%2f%2f%77%7…]

At some point, you may think nothing has happened. But boy, you have never been so wrong in your life. These links can help steal session cookies (sounds like you’re being bullied) that can possibly lead to hijacking your personal information.

hackerr

How do I prevent this hack from happening?

  • Never insert untrusted data except in allowed locations.
  • HTML escape before inserting untrusted data into HTML element content.
  • Attribute escape before inserting untrusted data into HTML common attributes.
  • JavaScript escape before inserting untrusted data into JavaScript data values.

Authorization Bypass

Simple as it may present itself, authorization bypass is very scary! Often used against poorly designed apps or CMS, this hack can wreck a total havoc in your website.

It works in this simple process:

  1. Look for a weak and poorly secured log-in page.
  2. View the source code.
  3. Copy the code into notepad.
  4. Delete the authorization JavaScript and change a link or two.
  5. Save.
  6. Delete the authorization JavaScript, amend a link or two.
  7. Open the file into the browser, login and press enter.
  8. Voila. Access!

How to determine if my website is vulnerable?

Depositphotos_24543141_m

  • Are your server’s processes run on root, Administrator, LOCAL SYSTEM or other privileged accounts?
  • Does your web app access the database via SA or other accounts?
  • Does your application have the ability to access the database via accounts with more privileges than required?
  • Do your application server virtual machines run with AllPermission or FullTrust in J2EE and .NET environments?
  • Can you limit access to web resources using platform capabilities?

If yes, to even just one, then, you might be vulnerable.

Read more here: Owasp

How can I protect my website?

  • Your website’s development, test and staging environments should be set up using the lowest possible privilege.
  • Make sure that the accounts that run the environment have privileges capping up to the greatest degree possible. Your servers should never run Administrator, root, sa, sysman or supervisor processes.
  • Limit your user accounts to enough privileges corresponding to their tasks.
  • Business user accounts should not be given admin status and vice versa. You need to use different accounts for different tasks.

Now, there are many types of hacks. The most common hacking techniques have been discussed. If there are something missed, please lead to the following links for more detailed information:

Common Safety Measures to Prevent Hacks

Always Keep Your Plugins and Software Up-to-Date

update

Nothing can make a hacker’s ears clap than an outdated plugin or blogging program. They commonly fall as easy targets for outdated programs commonly have glitches, bugs or security loopholes. That is the main reason why they are updated in the first place.

Let’s put it this way, you are using a model of a door lock that has been lockpicked a thousand times. Would you expect the next lockpicker to have a difficult time in cracking your security?

So, heed this advice, update now.

Use Strong Passwords

strong-pw

How many times does this have to be stressed out? Using strong passwords is very important. You may not have an idea about this but hackers are continually trying to crack or steal your passwords..

So, how do we craft an effective password?

  • Salt Method

Salt Method is a great way to keep your password secure. According to the principle, you should replace letters or numbers into special characters according to your own rule. We put this as an example.

  • Replace all the ‘a’ with @
  • Replace all the ‘s’ with $
  •  Repalce any space with %
  • Replace any ‘o’ with 0
  •  Replace any ‘i’ with !

So with this, we may make our sample password which is originally ‘whoisjohngalt’ as ‘wh0!$j0hngalt’.

  • Business Insider’s Method

Business Insider recently released a method to create secure passwords that can be very easy to remember. According to the magazine, you should make a longer password because it will give computers longer time to guess it.

The basic principle of this method is that you create a really long passwords using words that may not be significant to you or to each other.

  • Spence’s Method

We at 1stwebdesigner have also developed our own method of creating strong passwords. Here is a video of it:

Use Google’s Webmaster Tools

Google-Webmaster-Tools-Logo

Google has now a way in helping your website to be more secured. Using Webmaster Tools, you will be notified for the presence of malicious infections.

In case that you fail to remove them and you become hacked, Google will help you by blacklisting your website. This provides you time to get rid of malware faster. The service also includes the details of the problem Google is detecting.

Don’t Display WordPress version number

wordpress-version-number-3

Aside from updating your blog platform, you should always prevent hackers from knowing what version of WordPress you are running on.

Doing this will prevent them from exploiting security loopholes on your site. You can remove the WordPress version number by editing the functions.php of your site and add the following code:

function wpbeginner_remove_version() {
return '';
}
add_filter('the_generator', 'wpbeginner_remove_version');

Turn register_globals to register_globals=off

Screen-Shot-2014-07-08-at-3.21

Many WordPress users have been vulnerable because they took this for granted. Despite being recommended by WordPress.org to leave register_globals on, you should turn it off because this setting has been the commonly hacked element in a WordPress site.

Tighten your .htaccess file’s security.

Screen-Shot-2014-07-08-at-3.21-FTP

Normally, your default .htaccess security is more open that it should be. However, you can tweak it to save you from URL hacks, SQL injections and other more hacks.

There are a lot of ways to tweak your .htaccess, but we’ll name the most useful ones (remember to back up):

  • Order allow,
  • Deny deny from all

Add the following and you will be able to sleep tight at night, knowing that bots and unwanted access will not be allowed from your wp-admin.php file. You can also include this method to other files like install.php and eror_log.

Here are a few more codes to put in your .htaccess file.


RewriteEngine On

RewriteBase /

RewriteCond %{REQUEST_METHOD} ^(HEAD|TRACE|DELETE|TRACK) [NC]RewriteRule ^(.*)$ - [F,L]RewriteCond %{QUERY_STRING} \.\.\/ [NC,OR]RewriteCond %{QUERY_STRING} boot\.ini [NC,OR]RewriteCond %{QUERY_STRING} tag\= [NC,OR]RewriteCond %{QUERY_STRING} ftp\: [NC,OR]RewriteCond %{QUERY_STRING} http\: [NC,OR]RewriteCond %{QUERY_STRING} https\: [NC,OR]RewriteCond %{QUERY_STRING} (\|%3E) [NC,OR]RewriteCond %{QUERY_STRING} mosConfig_[a-zA-Z_]{1,21}(=|%3D) [NC,OR]RewriteCond %{QUERY_STRING} base64_encode.*\(.*\) [NC,OR]RewriteCond %{QUERY_STRING} ^.*(\[|\]|\(|\)||ê|&amp;quot;|;|\?|\*|=$).* [NC,OR]RewriteCond %{QUERY_STRING} ^.*(&amp;quot;|'|&amp;amp;lt;|&amp;amp;gt;|\|{||).* [NC,OR]RewriteCond %{QUERY_STRING} ^.*(%24&amp;amp;amp;x).* [NC,OR]RewriteCond %{QUERY_STRING} ^.*(%0|%A|%B|%C|%D|%E|%F|127\.0).* [NC,OR]RewriteCond %{QUERY_STRING} ^.*(globals|encode|localhost|loopback).* [NC,OR]RewriteCond %{QUERY_STRING} ^.*(request|select|insert|union|declare).* [NC]RewriteCond %{HTTP_COOKIE} !^.*wordpress_logged_in_.*$

RewriteRule ^(.*)$ - [F,L]

Source: RoalCoal

My Website Has Been Hacked. What Should I do?

Say that it’s too late and you have already been hacked. What would you do?

Don’t start banging your head into the wall yet. Smashing Magazine has this wonderful article. Read it.

Conclusion

Being hacked sure is a headache. You basically see your efforts crumbling down like a tower made of pastry. But an ounce of prevention will always be better than a pound of cure. So, while you’re still okay, fix everything you need to fix before it all goes gaga.

Editorial Team

Written by Editorial Team

43 Comments

  1. Just a few years after blogs became mainstream, blogs have officially overrun the internet with hundreds of genres of blog posts, satisfying anyone and everyone’s thirst for knowledge about anything. It is now so easy to start a blog just by following the steps you have detailed, that even grandma can start a blog today. Thanks!

    Reply

  2. Thanks, interesting just how simple it seems, and that SEO’s like Google like blogs. I may switch.

    Reply

  3. hi everyone hope all of u will be fine plz anyone help me , plz give me steps for customize html website into wordpress website i try but it is not working properely plz tell me how to set page link and where i can see all page or where i store my all html pages

    Reply

  4. Are WordPress.org free Themes the same as a template? …where I can simply click, upload and choose options without any coding? I don’t have time to learn html codes… I need “simple-stupid”. ( :

    I’m replacing an html site design with a WordPress.org free Theme. This will not be a blog… it needs to have 3-4 pages with no sliders. Will I be able to modify a free Theme in THEME TEST DRIVE under THEME OPTIONS? Or will I have to “Activate” or “Publish” the Theme to access ALL the options to complete the site? It is apparent that the Themes I have uploaded do not reflect all the options (unless I just want a new background and font).

    Is it possible the current “Active” site is interfering with the Theme options? Thank you!

    Reply

  5. Never got a chance to thank you for this post. This was the original post that i read which eventually led to us creating the social community we have on barcelona-underground.

    We started here, then worked our way through a rabbit hole of tutorials, blogs, videos and forums.. and i would do it all again!! :)

    Reply

  6. hay friend thk u .. i search more time to learn… how to install wordpress … this too easy steps … i like too
    thk u friend …. please give like this idea for ever by abbas kovaipudur , india

    Reply

  7. I always find WP complicated to use. This tutorial helped me a lot! Thanks!

    Reply

    1. how this tutorial is help u.
      i not understand???

      Reply

      1. Really, I agree… how did this help? There’s absolutely nothing here that you can’t find EVERYWHERE…

        Reply

  8. Just starting out with wordpress and its not without its perils especially when deciding on a theme! Thats the worst ! Cheers for the tutorial
    Janine x

    Reply

  9. Great job.Very informative article.

    Reply

  10. Great Post It helps me a lot in setting my WP blog and doing all the steps ..thnxx a lot for sharing with Us..Keep going :)

    Reply

  11. Thanks for this! :D

    Reply

  12. well, good job, so awesome good job man! its help for my new wordpress site. their is also some thing for expert also

    Reply

  13. Its very bad tutorial for beginners. You should make good tutorials. Thanks

    Reply

  14. Nice tips and this is what I’m looking for because I’m new to wordpress. I’m planning to buy a domain myself to host my blog. And I find this article very helpful. Thanks Anastasia!

    Reply

  15. Not a bad guide, you should also add a few small tips to deal with common problems people encounter during installation such database accounts, possible file permission issues and common plugin problems as well.
    But still a good start for most beginners.

    Cheers

    Reply

  16. Hi there,
    I uploaded WordPress to my host using Softaculous. Should I have done the config stuff first?
    Cheers,
    Steve

    Reply

    1. Rean John Uehara August 3, 2011 at 08:11

      You should be able to configure it by going on the directory where you uploaded it. For example: http://www.yourdomain.com/wordpress << go to where you uploaded the file and a wizard will help you do the process.

      Reply

  17. OK, I have my site up and running but can’t figure out how to change the page size on posts from half page to full page. Does anyone know where I find that information. This is only on the posts that I can’t figure this out. Thanks.

    Reply

  18. Fantastic tutorial. Answered all my questions about getting WordPress and an FTP client up and running. This guide has saved me from lots of headache – I will certainly refer others here. Many many thanks! :)

    Reply

  19. Not very helpful at all! Not enough detail — some examples would be nice. It may be overwhelming for a true neophyte to deal with registering a domain name, signing up for a webhost, AND downloading and upload files while trying to grasp the essentials of WP!!

    I was looking for a beginners tutorial for setting up a static website, not a blog.

    Reply

    1. Dainis Graveris April 13, 2011 at 00:36

      But headline says – WordPress Website step by step..not static state. WordPress is blog by it’s core.

      Reply

  20. hey..can somebody help me i am just new in using wordpress..can somebody tell me how to get start with it?thank you

    Reply

    1. Go to the WordPress “How-To” area and click on the line that says “START HERE” there should be plenty there to get you started. Sometimes it’s not always that clear though, especially if you are as much of a beginner as I was, so use a couple tabs and look at a couple sources at the same time. It helps, one will clarify what another doesn’t and vice versa.

      Reply

  21. Bojan Živković January 31, 2011 at 20:31

    You have provided explanation how to but without mention details. What means Fill in database details in the wp-config.php file, save it and close it. And how to install and use without having your web host? All wordpress tutorials are the same. This is one more, for me wasting time and reading always the same.

    Reply

  22. Hello. You say First of all why spend money if you can get cool stuff for free?

    As I know very little (AKA Nothing) about code, I have no idea when searching for a theme, whether I am getting a trusted theme or one that is full of “bad stuff”. Could be one reason to buy a theme (from a trusted source).

    Reply

  23. I have setup my WordPress blog a few days ago. I have set it up with one-click installation from my host’s control panel. But about Themes, I am still at a loss as I do not get FREE themes from WP that suit all my needs, or, perhaps I just cannot do customization my self. I too feel that WP is 200% better than others. Now that after reading your valuable suggestions, I think I should try more at WP show case!

    Reply

  24. Awesome guide for WordPress. Alot of people will get great information from this post. Great share.

    Reply

  25. Very imformative post. You made some great points. I read about 4 other posts trying to understand the concept of wordpress and what it was.

    Reply

  26. nathalia theyer-mccomb April 23, 2010 at 21:57

    Thanks for the very helpful post!

    Reply

  27. Great beginner’s guide!
    i’ll be sure to send people here.

    Reply

  28. Nice tutorial for beginner like me. Thanks a lot.

    Reply

  29. Great step by step tutorial. One thing that you forgot to mention was that some web hosts offer easy installation of WordPress through fantastico.

    Reply

  30. Thanks for a very informative tutorial, this really help me a lot. Keep it up for sharing.

    Reply

  31. I’ve been searching for somewhat comprehensive step-by-step wordpress guide for beginner for a week or so. Now I think I’ve found it. Great post. Thanks a lot.

    Reply

  32. Great guide. Thanks.

    Reply

  33. Thanks for this. It’s a very clear account of setting up and getting going. I’ve already gone through this phase andwould have been very glad of the help you are providing.
    NOW i’m looking forward to your next posting taking things further. For some reason my blog feeds have stopped working and I have absolutely no idea why. So I’m really hoping you’ll explain the fundamentals as well as the details – because so much of the help that’s available assumes people understand the basics – such as autodiscovery tags etc.

    Thanks again.
    Dennison

    Reply

    1. Glad you liked it :) I will keep writing more useful stuff in simple words

      Reply

  34. Great guide for begginers

    I appreciate it :)

    Reply

  35. Great post. I’ve just recently talked to about half a dozen different people who are wanting to a really simple way to get online, and I’ve been helping them setup WordPress sites. This will be a great resource for me to pass on to them so they’re more confident with getting things started.

    Reply

  36. Nice tutorial for the very beginner. It’s good to find all this information in one place.

    It would be even better if you had included links to hosting sites and domain sellers you recommend (ie http://www.godaddy.com/ ).

    Thanks for sharing!
    Alex

    Reply

  37. cool info. thanks. can you make another guide for the users that use Plesk as hosting software.

    Reply

Leave a Reply