Wordpress

This learning objective will teach you the basics of WordPress
theme creation. We should start by reviewing word press
objectives. Our goal is to make learning easy and enjoyable. No
prior experience with CMS, database or server-side scripting is
required. However, you should be comfortable coding with
HTML and CSS.
HTML 2 WordPress features video screencast tutorials.

Objectives
HTML WordPress teaches web designers and front-end developers, with no prior
experience on CMSs, how to set up WP, to convert an HTML site into a basic
WP theme and to add simple customization into their themes. Learners will be
able to:
Set up a mySQL database for WP and install WP
Make WP site secure
Break apart HTML files and modify WP header, sidebar, containers, footer and
comments form templates
Install plug-ins to enhance the site’ viewing experience
Insert short code snippets to add extra features into their WP template

Benefits of using WordPress
1. Cheap or Free: Using WordPress for your website means it’s cheap or free.
WordPress itself is free.
2. It’s That Easy: WordPress is easy to use.
3. Do It Yourself: With WordPress you enter the Do-It-Yourself world. No more
waiting for and paying a programmer to fix a tiny error, saving you time and
money.
4. Many Users, Many Places: WordPress is online and offers multiple users,
which means you’re not the only one who can fix something in a pinch and
you can access it from anywhere. Which means if you’ve got Internet access
in Town , you could work from there. That also means your important site is
backed up on a secure server with multiple redundancies, not some high
school kid’s laptop.
5. Climb the Search Results: WordPress also makes it easier to optimize your
search engine results.

Tutorial OR Quiz
Assessment

Contents
Setting up a WAMP Server Read
•Installing a local Apache server Read
•Setting up a mySQL database for WP and installing WP Read
Making your WordPress site secure Read
Breaking apart HTML files and modifying WP templates Read
•Header template Read
•Sidebar template Read
•Footer template Read
•Comments Form template Read
Extra for enhancing site viewing experience
•Installing plug-ins Read
•Installing Themes Read
•Inserting short code snippets Read

Back to Main Menu

WordPress Objectives
The aim of this presentation is to provide some guidelines on
installing the Wordpress CMS within a Uniserver installation in a
learning manner which would be easy to apply.
Assumptions:
WAMP stack installed - wampserver or uniserver
Installation based on the previous WAMP presentation.
No Wordpress installed.
A database does not exist.
Using chrome browser (download screen shots)

Necessary Requirements to Install WAMP Server:
WAMP servers up and running
Archiving software
To extract Wordpress, as in:
7-Zip - http://www.7-zip.org/
To download WAMP server go to www.wordpress.com

Download Wordpress
Open the link to http://wordpress.org and click the download button.

Then click on the button similar to this. Download the word press
to use and create a website.

Choose the folder where you want the
download to take place.

Download Wordpress
Download the Wordpress link – Right click on the download folder.

Double click on download
archive to open the download
folder.

Drag the Wordpress folder to uniserver in
C:uniserverwww to install the Wordpress
these were the first steps towards the
Installation.

Checking the Servers
After downloading the Wordpress following steps should be taken to start the
server .
Open t he Apache Server – Program -3.1.1
Make sure that both Apache and MySQL are working – click on Start Both
Make sure that the indicator by the Apache and MySQL has turned into
green.

To view wordpress
database click on
phpMyAdmin.

Click on View www
to start the installation
and to start creating
the wordpress

Installing Wordpress to Start
Step 1: Click on Wordpress link under Served
Subdirectories in the window.

Step 2: Click on Create a Configuration File
Button to start the process.

Step 3: Then Click on Let’s go to start setting
up the database details.

Database configuration
 Enter root in both username and password fields .
DO NOT use these identification for a creation
setting.
 Leave other settings as it is.

 Switch over to the Uniserver relieve to setup the root user password – it
evades to no password. Wordpress expects a password to be resetset.
 Leave the password as root. Click change password option and close the
dialog box . Switch back to the browser.

Create Database
 Select the phpMyAdmin tab
from Apache server.
 Select Databases
 Enter in Wordpress under the Create
new database
 Click Create.
 A Wordpress database will appear
on the left if it is created successfully.
 Switch back to the Wordpress browser
