Edward Cerullo's Sample WordPress Code Page

How to Create a WordPress Site Based on HTML and CSS

First, setup WordPress. This example uses TT (=Trondheim Tips) as the mnemonic. I used:

IP: 127.0.0.1:83
SQL: 3309
List: 441
Suffix: -3 for the wordpressMySQL-3 and wordpressApache-3 services running
Directory: C:\*HLQ*\ttwordpress-4.1-0 where *HLQ* is replaced with the actual high level dir name
Logon for the PHP Admin is: http://127.0.0.1:83/phpmyadmin/ use root for the userid

Then, download this blank WordPress theme from here: http://html5blank.com/

This will be a simple site, with one main page, and several secondary pages. The header and footer will be consistent for all the pages.

If you have any plug-ins installed, deactive them all, for now.

Add Pages. For this example, the first page is called Title, and secondary pages are:

Story Page
Article Page
Reference Page
Links Page
National Page
Religion Page
Military Page
Student Page
Calendar

Use the Order field on the right of the Add Page screen to order the pages for the WordPress default Navigation

Select the Settings/General screen to enter the Site Title, Date Format and Time Format. Be sure to Save Changes.

Select the Settings/Reading screen, and select Front Page Displays A Static Page, and select Title as the Front Page. Be sure to Save Changes.

Select the Appearance/Editor screen, and click on the Header page on the right. The WordPress editor is horrible, so you may want to use another one; I use Eclipse. The header.php file is in the C:\*HLQ*\ttwordpress-4.1-0\apps\wordpress\htdocs\wp-content\themes\html5blank-stable\html5blank-stable

Perhaps this can help with the Elipse configuration: http://www.javaguicodexample.com/pdtphpwordpress.html

In the header.php file, do the following:

Remove the wrapper div
Remove the existing shortcut icon.
Add a new shortcut icon in the same place.
Be sure to click Update File.

In the footer.php file, do the following:

Remove the wrapper /div which corresponds to the div in the header.php
Be sure to click Update File.

In the page.php file, do the following:

Note that the page.php file calls both the header.php and footer.php scripts.
Remove the entire line with this: 'the_title()'.
If you don't want a sidebar (and who does?), remove the get_sidebar() line.
If you don't want comments, remove the comments_template line.
Be sure to click Update File.

WordPress Variables

-Admin-

Name	Type	Description
$pagenow	(string)	In wp-admin
$post_type	(string)	In wp-admin
$allowedposttags	(array)
$allowedtags	(array)
$menu	(array)

-Version Variables-

Name	Type	Description
$wp_version	(string)	WordPress version
$wp_db_version	(int)	Version of the database
$required_php_version	(string)	Version of PHP required
$required_mysql_version	(string)	Version of MySQL required

-Browser Name-

Name	Type	Description
$is_gecko	(boolean)	FireFox
$is_chrome	(boolean)	Google Chrome
$is_IE	(boolean)	Internet Explorer

Code for determining which brower is being used


			?php
			global $is_gecko $is_chrome $is_IE
			if ($is_gecko) {
				echo "Firfox is the browser here...";
			} elseif ($is_chrome) {
				echo "Chrome is the browser here...";
			} elseif ($is_IE) {
				echo "IE is the browser here...";
			} else {
				echo "Something else is the browser here...";
			}
			?

-Webserver Name-

Name	Type	Description
$is_apache	(boolean)	Apache
$is_IIS	(boolean)	IIS

Code for determining which webserver is being used


			?php
			global $is_apache $is_IIS
			if ($is_apache) {
				echo "Apache is the webserver here...";
			} elseif ($is_IIS) {
				echo "IIS is the webserver here...";
			} else {
				echo "Something else is the webserver here...";
			}
			?

-Page Variables-

Name	Type	Description	Internals
$post	text	Text of the post	post_author, post_date, post_content, etc
$page	Integer	Number of the page
$numpages	Integer	Number of total pages
$pages	Array	All the pages
$more	Boolean	More pages?
$multipage	Boolean	More than one page?

Display all the variables in $post


			?php
			global $post;
			print_r($post);
			?

