This document provides instructions for modifying WordPress theme templates. It discusses breaking down HTML files into header, sidebar, footer, and other template files to convert an HTML site into a WordPress theme. It describes the basic structure of WordPress pages and common template files. It also provides specific guidance on customizing the header template, including changing the header image and styling elements like colors, fonts, and borders.
TataKelola dan KamSiber Kecerdasan Buatan v022.pdf
Â
WordPress Basics
1.
2. 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.
3. 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
4. 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.
6. 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
7. 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
8. 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.
9. 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.
10. 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
11. 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.
12. 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.
13. 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
14. 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
15. 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.
16. 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 .
17. Step 2: Wampserver Installation
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 .
18. Step 2: Wampserver Installation
Steps
Step 5 Step 6
If you are to Install the wampserver and then press Next .When finished
installing and then press Finish .
19. 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.
20. 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.
21. phpmyadmin
ï§ Both servers support the phpmyadmin database management tool,
ï§ accessible through the system tray menu.
22. 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.
23. 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
24. 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
25. 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
26. 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:
27. Breaking apart HTML files and modifying
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)
28. Breaking apart HTML files and modifying
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
29. 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>
30. 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;
}
31. Header Template - Styling Header
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.
32. Header Template - Styling Header
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
33. 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
35. 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
36. 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
?>
37. 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
38. 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
39. 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
40. 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
41. <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 -
42. </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
43. 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
44. 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.
45. 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
46. 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.
48. 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