tab and press the Submit button. Submit
 After a number of seconds the success page will appear and you can now
start configuring Wordpress...click Run the Install

WordPress Configuration
 Use any site title
 Username is for the administrator – username-
admin is ok
 Use ―password― for the admin’s password and
there is NO way of retrieving a forgotten
password even if you supply an email address.
 Click Install Wordpress to continue....

Back to Contents

Step 1: WAMP Installation

 Download and install WAMP.
 WampServer2.2a-x32.exe or Coral_8_0_0.exe are the current versions.
 The wampserver should place the following shortcut onto your desktop.

 Uniserver does not create a shortcut on to the desktop but will ask for a
folder for extracting in . Don't forget this folder location – C: is a good
choice.

Step 2: Wampserver Installation
Steps
Step 1 Step 2

Starts up with welcome wizard and then press Next . Check the I accept
the Licence Agreement radio button and then press Next .

Steps
Step 3 Step 4

Tick both checkboxes of select additional tasks and then press Next . Select
the destination location by browsing for the folder and then press Next .

Steps
Step 5 Step 6

If you are to Install the wampserver and then press Next .When finished
installing and then press Finish .

STEP 3: Wampserver installation
completion
2. This icon in the system tray should
be green. If it is yellow or red then
there may be another application
conflicting with WAMP and it means
it is not working

3. Left click on the icon to bring up
this dialog. Localhost will point
your browser to the default
webpage.

1. Leave this checkbox checked

4. If the installation was
successful you will have
the following page loaded
up in your browser.

Step 4: The Uniform Server
2. A dialog like this will
appear during the
extraction then disappear.

3. Using explorer locate
1. Double click on the
the c:uniserver folder.
Coral_8_0_0.exe or newer.
The contents should be as
Change the extract path to
reflected in the screen
reflect c: and click Extract.
capture.

4. Double click on 5. An installation conflict will
Start_as_program.exe to load the give you the above message.
server up as a program and not a Click on Start Both – the two
service. Installation is ok if you get red squares should turn green
the above message. Leave the
database password as is.

phpmyadmin

 Both servers support the phpmyadmin database management tool,
 accessible through the system tray menu.

STEP 4a: CMS installation in uniserver
 Download the latest wordpress distribution – at the
time of writing it was version 3.0.5 – it is currently 3.1
now.
 Open the uniserver system tray menu and click on the 1. Before the wordpress is
installed.
―WWW Root‖ menu to open the website in your
browser.
 Never delete any of the files in this folder yet. Extract
the wordpress archive into this folder. Copy the
contents of the c:uniserverwwwwordpress folder
into the c:uniserverwww folder.
 The c:uniserverwww folder you will be your working
copy and the c:uniserverwwwwordpress will be your
backup.
 Switch to your browser and refresh the page.

2. Files in c:uniserverwww 3. Files in c:uniserverwww
before the wordpress is after the wordpress is
extracted. extracted.

STEP 5: CMS initial configuration
1. Click the button to
create the configuration
file.
2. Click to
continue.

3. The database configuration needs to be set up
before wordpress will work.
• Set the username to root and the password to root.
•The database host and table prefix can be left as it
is.
Click the submit to continue. Back to Contents

Step 1: Switch off & on the Apache Servers

 Ensure both the Apache and the MySQL
servers have been stopped – red
indicators.
If you used
 Ensure both the “Start_as_a_program”
Apache and the MySQL
servers has been If you used
“Start_as_a_service”
started – green indicators.

Back to Contents

Securing Wordpress Site
Stay Updated – Wordpress should always be automatically or download the
wordpress package and install it.
Create Custom Secret Keys for your wp-config.php File – All the confidential details
for your wordpress site are stores in the wp-config.php in your wordpress root directory.
Secret key are one of information which is stored in that file.
Change the database Prefix – lot of basic sit setup stuff for wordpress is the same
across lots of sites. This is super convenient.
Hide your wordpress version – another good idea is to remove generator for your
wordpress.
Install Wordpress security Scan plugin - this is good plugin which scans your
wordpress installation and give the suggestion accordingly. This plugin will check
Password, File permissions, Database Security and Wordpress Admin protection.
Limit the number of failed Login Attempts – the plugin can also limit the attempts of
failed login. It is important is those cases where someone is trying to have a guess on
your password manually or using the root.
Ask the Apache password t Protect - you can protect your site with 01
authorization in easy steps.
Back to Contents