-User Variables-

Name	Type	Description	Internals
$current_user	text	User
$super_admins	array	Set this in wp-config.php to override users in the db.

Display the current user


			?php
			global $current_user;
			print_r($current_user);
			?

-Template Tags-

Name	Description	Example
the_title()	Gets the title
the_author()	Gets the author
the_category()	Gets the category
the_ID()	Gets the unique ID of a posting
the_permalink()	Gets the URL
the_time()	Gets the date and time the post was published
the_tags()	Gets the tags attached to the post
edit_post_link()	Shows the annoying "edit" link at the bottom of the screen.
comment_form()	Shows the annoying comment boxes.

-Posting Parameters for Query-

Name	Description	Example
p=#	For an individual posting id#
monthnum=#	For an individual posting month number#
day=#	For an individual posting day#
year=#	For an individual posting year#
author=#	For an individual posting author#
ignore_sticky_posts	Skip them

Sample Query for author and month

		
		$myPosts = new WP_Query('monthnum=11&author=1');
		
		Note that authors are an array, and you want the element number in the array.
		
		And reset afterwards:
		
		wp_reset_postdatat()
		wp_reset_query()

Let's create a simple and clean WordPress Theme for Dr. Vijay

First, create a site called www.vijay.no on the Kenny server.

He wants a header, a footer, and two side-by-side pictures. The left picture will be fixed, and the right picture can change daily. No sidebar. Because sidebars are ugly.

Next, create a theme dir in:

vvvwordpress-4.1-0\apps\wordpress\htdocs\wp-content\themes\Vijay's Theme 1

Version 1 -- Create four files in the new dir:

header.php

<?php /** * The template for displaying the header * * @package WordPress * @subpackage Vijays_Theme_1 * @since Vijay's Theme 1, version 1.0 */ ?> <html> <head> <title>Vijay's Literary Quote for the Day</title> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>"> <link id=i1 rel="shortcut icon" type="image/x-icon" href="http://upload.wikimedia.org/wikipedia/commons/0/0e/Francesco_Torniello_da_Novara_Letter_V_1517.png"> </head> <body> <div id="wrapper"> <div id="header"> <p>Vijay's Literary Quote for the day...</p> </div>

footer.php

<?php /** * The template for displaying the footer with the copyright statement * * @package WordPress * @subpackage Vijays_Theme_1 * @since Vijay's Theme 1, version 1.0 */ ?> <div id="footer"> <p>Copyright Vijay Venu Vadlamudi © All Rights Reserved</p> </div>  </div>  </body> </html>

index.php

<?php /** * The index, to display the header, the posts and the footer. * * @package WordPress * @subpackage Vijays_Theme_1 * @since Vijay's Theme 1, version 1.0 */ ?> <?php get_header(); ?> <div id="main"> <div id="content"> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <?php the_content(__('(more...)')); ?> <?php endwhile; else: ?> <?php _e('Sorry, no posts matched your criteria.'); ?> <?php endif; ?> </div>  </div>  <?php get_footer(); ?>

index page

style.css

/* Theme Name: Vijay's Theme 1 Theme URI: //www.vijay.no/ Description: Blue. Version: 0.1 Author: Edward Cerullo Author URI: //www.cerullo.no/ */ @CHARSET "ISO-8859-1"; body { background-color: #6666FF; } h1 { color: darkblue; font-family: arial; } #content { margin: 5px; border: 0px; padding: 0px; height: auto; } #delimiter { clear: both; } #footer { margin: 5px; border: 0px; padding: 0px; height: 25px; text-align: center; font-family: arial; } #header { margin: 5px; border: 0px; padding: 0px; height: 25px; text-align: center; font-family: arial; } #p1 { float: left; width: 49%; height: auto; } #p2 { float: right; width: 49%; height: auto; } #wrapper { display: block; border: 0px; width: 100%; margin: 0px auto; }

Welcome to my WordPress page

Red

Green

Yellow

Brown

Orange

How to Create a WordPress Site Based on HTML and CSS

WordPress Variables

Let's create a simple and clean WordPress Theme for Dr. Vijay