SlideShare a Scribd company logo

Wordpress Guide

•
•
Sunanda Bansal
Sunanda Bansal

WordPress is a popular content management system (CMS) that allows users to easily create websites. It provides templates called themes that control the visual design and layout of a site. Users can customize a site by adding content like pages and blog posts, media files, plugins for additional functionality, and modifying theme and dashboard settings. WordPress powers millions of websites and is an open source project with an active community providing support.

1 of 39
Download to read offline
Popularly known as a CMS (Content Management System) and is in opinion of thousand developers, an amazing tool which can be used to create static content websites in a matter of minutes. WORDPRESS CONTENT MANAGEMENT SYSTEM
1 WORDPRESS CONTENT MANAGEMENT SYSTEM INTRODUCTION Wordpress is a great tool PURPOSE [Type the sidebar content. A sidebar is a standalone supplement to the main document. It is often aligned on the left or right of the page, or located at the top or bottom. Use the Drawing Tools tab to change the formatting of the sidebar text box.]
2 CONTENTS 1. Introduction a. Wordpress b. Prerequisites c. Help i. Google ii. Codex iii. Forums 2. Getting started a. Installation b. Understanding the basics – theory c. Dashboard says, “Feel at home”. d. Fresh look of the website e. Dashboard Settings 3. Conceptually – Dashboard Components a. Post b. Pages c. Media d. Themes e. Plugins f. Tools g. Settings 4. Level 0 – Explorer a. Step ZERO - Grab an Idea! b. Step I - Lorem Ipsum (create pages) c. Step II – Pick a lovely theme i. Theme options ii. Widgets iii. Header d. Step III – Create Content e. Step IV –Menu f. Step V – Plugin – Contact Us/ Registration 5. Level 1: Adventurer a. Theme Editor - Do‟s and Don‟ts 6. Level 2: Designer – Theme Development 7. Level 3: Developer – Plugin Development
3 INTRODUCTION ABOUT WORDPRESS
4 PREREQUISITES SOFTWARES (ASSUMING YOU ARE WORKING WITH WINDOWS) 1. Local Server e.g. Wamp Server 2. Wordpress (Zipped) - http://wordpress.org/download/ SKILLS 1. HTML, CSS 2. JavaScript 3. PHP (Won‟t harm you to know the basics) AN IDEA What exactly are you planning to create? If you have one, that is great. Try to use this tutorial to implement your idea. If you don‟t have one, well, we have to begin somewhere, right? So we‟ll take a general example to walk you through the basic to kick start right away. But I‟d still suggest the former approach. (Some fancy lines)
5 HELP Well yes, there will always be a time when you need some help, and yes, the first suggestion, I, or any other developer will put forward is, none other than: “GOOGLE” Even though we‟ve used it enough, we might not be able to make efficient use of it while looking for help. It‟s not a piece of cake, in the beginning. You don‟t get the results, if you don‟t search it right. I don‟t know about you, but I wasn‟t any good at keying the RIGHT words. Google will make your job easier by about 70%. If you know how to do it, Great! If you don‟t, you better learn soon enough. CODEX http://codex.wordpress.org/ - It‟s the online manual for WordPress and a living repository for WordPress information and documentation. Everything about WordPress technicalities, you can find it here. However, sometimes they might not provide many examples, and it might seem too complicated. At times like those, it‟s best to resort to help from someone who has sailed in your boat. And for that, you‟ve got these forums. FORUMS http://wordpress.org/support/ - Official Support forum. It‟s the place where you need help, and people help you out.
6 GETTING STARTED INSTALLATION Let‟s set this Wordpress thing up. So do you have everything needed? Yes, the softwares, Wamp and Wordpress. Yes? So let‟s begin. Just so you know, when I wrote this tut, I was using WordPress 3.6 and WampServer Version 2.2. Extract the WordPress (Zipped) that you downloaded. You are probably going to get this: Now Select all and Copy. (CTRL+A, CTRL+C) Now that we‟ve copied the entire folder we are going to go to C:/wamp/www/ Now create a New Folder. You can name it whatever you want but this is going to be used in the address you‟ll use to run you wordpress website, even if locally, so I‟d suggest keeping it short and related to your website. Let‟s say you named it “Cyclotron” (Let‟s assume you like the geeky names). Now PASTE the whole stuff you copied earlier inside this folder
7 (Note: Screenshots are just to give a bit of confidence that you are going in the right direction) So now, we need to setup the database before we start. We need to create a new Database. If you know how to do it skip the section below. Others should try it once by themselves, it‟s pretty obvious. Just for the sake of Open up your web browser, and Go to “http://localhost/phpmyadmin”. It will probably look something like this.
8 So you see the top navigation like: Click on database and it will show you a list of databases and create a database and just remember its name. We‟re going to need it. INSTALLING WORDPRESS Step 1 – Create a config file There are two ways to do it, first is to open your web browser and go to url . Note that cyclotron here refers to the name of the folder inhttp://localhost/cyclotron C:/wamp/www/ that you created. Go ahead click “Create a Configuration file”.
9 “Let‟s Go!” You have to give you database name here. It‟s “cyclotron_db” in our case. If you didn‟t change anything then the Username and password of database services provided by wamp server are “root” and “” respectively. Yes password is an empty string, so just leave it empty.
10 All right sparky! It‟s time to “Run the install”. And your installation is done. Now all you need to do is do some basic admin registration for your website. Be careful and choose a good username and password and remember it. While you are using wordpress at localhost, its best to not forget your password as you might not be able to recover it easily. Well, to be honest, I always kept the used admin-admin approach. I kept both username and password to be same – “admin”. But one should take care for security reasons. “Install WordPress”
11 “Log in” Enter your credentials. And you‟ll be redirected to your Dashboard.
12 UNDERSTANDING THE BASICS – THEORY Before we begin with the technicalities of using WordPress it won‟t harm to talk about the basic structure of wordpress, for a brief moment. It‟s like a stage. You work in the background to create a show. Dashboard is that stage behind the curtains. You do all your work here and the end result - the final presentation will be reflected on the front end, the website. DASHBOARD If your website URL is “http://www.cyclotorn.com/” then the wordpress admin login will be at “http://www.cyclotron.com/wp-admin“ In our case it is http://localhost/cyclotron/wp-admin. It gives you options to –  Write content. Categorize it.  Choose how the site looks.  Add functionalities to your website.  Add members to contribute to your website. FRONT END Simply shows you the output. You can see it by going to the URL- http://localhost/cyclotron. It‟s like a simple Input-Process-Output Model. INPUT - DASHBOARD PROCESS - WORDPRESS OUTPUT - SITE
13 DASHBOARD SAYS, “FEEL AT HOME”. Let‟s take a quick look at navigation, so that you don‟t feel lost. Your Home. •The first page you see every time you login. •Keeps you updated about wordpress Content area - This is where you manage your content Customizing •Looks •Functionalities Admin Priviliges •Managing user, permissions •Using tools •Settings WordPress ADMIN BAR Workspace NAVIGATION
14 FRESH LOOK OF YOUR WEBSITE IN your dashboard, in the top-left corner, you‟ll see a dropdown hang to the name of you website. “Visit site”. Click on it to visit your website. Your website will look something like this if you are using wordpress 3.6. The default theme for Wordpress 3.6 is “twentythirteen” and it looks like below. How a post looks like – Click on “Hello world!”. And that‟s how a comment looks like – “One thought on „Hello World‟”.
15 How a page looks like When you click on sample page, which is right below the header, in the navigation, you are redirected to a page that looks like this:
16 DASHBOARD SETTINGS
17 CONCEPTUALLY Dashboard Components POSTS A typical post has - Data/Idea/Information - Category - Creator/Author - Comments - Tags - Featured Image - Excerpt So a post is basically something you can categorize and have authorship over. In a typical blog, a post is your new blog entry. These are meant to be scalable to a huge extent. Search in a typical wordpress site is meant to search for posts that match your query. Typical Post Examples – “Shifted to a new office”, “Working with rails”, “Building up a Management System”. So they are basically like blog posts. You may use them or you may not use them, because in most of the static websites, (which are not blogging websites) we don‟t need blog posts like that. We usually have 5-10 pages of static content which are to be showcased on the website. PAGE A page is necessarily just heading and content. You don‟t categorize pages, you don‟t tag them, and you are not the author. Pages belong to the website and are meant to just display some information. They‟re static, mostly the same. We don‟t change the content of pages often. Typical Page examples – About Us, Contact us, Our Work. Pages are used most in making of static websites which showcase their information for they solve the bare minimum purpose of a title and content.
18 MEDIA Everything that you are going to use in your website has to be there on the server. So what you can do is upload you stuff in the media library. Mostly it is meant to be used for images only, but it sure can be used to upload other stuff as well. The only thing is that the upload size has a limitation, which is usually fair enough. So, I guess it won‟t be possible to make a website in wordpress where you can watch movies online or something like that, by uploading movies to your server, as the limit for wordpress is around 2-8 MB. Though, you sure can embed HTML in your pages/posts and thus embed videos hosted on other servers. THEMES Wordpress community is huge and you can find several people contributing to wordpress by making themes for free. Some put License restrictions on usage, but then basic wordpress themes namely “twentyeleven”, “twentytwelve” and “twentythirteen” are absolutely free to use. Themes will decide how your website will look like, mostly. Some parts of theme are customizable like header, navigation bar, colors (in some themes), website title, sidebar, footer (varies from theme to theme). PLUGINS Wordpress Plugins are functionalities that you can „Plug‟ into your wordpress installation. The most commonly used example is of such functionalities is HTML Forms. Suppose you need functionality in wordpress to get user input and store it or email it to your id, you‟re going to need some plugin. Plugins are developed by other wordpress users who understand how to play along with wordpress and get your job done. You don‟t need to get into those details, not yet. TOOLS Import/Export SETTINGS
19
20 TODDLER – LEVEL ZERO GRAB AN IDEA! From here on we are going to make a complete website, so we need to be clear about what we want the end result to be like. In case you are not sure what you want to make initially we‟ll grab on to the following example and make fully functional website. Otherwise you can use to following steps to create your idea into a beautiful wordpress site. OUR EXEMPLARY IDEA:  Home (Landing page)  Portfolio (Showcasing our work) o Wordpress o Magento o Ruby On Rails o PHP CodeIgniter o Razor (.NET Framework 4 MVC)  Services o Web Development o Consulting o Training  Team  Contact us (Contact Us form + Google Maps) How much time do you think it’ll take? CONTENT PAGE HEADER Portfolio Services Team Contact UsHome
21 STEP I – LOREM IPSUM Besides the times when you are just learning, there will be times when you just won‟t know what to write. You‟ll have no content at all, and won‟t feel like beginning the project. Well, that‟s we lorem- ipsum comes to your rescue. “Lorem Ipsum” is a widely used text for writing temporary content. You can find a variety of sites out there which provide the “lorem ipsum” text for web developers/designers. I personally prefer http://html-ipsum.com/. And we will be using this same text for our website as well, since content may vary depending on the purpose of website. STEP II – PICK A LOVELY THEME So well if you‟ve just turned your Computer “ON”, it‟s time to create “Cyclotron”. So go to your web browser and go to .http://localhost/cyclotron/wp-admin Login with your username and password and you get the dashboard to manage your site. No look in the left side menu, for a tab named “Appearance”. Click “Themes”. You‟ll come to a page which shows the active theme and other themes that are locally available or have been previously developed. Moreover if you are connected to internet, you can browse themes by clicking on “Install Themes” and download them to your wordpress installation/website.
22 You can give keywords for search or define some parameters or just click search. Well my keyword was “responsive” and I picked a theme called “Clean Retina”. You could pick any theme you like. You can also choose to preview theme before you install it.
23 After installing the theme, you may or may not activate it immediately. You can opt for a live preview before finalizing a theme. NEW LOOK: While selecting a theme there are some things you may need to watch out for: What are you looking for in a theme?  Theme matching the profile of the website content – Elegant theme for a Business Site and Creative theme for artistic websites.  Good typography  Theme that solves the purpose – o Does it have a slider like we need o Does it support sidebars o Is it responsive  Theme options – Always handy  License of the theme
24 THEME OPTIONS Go to Appearance > Theme options Theme options are provided by the theme designer to help you customize the theme according to your need. I‟ll leave it to you to figure out how to use these options to your advantage. WIDGETS Go to Appearance > Widgets. Keep it open in one tab. And in the other tab open the front end http://localhost/cyclotron.
25 Appearance > Widgets Sidebar So as you can see the widgets are the blocks that will be added in the sidebar. HEADER Go to Appearance > Header - It allows you customize header in several ways which I‟ll leave for the reader to do as an exercise.
26 STEP III – CREATE CONTENT Now we have the theme laid out and we have clue about how it‟ll look. We can always switch to another theme, though it may have some overhead. Now it‟s time to create content. So first step would be to distinguish which content goes in Pages and which content goes in Posts. Well it takes some experimenting to understand the difference in usability of both, but for now we‟ll go by this rule – Single page content – “PAGE” Display of Excerpts of multiple pages on a single page – “POST” with Categories (We‟ll get there) So revisiting our Exemplary Idea:  Home (Landing page)  Portfolio (Showcasing our work) o Wordpress o Magento o Ruby On Rails o PHP CodeIgniter o Razor (.NET Framework 4 MVC)  Services o Web Development o Consulting o Training  Team  Contact us (Contact Us form + Google Maps) We figure out that Team, Home, Services, Web Development, Consulting, Training, Contact us are going to be single pages and Wordpress, Magento, Ruby on Rails, PHP CodeIgniter, Razor are categories. We are going to have some dummy posts, for each category mentioned above. It may make no sense right now, but once you are done adding content we‟ll move forward to creating navigation menu. ADDING A CATEGORY It is also pretty simple and can be done by going to posts>categories and that‟s all you need to add new categories. You can set the default category by going to Settings > Writing Default post Category. By default „uncategorized‟ is the default category.
27 ADDING A PAGE It‟s pretty simple and I won‟t go through the trouble of guiding you with screenshots, so go ahead make some dummy pages titled Team, Home, Services, Web Development, Consulting, Training and Contact us. And go ahead and disable Sample page or we can say, change its status from „Published‟ to „Draft‟. (You can Quick Edit sample page) ADDING A POST A post has quite a many options that you might need to know about except title and body. 1. YOU CAN ASSIGN POSTS A CATEGORY
28 2. SET FEATURED IMAGE (LOOKS NICE, TRUST ME) 3. YOU CAN ADD EXCERPT 4. ADD TAGS Now I am assuming that you‟ve create some content. Below are the screenshots of how some things in your dashboard should look like. PAGES > ALL PAGES
29 POSTS > CATEGORIES POSTS > ALL POSTS Add as many posts as you want. For the sake of demonstration only, I‟ve added about 4-5 posts.
30 PART IV – MENU Now we‟ve got our content just right, now its time to create a navigation menu. Go to Appearance > Menu PAGES Select the pages from the left side tab and click „Add to Menu‟. Now drag and drop and create structure as given below.
31 CATEGORIES Now in the categories tab, select the categories you want to show in the navigation and then „Add to Menu‟.
32 LINKS Now we need a container for these categories which doesn‟t redirect to any other page. So we‟ll use link as given below. Now we will rearrange the structure and get our final navigation menu.
33 USING THE MENU IN THE THEME We can create several menus at one time, and make them distinct by giving them name. In previous examples I used the name Top while saving the menu for the first time. So we‟ll visit the site and hover on left side of wordpress admin bar which says something like “cyclotron website” in our case, and go to customization > Static Front page > Static page > Front page > Home. We could have made these settings from the Dashboards > Settings > Reading as well. Here we need to understand that the landing page for a wordpress site is by default the latest posts of that blog. However, this can be changed and a static page can be made the landing page and that‟s exactly what we are going to do. Below are the steps to do the same from dashboard.
34
35 STEP V – PLUGIN While working with wordpress you might need to perform some actions which are beyond the scope of HTML, CSS, or JavaScript. Rather you‟ll need database access or PHP to do some stuff. Instead of doing it directly, we will use plugins. I‟ll be guiding you through but I‟ll leave it to you to make it work. For the start lets use a simple plugin. The purpose: On contact us page, we want a registration form. Plugin: Visual form builder. Steps: 1. Go to Dashboard > Plugins >Add new > “Visual Form Builder” – Search plugins > Install Now > Pop up – “Do you want install this plugin?” – Why not? (Means „OK‟) > Activate. 2. Look in the left side navigation below Settings, you‟ll see visual form builder. 3. Visual form builder > Add new
36 4. Pick some fields. Try some stuff and „Save form‟. For example, I did this: 5. Go to Pages >All page > Contact US > Edit 6. Add form and select your form, „Insert form‟. 7. Something like [vfb id=1] appears in your text box. So this is the Shortcode for the form. Wordpress plugin uses this to insert a form wherever this is written. Shortcodes are usually of the form [some_shortcode id=1234]. 8. Now update and got your page and it looks something like this.
37 Now you can fill this form, and go to your dashboard and check Visual Form Builder > All entries. You can configure this plugin to send emails to you as well. Though, note this, emails cannot be sent from localhost. You can use various other plugins; among the most popular is Contact Form 7. So now, we are done with creating a basic website. And since it is you first time, you could have taken about 2-3 hours to do this, but the same amount of work can be done in duration far less once you start understanding how this works. WELCOME TO WORDPRESS.
38