Breaking apart HTML files and modifying
WP templates
Before we can take our HTML-based site to
modify the wordpress templates, we need to
select a theme for wordpress. We should
first understand how WP creates a page. It is
very simple. WordPress builds a page like
we build something in Lego. We need to
break things down into the basic chunks and
then WP will put the right pieces together
based on what page we’re on. (Refer to the
WP Codex — Template Hierarchy for more
information.)
So the overall structure of a single page
looks like this:

WP templates
There are 8 main types of basic container pages
index.php: for your default and blog home page
single.php: for displaying a single post
page.php: for display static ―page‖ content
archive.php: for displaying listing of old posts
archives.php: for displaying a hierarchical list by post date or categories
search.php: for displaying search results
image.php: for displaying image galleries
links.php: for displaying listing of links
Each container page must include the following chunks
layout header (header.php)
layout sidebar (sidebar.php; optional)
layout footer (footer.php)

WP templates
Additional things a specific page might have, includes:
search box (searchform.php; typically found in the header or sidebar
template)
comments display and post form (comments.php; typically found in the
single and page templates)

And that is the basic structure to WordPress. Converting a HTML layout
into a WP theme is just a matter of dividing your layout into their
corresponding layout chunks and making sure your container pages load all
the right bits. That wasn’t so bad was it?

Back to Contents

Header Template – Blog Info
First step is to do a setup of blog info. And following are two ways to
do this:
You set the blog or website title and description in the Administration
> Settings >
General panel, and WordPress does the rest.
OR
The WordPress Classic Theme features the header code look like this
in the
wp-content/themes/classic/header.php template file:
<div id="header">
<div id="headerimg">
<h1>
<a href="<?php echo get_option('home'); ?>">
<?php bloginfo('name'); ?></a>
</h1>
<div class="description">
<?php bloginfo('description'); ?>
</div>
</div>
</div>

Header Template - Styling Header
The styles for the header are contained within the h1, header, headerimg, and
description CSS selectors. These are all found within the style.css, though may be
found in the styles in the header.php of the Theme which you are using. You will
have to check both places.
In the Classic Theme, the CSS for the header are found in one selector, the #header.
#header {
background: #90a090;
border-bottom: double 3px #aba;
border-left: solid 1px #9a9;
border-right: solid 1px #565;
border-top: solid 1px #9a9;
font: italic normal 230% 'Times New Roman', Times, serif;
letter-spacing: 0.2em;
margin: 0;
padding: 15px 10px 15px 60px;
}

The background color is set to a green shade and there is a border all the way around
the header which changes colors and also shadow effect. The Times font is set with a
size of 230% with a wider than normal letter spacing. The padding on the left side
indents the text in from the left.

All of these can be easily changed, giving the border a thicker width and making it all
the same color, changing the background color, the font size and style, the letter
spacing, and more by modifying the information in each style attribute.

The same is true of the Default WordPress Theme header, except there are more styles
to think about and they are found within the header.php's "head" tag and the style.css,
though once you have your styles set, you can move the information into your style
sheet.

The styles that control the header's look are found within the h1, header, headerimg, and
description CSS selectors. Just like the Classic Theme, find these references and make
your modifications there to change the look.

Changing the header image of the Default WordPress Theme has been simplified with
the introduction of a utility called Kubrickr. It simply asks you to supply a new image
file name for the header and then switches it for you, so you do not have to dig into the
code. If all you want to change is the header image, this is an extremely useful and easy
tool.

If you do want to get your hands into the code, dig into your header styles and make the
changes. Below is a simple tutorial on changing just the header image manually

Header Template –Changing the Header Image

