No wonder! You too have landed on this page while looking for an ultimate guide that would help you to create your very own first WordPress site. Well! I know it is quite difficult for you as a beginner to select any one out of those bountiful tutorials available online. Understanding the fact that you are oblivious to the world of WordPress, here I bring you a complete step-by-step guide which is easy and composed in compliance with the norms of WordPress guidelines.
Time has gone when you would have to buy bundles of guide books, just to learn the basics of WordPress. Take a look at this tutorial which contain tips, hacks and even the real-time examples to make your learning faster.
A Moment With The Author
I believe building a website is no different from building a house. You need to build its foundation right from the ground level. Like the walls and windows, a website too needs an organized layout and some sort of decorations in terms of features, functions, plugins,themes, and much more.
So, if you want your website to look good and function well, launch it with WordPress, as it is simple and intuitive.
Here we begin with our step-by-step tutorial for creating your first WordPress site.
1- Installing WordPress
WordPress has sensationalized the web development industry with its matchless features
and functionality. It is quite easy to install such that it takes only 5 minutes for installation. There are many web hosts that provide tools like Fantastico that initiates automatic installation of WordPress.
And, if you are among the ones who wish to install WordPress on their own, then do not miss to read the steps mentioned below.
1.1 – What to Know Before Installing WordPress
Prior to beginning with the installation process, there are some important things which you must know.
Before beginning with the WordPress project, you must have:
1. Basic knowledge of PHP
2. Understanding of HTML and CSS
1.2 – What to Do For Installing WordPress
You can easily start with the installation by:
First checking, if your web host exhibits the minimum requirement of WordPress
3 .x.x. i.e.
1. PHP 5.2.4 or greater
2. MySQL5.0 or greater
3. The mod_rewrite Apache module is active
- Further, downloading (http://wordpress.org/download/) the latest release of
WordPress - Unzipping the downloaded file to a folder on your hard drive
1.3- WP Installation Process
Now you are all set to install WordPress, here are few instructional steps for guidance, if
you are a beginner
1. Download and unzip the WordPress package to begin the process
2. Create a database for WordPress on your web server (for instance you can use
phpmyadmin or any other tool) for this purpose
3. Now, Upload the WordPress files to the desired location on your web server (e.g. You can either upload it in public_html or in www folder)
4. In case of Linux server, set write permission to the folder by FTP client
5. Access the URL, where you uploaded your WordPress files to run the WordPress installation script in a web browser
If the WordPress is installed in the root directory, you should visit: http://example.com/
If the WordPress is installed in its own sub-directory called blog, then, for example,
you should visit: http://example.com/blog/ (http://localhost/blog)
Now, continue with the easy to follow steps provided by WordPress as instructions
Step 1
Step 2
Step 3
Step 4
Step 5
Step 6
2. How To Configure/Manage WP And it™s Content
Some of the most common features of WordPress have been mentioned below.
2.1- Beginning from Admin Panel
Always remember, log in to the admin panel if you want to do anything in WordPress. Logging in to Administration panel is very easy, just go to your website and add wp-admin to the URL. For example, if your site is http://mywebsite.com, then your WP Admin is http://mywebsite.com/wp-admin. Enter the username and password to login
now.
2.2- Creating a new page
- Navigate to Pages>Add New
- Do not miss to fill the following things:
1. Title“ Add a suitable title of the page as it would be seen by visitors on the page in the
menu
2. Content“ make sure you add the content of your page
- After this, on the right side of the edit page, fill information in the following boxes:
1. Page Parent“ Select this option if your page will be a sub-page
2. Page Order“ This is done to inform WordPress about the sequence of your pages. The
pages will be shown in ascending order in the menu
Both Page Parent and Page Order are needed to keep the pages organized
2.3- Adding media/picture
1. First of all, create or edit the page in which you want to add a picture
2. Click the Add Media icon
3. Click on Browse …, find the image on your computer where it is saved, and now click Open. You can also drag the image into the dragging area instead of browsing. After the picture is uploaded, WordPress will eventually show you optional information which you can add about the picture
4. Give a title to the image which would be displayed internally within the Media Library
5. Add a caption to the image, whenever it is added to the page or post or whenever it is included in a gallery
6. If you have done any changes, click on Save Changes
7. Choose the image size and its alignment, and then click Insert into the page. Finally, the image with a caption will be added
8. After clicking on Save Draft, Publish, or Update, make sure you save your post/page
2.4- Widgets
Widgets are mostly some part of the content, which could be in a simple text form or could be as complicated as the list of 10 recent posts, which usually appear in a sidebar or somewhere bound space on your website. If your website has more than one such space, then every such widget-enabled space will have their unique name to distinguish them
from each other. If you want to view or edit your current widgets, just navigate to Appearance> Widgets. If you want to see and edit the content of these widgets, then just click on the arrow shown below its space. And if you want to add a new widget, just drag it from the left-side over to the widget-enabled space, it will be added.
2.5- Theme Options
You can customize various sections of your website from this page. Go to Appearance>Theme Options and check all the options, settings and content.
2.6- Managing Menus
Every website has one or more menu locations officially designated and defined. It™s up to you, where you want to place your menu, items to put in the menu, their sequence, titles and their links. Mostly, the main pages and titles are placed in the menu, sometimes sub-pages can be also added (in the case of rollover menu). To customize the content of the menu, click on Appearance>Menus. Have a look on the left side of this page, you™ll see a list of items that can be added to the menus. Remember, every item in the menu is either a Page, Category, or Custom Link.
You are free to change the title of the items that you are adding to the menu.
- How to Add new item to a menu
1. Select the tab of the menu in which you want to add to or create a new menu by
clicking the +
2. To add pages or categories, check the boxes next to the pages or categories which you
want to add, and then click Add to Menu. (See Fig. 1)
3. To add a custom link, enter the URL and Label and then click Add to Menu. (Fig. 2)
4. After adding all the items as per your choice, it™s time to rearrange them, make their
sub-items, change sequence, etc. (See Fig. 3)
5. In case, you want to change labels, just click on the down arrow on the space below
the menu to see, change, and save the options
6. After completing all these tasks, make sure you click on the Save Menu placed on the
top
3. Moving To the Use of WordPress Themes
3.1- What is a Theme?
In simple words, a theme is a window to your website, of how it looks and what it actually is. Contrary to a pre-notion that themes are just integrated to beautify and add meaning to the display option, WordPress Themes proffer an extensive control not just over the appearance but help in managing the content display on your website.
3.2- Using Default Themes
WordPress comes with two inbuilt themes; the default Twenty Twelve theme and the previous default, Twenty Eleven theme. You can easily switch between these themes from the admin panel, as per the requirement. All the themes that you have added to the theme directory will automatically appear in the Administration Panels> Appearance > Themes as additional selections.
3.3- Add New Themes
There are numerous themes that are available online to compliment and work with your WordPress installation. Every theme installation comes with guidelines which must be read carefully to allow successful installation avoiding any errors.
3.4- How To Add New Themes using the Administration Panel
You can easily download WP Themes directly to your blog by using the Add New Themes option which is available in the sub-menu of Appearance panel.
1. First, log in to the WordPress Administration Panel
2. Now, select the Appearance panel and inside it, select Themes
3. Select Install Themes option
4. Use can also use the sub-menu or the Search or Filter options to easily find a theme apt for your blog/page
5. Do not miss, to check its preview. Click on the Preview option to see how it will look after installation
6. Using the Upload button placed in the top sub-menu, upload a zipped copy of the theme that you have selected or have previously downloaded on your system
3.5- How To Add Themes Manually (FTP)
If you want to add the themes manually to your WordPress installation, follow these helpful steps carefully to avoid any error:
1. Download the Theme archive and sort out the files that it contains. Preserve the directory structure and take help from it while extracting the files from these archives. Always follow the guidelines provided by the author of your theme
2. To save your theme, create a directory in wp-content/themes directory provided by WordPress, by using the FTP client to access your web host server
3. After creating the directory, upload the theme files into a new directory placed on the web host server
4. To select a new theme, carefully follow the instructions mentioned below
3.6- How to Select A New Theme
Steps to select a new Theme for your site:
1. First log in to the WordPress Administration Panel
2. Select the Appearance option and then go to Themes
3. From the list of Themes present in Available theme section, you can click on the Theme title (or Theme screenshot) to activate the theme of your choice.
4. See the preview of the theme
5. Now, activate the theme by clicking on Theme Name link present in the top right section.
Note: Please note, if the Theme preview appears blank, it is better not activate the new theme. Check for any errors, if ignored may not display correctly on your website.
3.7- Create Themes
Done with the installation of themes. Now, if you are interested in creating your own Theme for usage, distribution, or for learning about the structure of themes, check the Theme Development section given below.
4. Theme Development
4.1- Why WordPress Themes?
WordPress Themes are a window to your site, that work closely with functions of your website to enhance its display and appearance. Each and every theme is different on its functionality and visibility, which offers multiple options for website owners to customize the look of their site.
What is the need to build WordPress Theme on your own?
I have tried to answer this question on my part, check if you agree!
¢ An opportunity to learn more about CSS, HTML, and PHP
¢ An event to polish your competence with CSS, HTML, and PHP
¢ If you want to learn and do something creative and interesting
¢ If in case you release it for the public, it is like a contribution to the WordPress community
4.2- Standards For Theme Development
Every WordPress Theme is unique and specific in its own functions; they offer appealing visibility and symmetry to the content. Thus, WP themes make a WordPress site aesthetic and fascinating instantly by changing its look.
The below-mentioned standards should be followed while coding WordPress Themes:
¢ Use well-structured, error-free PHP, and valid HTML. See WordPress Coding Standards (4.6)
¢ Use clean, valid CSS. See CSS Coding Standards
¢ Follow design guidelines in Site Design and Layout
4.3- Structure of a Theme
A WordPress Theme consists of three main types of files along with the images and JavaScript files. They are:
¢ A stylesheet called style.css, which controls the presentation (visual design and layout) of the website pages
¢ The WordPress template files that control the generation of information from the
database to the page displayed on the site
¢ And, an optional functions file (functions.php) as part of the WordPress Theme files
4.4- Theme Stylesheet
Apart from providing the CSS style information of the theme, style.css provides details about the Theme in the form of comments. Check for the fact that no two themes can have same details mentioned in their comment header. This is helpful in case, if you are creating your own theme copying from an existing one, make sure to change the stylesheet information. Here is an example of the first few lines of the stylesheet, called
the stylesheet header, of a Theme “Twenty Ten”:
NB: The name used for the Author is suggested to be the same as the Theme Author’s wordpress.org username, although it can be the author’s real name as well. The choice is
the Theme Author’s.
Stylesheet Guidelines
¢ Always follow CSS coding standards while authoring your CSS
¢ Use valid CSS whenever possible. As an exception, use vendor-specific prefixes to take advantage of CSS3 features
¢ Make sure there are minimum CSS hacks. There is an exception of browser
compatibility. If possible, separate all CSS hacks into separate sections or separate files
¢ All possible HTML elements should be styled by the Theme, both in post/page content and in comment content
¢ Tables, captions, images, lists, block quotes, etc.
¢ Add easily printable styles
¢ A print stylesheet can be included with media=”print” or added in a print media block in your main stylesheet
4.5- Functions File
A theme can be also used as a functions file, which is saved in the theme subdirectory and is named as functions.php. This function file basically acts like a plugin, which automatically gets downloaded during WordPress initialization.
Here are some suggested usages for this file:
¢ Enable Theme Features such as Sidebars, Navigation Menus, Post Thumbnails, Post Formats, Custom Headers, Custom Backgrounds, and others
¢ Define functions used in several template files of your theme
¢ Set up an options menu, giving site owners options for colors, styles, and other aspects
of your theme
The default WordPress theme contains a functions.php file that defines many of these
above-mentioned features, which are a boon to any WordPress site. In short,
functions.php basically works as a plugin.
When to add functions to functions.php or to a specific plugin?
Sometimes, you may need the same function to be made available for more than one parent theme, so in that case, the function should be created in a plugin instead of a creating specific functions.php for every theme. This plugin could contain either template tags and some other specific functions which would be visible to all themes.
4.6- Template Files
Template files are a collection of WordPress themes generated when requested by the visitors. Template files are made up of HTML, PHP, and WordPress Template Tags.
WordPress allows you to separate the templates for the various aspects of your site. It is not essential; however, to have all these different template files for your site to fully function. Templates are chosen and generated based upon the Template Hierarchy, depending upon what templates are available in a particular Theme.
You have the freedom of regulating the customization as a theme developer, in which you can choose the features you want to add or edit. For example, you can use only one template file, known as index.php as the template for all pages generated and displayed by the site.
4.6.1- Template Files List
Here is a list of major Theme files recognized by WordPress. A theme may contain different stylesheets, files, or images.
Style.css
This is the main stylesheet which should be included in the theme containing the information header of the theme.
Rtl.css
The rtl stylesheet will be included automatically if the website’s text direction is right-to-left. This can also be generated using the RTLer plugin.
Index.php
This is also an important template file. A theme providing its own templates should always have index.php
Comments.php
It defines the comments template.
front-page.php
The front page template is only used if there is any static front page in use.
Home.php
By default, the home page template becomes the front page. If your website uses a static front page then this is the template visible at the homepage with all the latest posts.
Single.php
The single post template is used whenever a single post is queried. index.php is used if the query template is not present for this and all other query templates.
single-{post-type}.php
The single post template is used when a single post from a custom post type is queried. For example, single-books.php would be used for displaying single post from the custom post type named “books”. index.php is used if the query template for the custom post type is not present.
Page.php
The page template is used when an individual Page is queried.
Category.php
The category template is used when a category is queried.
Tag.php
The tag template is used when a tag is queried.
Taxonomy.php
The term template is used when a term in a custom taxonomy is queried.
Author.php
The author template is used when an author is queried.
Date.php
The date/time template is used when a date or time is queried. Year, month, day, hour,
minute, second.
Archive.php
The archive template is used when a category, author, or date is queried. Always remember, that this template will be overridden by category.php, author.php, and date.php for their respective query types.
Search.php
The search results template is used when a search is performed.
Attachment.php
Attachment template is used when viewing a single attachment.
Image.php
Image attachment template is used when viewing a single image attachment. If not present, attachment.php will be used.
404.Php
The 404 Not Found template is used when WordPress cannot find a post or page that matches the query.
All these above-mentioned files have their specific meanings and functions with regard to WordPress. They are either used as a replacement for index.php, in compliance with the Template Hierarchy, and also when the corresponding Conditional Tag returns true. For example, if only a single post is being displayed, the is_single() function returns
‘true’, and, if there is a single.php file in the active Theme, that template is used to generate the page.
4.6.2- Basic Templates
At basic level, WordPress Theme consists of two major files:
¢ style.css
¢ index.php
Both these files are described and added into the Theme directory. The index.php template file is very flexible as it can be used to include all references to the header, sidebar, footer, content, categories, archives, search, error, and any other page created in WordPress.
On the other hand, it can also be divided into modular template files. Even if you do not provide other template files, WordPress contains files/functions by default to continue the process. For example, if in a case you have not provided a searchform.php template file, then WordPress, by using its default search function, displays the search form.
A basic template file include:
¢ comments.php
¢ comments-popup.php
¢ footer.php
¢ header.php
¢ sidebar.php
Use these template files to add template tags within the index.php master file that will assist you to include the other files in the desired section of your choice on the final page.
¢ To include the header, use get_header()
¢ To include the sidebar, use get_sidebar()
¢ To include the footer, use get_footer()
¢ To include the search form, use get_search_form()
Here is an example of the include usage:
<?php get_sidebar(); ?>
<?php get_footer(); ?>
The default files might not be present or for some reasons might be disapproved, so do not miss to add these files in your theme. For version 3.0, the deprecated default files are located in wpincludes/theme-compat. For example, you should provide header.php for the function get_header() and comments.php for the function comments_template().
To know more about how templates work or process to add information in them, you must thoroughly read the Templates documentation.
4.6.3- Custom Page Templates
Theme directory contains files that define each and every template. Hence, to create a new Custom Page Template for a Page, there is a need to create a file first, which will be named as the First page template. For eg: There is a first Page Template for Page snarfer.php. At the top of the snarfer.php file, add the following:
<?php
/*
Template Name: Snarfer
*/
?>
The above-mentioned code defines the snarfer.php file as the “Snarfer” Template. Similarly, the name “Snarfer” can be replaced with any text, in order to change the name of the Page Template. The Template Name will appear in the Theme Editor as the link to edit this file.
The file may be named almost anything with a.php extension (see reserved Theme filenames for filenames you should not use; these are special file names WordPress reserves for specific purposes).
The above five lines of code are solely dependent on you while the remaining codes will control the presentation of pages using SnarferPage template. Take a look at the Template Tags for a description of the various WordPress Template functions which can be used for this process. You may find it more convenient to copy some other Template (perhaps page.php or index.php) to snarfer.php and then add the above five lines of code to the beginning of the file. That way, you will only have to alter the HTML and PHP code, instead of creating it all from the beginning. After creating and adding the Page Template in your Theme’s directory, see it as it will be available as a choice when you create or edit a Page. (Note: while creating or editing a Page, at least, one template is required which is defined in the above manner.)
4.6.4- Plugin API Hooks
While developing Themes, design it in a way so that it can be easily set up and work with compatibility with any WordPress plugin which user might install. Plugins are a set of code components that add functionality to WordPress via “Action Hooks” (see Plugin API for more information).
Most of the Action Hooks are available within the core PHP codes of WordPress, so no worries if your theme doesn™t have any special tags. There are some important Action Hooks that are most needed in a theme, in order to assist plugin in displaying the details correctly in the page body, header, footer, sidebar, and other section.
Here is a list of few major Action Hook Template Tags that you should include:
wp_head()
Goes in the <head> element of a theme, in header.php. Example plugin use: add
JavaScript code.
wp_footer()
Goes in footer.php, just before the closing </body> tag. Example plugin use: insert PHP code that needs to run after everything else, at the bottom of the footer. Very commonly used to insert web statistics code, such as Google Analytics.
wp_meta()
Typically goes in the <li>Meta</li> section of a Theme’s menu or sidebar; sidebar.php template. Example plugin use: include a rotating advertisement or a tag cloud.
comment_form()
Goes in comments.php directly before the file’s closing tag (</div>). Example plugin use:
display a comment preview.
In most of the cases, you may find these plugin hooks already installed in the
Themes/templates by default.
4.6.5- Template File Checklist
Prior to and post completing the development process of a theme, make sure you adhere
to these template file standards.
Document Head (header.php):
¢ Use the proper DOCTYPE
¢ The opening <html> tag should include language_attributes()
¢ The <meta> charset element should be placed before everything else, including the <title> element
¢ Use bloginfo() to set the <meta> charset and description elements
¢ Use wp_title() to set the <title> element. See why
¢ Use get_stylesheet_uri() to get the URL of the current theme stylesheet
¢ Use Automatic Feed Links to add feed links
¢ Add a call to wp_head() before the closing </head> tag. Plugins use this action hook to add their own scripts, stylesheets, and other functionality
This is an example of a finely-formatted HTML5 compliant head area:
Navigation Menus (header.php):
¢ Supported custom menu wp_nav_menu() in the main navigation of Theme
¢ Menus should consist of a large number of list items without breaking the design/layout. Also, there should be long support link titles in the menu
¢ Correctly display the submenu items. Keep the drop-down menu style for submenu items, if possible. Drop-drowns allow depth menu instead of just focusing on the top level
Widgets (sidebar.php):
¢ Widegtize your theme as much as possible. All the areas allowing widgets should not be left empty
¢ Content in the widgetized areas by default should disappear when widgets are enabled from Appearance > Widgets
Footer (footer.php):
¢ Use the wp_footer() call, to appear just before closing body tag.
<?php wp_footer(); ?>
</body>
</html>
Index (index.php):
¢ Display a list of posts in excerpt or full-length form. Choose one or the other as per your requirement.
¢ Support navigation links within posts by using wp_link_pages()
Archive (archive.php):
¢ Display archive title (tag, category, date-based, or author archives)
¢ Display a list of posts in excerpt or full-length form. Choose any as appropriate
¢ Include wp_link_pages() to support navigation links within posts
Pages (page.php):
¢ Display page title and page content
¢ Display comment list and comment form (unless comments are off)
¢ Include wp_link_pages() to support navigation links within a page
¢ Metadata such as tags, categories, date and the author should not be displayed
¢ Display an “Edit” link for logged-in users with edit permissions
Single Post (single.php):
¢ Support navigation links within a post by include wp_link_pages()
¢ Display post title and post content
¢ Plain text Title¢ Display the date of post
¢ Do not change the date and time format settings unless it’s so important. (Check in Administration Panels > Settings > General)
¢ Use the_time( get_option( ‘date_format’ ) ) for output based on user setting
¢ Display comment list and comment form
¢ Display post categories and post tags
¢ Display the author name (if needed)
¢ Display an “Edit” link for logged-in users with edit permissions
¢ Show navigation links to next and previous post using previous_post_link() and next_post_link()
Comments (comments.php):
¢ Highlight the Author comment uniquely
¢ Display gravatars (user avatars) if needed
¢ Support threaded comments
¢ Display trackbacks/pingbacks
¢ All functions should be in functions.php. No function definitions should be added in this file to avoid redeclaration errors
Search Results (search.php):
¢ Showcases a list of posts in excerpt or full-length form, choose which ever you want to read
¢ The search results page shows the search terms which generated the results. It is an easiest way to know the search history or even to remember what the user actually searched for. Use the_search_query() or get_search_query() (display or return the value, respectively).
For example:
<h2><?php printf( __( ‘Search Results for: %s’ ), ‘<span>’ . get_search_query() .
‘</span>’); ?
></h2>
¢It’s highly advised to include the search form again on the results page. Include it with:
get_search_form()
JavaScript:
¢ Carefully place JavaScript code in external files
¢ Use wp_enqueue_script() to load your scripts
¢ JavaScript loaded directly into HTML documents (template files) should be CDATA encoded to prevent errors in older browsers
<script type=”text/javascript”>
/* <![CDATA[ */
// content of your Javascript goes here/* ]]> */
</script>
Screenshot:
Now, create a screenshot of your theme, save it with a name screenshot.png and place it in the top-level directory. The screenshot should finely display the theme design; 600X450 is the recommended image size. Though the screenshot will be shown at 300×225 image size, but this doubled figure is required for high-resolution HiDPI displays.
Theme Options:
Theme Option screens are optionally supported by Themes. Use “edit_theme_options” while enabling the availability of the Theme Options screen for user instead of switch_themes unless the user actually wants to switch the themes.
Conclusion: Congratulations! You are successfully done with the foundation of your first WordPress website. Stay tuned for the next series of this post, to know how to design, decorate and add functionality to your website…..
But before, the second part goes live, I want to hear from you about your experiences, hurdles and even achievements while making your own WordPress project right from scratch.