More Related Content

Wordpress Guide

  • 1. Popularly known as a CMS (Content Management System) and is in opinion of thousand developers, an amazing tool which can be used to create static content websites in a matter of minutes. WORDPRESS CONTENT MANAGEMENT SYSTEM
  • 2. 1 WORDPRESS CONTENT MANAGEMENT SYSTEM INTRODUCTION Wordpress is a great tool PURPOSE [Type the sidebar content. A sidebar is a standalone supplement to the main document. It is often aligned on the left or right of the page, or located at the top or bottom. Use the Drawing Tools tab to change the formatting of the sidebar text box.]
  • 3. 2 CONTENTS 1. Introduction a. Wordpress b. Prerequisites c. Help i. Google ii. Codex iii. Forums 2. Getting started a. Installation b. Understanding the basics – theory c. Dashboard says, “Feel at home”. d. Fresh look of the website e. Dashboard Settings 3. Conceptually – Dashboard Components a. Post b. Pages c. Media d. Themes e. Plugins f. Tools g. Settings 4. Level 0 – Explorer a. Step ZERO - Grab an Idea! b. Step I - Lorem Ipsum (create pages) c. Step II – Pick a lovely theme i. Theme options ii. Widgets iii. Header d. Step III – Create Content e. Step IV –Menu f. Step V – Plugin – Contact Us/ Registration 5. Level 1: Adventurer a. Theme Editor - Do‟s and Don‟ts 6. Level 2: Designer – Theme Development 7. Level 3: Developer – Plugin Development
  • 5. 4 PREREQUISITES SOFTWARES (ASSUMING YOU ARE WORKING WITH WINDOWS) 1. Local Server e.g. Wamp Server 2. Wordpress (Zipped) - http://wordpress.org/download/ SKILLS 1. HTML, CSS 2. JavaScript 3. PHP (Won‟t harm you to know the basics) AN IDEA What exactly are you planning to create? If you have one, that is great. Try to use this tutorial to implement your idea. If you don‟t have one, well, we have to begin somewhere, right? So we‟ll take a general example to walk you through the basic to kick start right away. But I‟d still suggest the former approach. (Some fancy lines)
  • 6. 5 HELP Well yes, there will always be a time when you need some help, and yes, the first suggestion, I, or any other developer will put forward is, none other than: “GOOGLE” Even though we‟ve used it enough, we might not be able to make efficient use of it while looking for help. It‟s not a piece of cake, in the beginning. You don‟t get the results, if you don‟t search it right. I don‟t know about you, but I wasn‟t any good at keying the RIGHT words. Google will make your job easier by about 70%. If you know how to do it, Great! If you don‟t, you better learn soon enough. CODEX http://codex.wordpress.org/ - It‟s the online manual for WordPress and a living repository for WordPress information and documentation. Everything about WordPress technicalities, you can find it here. However, sometimes they might not provide many examples, and it might seem too complicated. At times like those, it‟s best to resort to help from someone who has sailed in your boat. And for that, you‟ve got these forums. FORUMS http://wordpress.org/support/ - Official Support forum. It‟s the place where you need help, and people help you out.
  • 7. 6 GETTING STARTED INSTALLATION Let‟s set this Wordpress thing up. So do you have everything needed? Yes, the softwares, Wamp and Wordpress. Yes? So let‟s begin. Just so you know, when I wrote this tut, I was using WordPress 3.6 and WampServer Version 2.2. Extract the WordPress (Zipped) that you downloaded. You are probably going to get this: Now Select all and Copy. (CTRL+A, CTRL+C) Now that we‟ve copied the entire folder we are going to go to C:/wamp/www/ Now create a New Folder. You can name it whatever you want but this is going to be used in the address you‟ll use to run you wordpress website, even if locally, so I‟d suggest keeping it short and related to your website. Let‟s say you named it “Cyclotron” (Let‟s assume you like the geeky names). Now PASTE the whole stuff you copied earlier inside this folder
  • 8. 7 (Note: Screenshots are just to give a bit of confidence that you are going in the right direction) So now, we need to setup the database before we start. We need to create a new Database. If you know how to do it skip the section below. Others should try it once by themselves, it‟s pretty obvious. Just for the sake of Open up your web browser, and Go to “http://localhost/phpmyadmin”. It will probably look something like this.
  • 9. 8 So you see the top navigation like: Click on database and it will show you a list of databases and create a database and just remember its name. We‟re going to need it. INSTALLING WORDPRESS Step 1 – Create a config file There are two ways to do it, first is to open your web browser and go to url . Note that cyclotron here refers to the name of the folder inhttp://localhost/cyclotron C:/wamp/www/ that you created. Go ahead click “Create a Configuration file”.
  • 10. 9 “Let‟s Go!” You have to give you database name here. It‟s “cyclotron_db” in our case. If you didn‟t change anything then the Username and password of database services provided by wamp server are “root” and “” respectively. Yes password is an empty string, so just leave it empty.
  • 11. 10 All right sparky! It‟s time to “Run the install”. And your installation is done. Now all you need to do is do some basic admin registration for your website. Be careful and choose a good username and password and remember it. While you are using wordpress at localhost, its best to not forget your password as you might not be able to recover it easily. Well, to be honest, I always kept the used admin-admin approach. I kept both username and password to be same – “admin”. But one should take care for security reasons. “Install WordPress”
  • 12. 11 “Log in” Enter your credentials. And you‟ll be redirected to your Dashboard.
  • 13. 12 UNDERSTANDING THE BASICS – THEORY Before we begin with the technicalities of using WordPress it won‟t harm to talk about the basic structure of wordpress, for a brief moment. It‟s like a stage. You work in the background to create a show. Dashboard is that stage behind the curtains. You do all your work here and the end result - the final presentation will be reflected on the front end, the website. DASHBOARD If your website URL is “http://www.cyclotorn.com/” then the wordpress admin login will be at “http://www.cyclotron.com/wp-admin“ In our case it is http://localhost/cyclotron/wp-admin. It gives you options to –  Write content. Categorize it.  Choose how the site looks.  Add functionalities to your website.  Add members to contribute to your website. FRONT END Simply shows you the output. You can see it by going to the URL- http://localhost/cyclotron. It‟s like a simple Input-Process-Output Model. INPUT - DASHBOARD PROCESS - WORDPRESS OUTPUT - SITE
  • 14. 13 DASHBOARD SAYS, “FEEL AT HOME”. Let‟s take a quick look at navigation, so that you don‟t feel lost. Your Home. •The first page you see every time you login. •Keeps you updated about wordpress Content area - This is where you manage your content Customizing •Looks •Functionalities Admin Priviliges •Managing user, permissions •Using tools •Settings WordPress ADMIN BAR Workspace NAVIGATION
  • 15. 14 FRESH LOOK OF YOUR WEBSITE IN your dashboard, in the top-left corner, you‟ll see a dropdown hang to the name of you website. “Visit site”. Click on it to visit your website. Your website will look something like this if you are using wordpress 3.6. The default theme for Wordpress 3.6 is “twentythirteen” and it looks like below. How a post looks like – Click on “Hello world!”. And that‟s how a comment looks like – “One thought on „Hello World‟”.
  • 16. 15 How a page looks like When you click on sample page, which is right below the header, in the navigation, you are redirected to a page that looks like this:
  • 18. 17 CONCEPTUALLY Dashboard Components POSTS A typical post has - Data/Idea/Information - Category - Creator/Author - Comments - Tags - Featured Image - Excerpt So a post is basically something you can categorize and have authorship over. In a typical blog, a post is your new blog entry. These are meant to be scalable to a huge extent. Search in a typical wordpress site is meant to search for posts that match your query. Typical Post Examples – “Shifted to a new office”, “Working with rails”, “Building up a Management System”. So they are basically like blog posts. You may use them or you may not use them, because in most of the static websites, (which are not blogging websites) we don‟t need blog posts like that. We usually have 5-10 pages of static content which are to be showcased on the website. PAGE A page is necessarily just heading and content. You don‟t categorize pages, you don‟t tag them, and you are not the author. Pages belong to the website and are meant to just display some information. They‟re static, mostly the same. We don‟t change the content of pages often. Typical Page examples – About Us, Contact us, Our Work. Pages are used most in making of static websites which showcase their information for they solve the bare minimum purpose of a title and content.
  • 19. 18 MEDIA Everything that you are going to use in your website has to be there on the server. So what you can do is upload you stuff in the media library. Mostly it is meant to be used for images only, but it sure can be used to upload other stuff as well. The only thing is that the upload size has a limitation, which is usually fair enough. So, I guess it won‟t be possible to make a website in wordpress where you can watch movies online or something like that, by uploading movies to your server, as the limit for wordpress is around 2-8 MB. Though, you sure can embed HTML in your pages/posts and thus embed videos hosted on other servers. THEMES Wordpress community is huge and you can find several people contributing to wordpress by making themes for free. Some put License restrictions on usage, but then basic wordpress themes namely “twentyeleven”, “twentytwelve” and “twentythirteen” are absolutely free to use. Themes will decide how your website will look like, mostly. Some parts of theme are customizable like header, navigation bar, colors (in some themes), website title, sidebar, footer (varies from theme to theme). PLUGINS Wordpress Plugins are functionalities that you can „Plug‟ into your wordpress installation. The most commonly used example is of such functionalities is HTML Forms. Suppose you need functionality in wordpress to get user input and store it or email it to your id, you‟re going to need some plugin. Plugins are developed by other wordpress users who understand how to play along with wordpress and get your job done. You don‟t need to get into those details, not yet. TOOLS Import/Export SETTINGS
  • 20. 19
  • 21. 20 TODDLER – LEVEL ZERO GRAB AN IDEA! From here on we are going to make a complete website, so we need to be clear about what we want the end result to be like. In case you are not sure what you want to make initially we‟ll grab on to the following example and make fully functional website. Otherwise you can use to following steps to create your idea into a beautiful wordpress site. OUR EXEMPLARY IDEA:  Home (Landing page)  Portfolio (Showcasing our work) o Wordpress o Magento o Ruby On Rails o PHP CodeIgniter o Razor (.NET Framework 4 MVC)  Services o Web Development o Consulting o Training  Team  Contact us (Contact Us form + Google Maps) How much time do you think it’ll take? CONTENT PAGE HEADER Portfolio Services Team Contact UsHome
  • 22. 21 STEP I – LOREM IPSUM Besides the times when you are just learning, there will be times when you just won‟t know what to write. You‟ll have no content at all, and won‟t feel like beginning the project. Well, that‟s we lorem- ipsum comes to your rescue. “Lorem Ipsum” is a widely used text for writing temporary content. You can find a variety of sites out there which provide the “lorem ipsum” text for web developers/designers. I personally prefer http://html-ipsum.com/. And we will be using this same text for our website as well, since content may vary depending on the purpose of website. STEP II – PICK A LOVELY THEME So well if you‟ve just turned your Computer “ON”, it‟s time to create “Cyclotron”. So go to your web browser and go to .http://localhost/cyclotron/wp-admin Login with your username and password and you get the dashboard to manage your site. No look in the left side menu, for a tab named “Appearance”. Click “Themes”. You‟ll come to a page which shows the active theme and other themes that are locally available or have been previously developed. Moreover if you are connected to internet, you can browse themes by clicking on “Install Themes” and download them to your wordpress installation/website.
  • 23. 22 You can give keywords for search or define some parameters or just click search. Well my keyword was “responsive” and I picked a theme called “Clean Retina”. You could pick any theme you like. You can also choose to preview theme before you install it.
  • 24. 23 After installing the theme, you may or may not activate it immediately. You can opt for a live preview before finalizing a theme. NEW LOOK: While selecting a theme there are some things you may need to watch out for: What are you looking for in a theme?  Theme matching the profile of the website content – Elegant theme for a Business Site and Creative theme for artistic websites.  Good typography  Theme that solves the purpose – o Does it have a slider like we need o Does it support sidebars o Is it responsive  Theme options – Always handy  License of the theme
  • 25. 24 THEME OPTIONS Go to Appearance > Theme options Theme options are provided by the theme designer to help you customize the theme according to your need. I‟ll leave it to you to figure out how to use these options to your advantage. WIDGETS Go to Appearance > Widgets. Keep it open in one tab. And in the other tab open the front end http://localhost/cyclotron.
  • 26. 25 Appearance > Widgets Sidebar So as you can see the widgets are the blocks that will be added in the sidebar. HEADER Go to Appearance > Header - It allows you customize header in several ways which I‟ll leave for the reader to do as an exercise.
  • 27. 26 STEP III – CREATE CONTENT Now we have the theme laid out and we have clue about how it‟ll look. We can always switch to another theme, though it may have some overhead. Now it‟s time to create content. So first step would be to distinguish which content goes in Pages and which content goes in Posts. Well it takes some experimenting to understand the difference in usability of both, but for now we‟ll go by this rule – Single page content – “PAGE” Display of Excerpts of multiple pages on a single page – “POST” with Categories (We‟ll get there) So revisiting our Exemplary Idea:  Home (Landing page)  Portfolio (Showcasing our work) o Wordpress o Magento o Ruby On Rails o PHP CodeIgniter o Razor (.NET Framework 4 MVC)  Services o Web Development o Consulting o Training  Team  Contact us (Contact Us form + Google Maps) We figure out that Team, Home, Services, Web Development, Consulting, Training, Contact us are going to be single pages and Wordpress, Magento, Ruby on Rails, PHP CodeIgniter, Razor are categories. We are going to have some dummy posts, for each category mentioned above. It may make no sense right now, but once you are done adding content we‟ll move forward to creating navigation menu. ADDING A CATEGORY It is also pretty simple and can be done by going to posts>categories and that‟s all you need to add new categories. You can set the default category by going to Settings > Writing Default post Category. By default „uncategorized‟ is the default category.
  • 28. 27 ADDING A PAGE It‟s pretty simple and I won‟t go through the trouble of guiding you with screenshots, so go ahead make some dummy pages titled Team, Home, Services, Web Development, Consulting, Training and Contact us. And go ahead and disable Sample page or we can say, change its status from „Published‟ to „Draft‟. (You can Quick Edit sample page) ADDING A POST A post has quite a many options that you might need to know about except title and body. 1. YOU CAN ASSIGN POSTS A CATEGORY
  • 29. 28 2. SET FEATURED IMAGE (LOOKS NICE, TRUST ME) 3. YOU CAN ADD EXCERPT 4. ADD TAGS Now I am assuming that you‟ve create some content. Below are the screenshots of how some things in your dashboard should look like. PAGES > ALL PAGES
  • 30. 29 POSTS > CATEGORIES POSTS > ALL POSTS Add as many posts as you want. For the sake of demonstration only, I‟ve added about 4-5 posts.
  • 31. 30 PART IV – MENU Now we‟ve got our content just right, now its time to create a navigation menu. Go to Appearance > Menu PAGES Select the pages from the left side tab and click „Add to Menu‟. Now drag and drop and create structure as given below.
  • 32. 31 CATEGORIES Now in the categories tab, select the categories you want to show in the navigation and then „Add to Menu‟.
  • 33. 32 LINKS Now we need a container for these categories which doesn‟t redirect to any other page. So we‟ll use link as given below. Now we will rearrange the structure and get our final navigation menu.
  • 34. 33 USING THE MENU IN THE THEME We can create several menus at one time, and make them distinct by giving them name. In previous examples I used the name Top while saving the menu for the first time. So we‟ll visit the site and hover on left side of wordpress admin bar which says something like “cyclotron website” in our case, and go to customization > Static Front page > Static page > Front page > Home. We could have made these settings from the Dashboards > Settings > Reading as well. Here we need to understand that the landing page for a wordpress site is by default the latest posts of that blog. However, this can be changed and a static page can be made the landing page and that‟s exactly what we are going to do. Below are the steps to do the same from dashboard.
  • 35. 34
  • 36. 35 STEP V – PLUGIN While working with wordpress you might need to perform some actions which are beyond the scope of HTML, CSS, or JavaScript. Rather you‟ll need database access or PHP to do some stuff. Instead of doing it directly, we will use plugins. I‟ll be guiding you through but I‟ll leave it to you to make it work. For the start lets use a simple plugin. The purpose: On contact us page, we want a registration form. Plugin: Visual form builder. Steps: 1. Go to Dashboard > Plugins >Add new > “Visual Form Builder” – Search plugins > Install Now > Pop up – “Do you want install this plugin?” – Why not? (Means „OK‟) > Activate. 2. Look in the left side navigation below Settings, you‟ll see visual form builder. 3. Visual form builder > Add new
  • 37. 36 4. Pick some fields. Try some stuff and „Save form‟. For example, I did this: 5. Go to Pages >All page > Contact US > Edit 6. Add form and select your form, „Insert form‟. 7. Something like [vfb id=1] appears in your text box. So this is the Shortcode for the form. Wordpress plugin uses this to insert a form wherever this is written. Shortcodes are usually of the form [some_shortcode id=1234]. 8. Now update and got your page and it looks something like this.
  • 38. 37 Now you can fill this form, and go to your dashboard and check Visual Form Builder > All entries. You can configure this plugin to send emails to you as well. Though, note this, emails cannot be sent from localhost. You can use various other plugins; among the most popular is Contact Form 7. So now, we are done with creating a basic website. And since it is you first time, you could have taken about 2-3 hours to do this, but the same amount of work can be done in duration far less once you start understanding how this works. WELCOME TO WORDPRESS.
  • 39. 38