There are many different header images and header art available for you to use to
change the image in the header in wordpress. The styles for the header image for the
Default or Kubrick WordPress Theme, and any Theme based upon that Theme, are
more complicated to change than those for the Classic Theme. The styles are found
within the styles in the header.php "head" section, as well as in the styles.css. To change
only the header image reference, open the header.php template file and look for the
styles like this:
#header {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/wc_header.jpg")
no-repeat bottom center; }
#headerimg {
margin: 7px 9px 0;
height: 192px;
width: 740px; }
Click on the icon given below to see the changes to the header image

Changes
to
header’s
Image

Back to Contents

Footer Template
The footer links within our themes can be edited very easily using the WordPress
Appearance Editor. They are not encrypted code, but editing the footer will require
a very basic understanding of HTML.
1. Navigate to the Appearance > Editor within the WordPress admin.
2. Choose the ―Footer‖ template from the list of templates on the right.
3. Within the template, you will need to edit the HTML code. An HTML link
within the footer will look similar to this:

<a href="http://www.organicthemes.com/themes/" target="_blank"><?php _e("Organic Theme Name",
'organicthemes'); ?></a>
4. Change the URL, title and theme name, or you can simply delete the code to
remove the link from the footer.
5. Do NOT delete any <div> tags, unless you are familiar with the code.
6. Update the file, and refresh your site to see the changes.

Back to Contents

Sidebar – Adding Extra sidebar

Adding Extra Sidebar to your WordPress Theme

Oh!… What’s this?? The theme has only one sidebar!
You need more than one and it is now too late to
switch to the theme with more than one sidebars. But
wait!! Let me teach you how to add an extra sidebar
or sidebars to your favourite theme. People who
know PHP will find it easy to follow as it is easy to
use the code that I have provided in this Quiz. I am
assuming that you already know HTML and a bit of
CSS.
Put this code into that file :-
if ( function_exists('register_sidebars') )
register_sidebars(2);

To start the Quiz press and to skip the quiz press
?>

Sidebar – Adding Extra sidebar
You can increase this number if you want
more sidebars and if your theme’s layout can
accommodate it. Now, when you go to your
WordPress admin section and browse to the
widgets under the menu item called
presentation, you will see two sidebars listed
there. You can drag your widget items into
any of the sidebars.

Now comes the part where we actually build
the sidebars. If your theme has only one
sidebar, try to locate a file called sidebar.php
in your theme folder. In this example, where
we are trying to modify the theme for two
sidebars, let’s rename sidebar.php to
sidebar1.php and make a new blank file
called sidebar2.php. Put this code into
sidebar2.php and save the file. Back to Contents

Quiz
To begin the tutorial, extract your theme into a folder and open it to see all
the files. If your theme has only one sidebar, then most probably you will
NOT find a file called functions.php in your theme folder. In that case you
will have to create this file yourself. Just open notepad or any other code
editor to start a new file. Put this code into that file :-
if ( function_exists('register_sidebars') )
register_sidebars(2);
Save the file as functions.php and put it in your theme folder. This piece of
code actually tells WordPress to register two sidebars for you (See
register_sidebars(2) in the code).

Press the icon to go to next icon

Back to Main Menu

Quiz
 Download Wordpress and Install Wordpress
 Download theme ―On Demand‖ and install into wordpress.
 Download plugin from google and install into wordpress
 And insert short codes into the plugin.

Back to Main Menu

Comment Form
The comments form are found within the comments.php or commentspopup.php. In
the Default WordPress Theme, they look like this when viewed as a generated web
page, click to view
While individual sections of the comments feature styling reference, the Default
Theme has no general comment division or group style reference, though one could
be easily be added.

The #commentform is the wrapper for the whole form, though the styles above it
may influence the #commentform as part of the CSS parent/child relationship.

As with the search form, you can style this with either a background color or image,
you can add borders, and you can change text color, font-family, font weight, text
decoration, etc. You are better to define width on each of these layout elements.
Remember, like the search form, the width of the column in which the comments
reside influences the width of the comments. If they are fixed, they may
overlap the sidebar.

Back to Contents

<h3 id="comments">One Response to "Hello world!"</h3>
<ol class="commentlist">
<li class="alt" id="comment-1">
<cite>
<a href="http://example.org/" rel="external nofollow">Mr WordPress</a>
</cite> Says:<br />
<small class="commentmetadata">
<a href="#comment-1" title="">Date and Time</a>
</small>
<p>Hi, this is a comment.</p>
</li>
</ol>
<h3 id="respond">Leave a Reply</h3>
<form action="http://example.com/blog/wp-comments-post.php" method="post" id="commentform">
<p>
<input name="author" id="author" value="" size="22" tabindex="1" type="text">
<label for="author">
<small>Name (required)</small>
</label>
</p>
<p>
<input name="email" id="email" value="" size="22" tabindex="2" type="text">
<label for="email">
<small>Mail (will not be published) required)</small>
</label>
Next -

</p>
<p>
<input name="url" id="url" value="" size="22" tabindex="3" type="text">
<label for="url">
<small>Website</small>
</label>
</p>
<p>
<small><strong>XHTML:</strong> You can use these
tags:....</small>
</p>
<p>
<textarea name="comment" id="comment" cols="100" rows="10" tabindex="4">
</textarea>
</p>
<p>
<input name="submit" id="submit" tabindex="5" value="Submit Comment" type="submit">
<input name="comment_post_ID" value="1" type="hidden">
</p>
</form>
</div>

Back to Comment

Install Themes
Word Press users may install and switch between themes. Themes allow users to
change the look and functionality of a Word Press website or installation without
altering the informational content. Themes may be installed by using the Word
press "Dashboard" administration tool, or by uploading theme folders via FTP.[8]
The PHP and HTML code in themes can also be edited for more advanced
customizations. Steps to follow:
 Download the theme from Google search for free Word press themes.Then
click the download button or link and you should be downloading a .zip file.
 Extract the .zip file on your PC.
 Upload the complete folder of your template to your Word Press installation
 Now that the files are uploaded, you just need to activate the template. To
activate it simply login to your WP installation on yourwebsite.com/wp-
login. php and go to Appearance > Themes and just select the new theme.
Click “Activate”. Now when you refresh your website, it should load
with the new Word Press theme.

Back to Contents

Installing Plugins
WordPress Plugins install in two ways. Automatic and manual.

To automatically install a WordPress Plugin, you must have the following FTP
access information ready.
Server Hostname for FTP access
FTP Username (not the same as your WordPress password)
FTP Password
Connection Type (FTP,
FTPS (SSL) )
Go to Plugins > Add New
and enter the name or
search term to find the
WordPress Plugin you
wish to add.

Installing Plugins
To install the WordPress Plugin manually:
Download the latest version of the
WordPress Plugin to your computer.
With an FTP program, access your site’s
server.
Upload (copy) the Plugin file(s) or folder to
the /wp-content/plugins folder.
In your WordPress Administration Panels,
click on Plugins from the menu at the top.
You should see your new Plugin listed. If
not, with your FTP program, check the folder
to see if it is installed. If it isn’t, upload the
file(s) again. If it is, delete the files and upload
them again.
To turn the WordPress Plugin on, click
Activate on the far right side of the list.
Check your Administration Panels or
WordPress blog to see if the Plugin is working. Back to Contents

Inserting ShortCode to Plugin
Easily insert any complicated HTML and JAVASCRIPT code or even custom PHP
output in your WordPress article. Adsense is a website where you can find short
code for any complicated plugin or HTML You can manage multiple code entries
easily.

After the installation of plugin you would setup the HTML or JavaScript entries in
the ' Code Insert Box' Settings menu. Simply define a unique name and paste the
complicated codes copied from AdSense into the text area. Then click on the
'Create a new entry' button.

After the creation, you can find that the newly added entry is shown in the
bottom. Copy the usage code example and insert it in your article in the HTML
text area. That's all

To view this please click on the given link.

Assessment
 To download the word press and install it onto the uniserver.
 Install the WAMP server
 Switch on and off the Apache server
 Securing word press site
 Breaking apart HTML files and modifying WP templates
 Editing Header layout template
 Editing Footer layout template
 Adding/Deleting and Updating Sidebar template
 Comment Form
 Installing Plugins
 Inserting shortcode to installed plugins

Back to Main Menu

Wordpress

More Related Content

What's hot (17)

Similar to Wordpress (20)

Recently uploaded (20)

Wordpress