Skip to content

Instantly share code, notes, and snippets.

@chatrjr

chatrjr/footer.php

Created December 17, 2012 11:45
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save chatrjr/4317682 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save chatrjr/4317682 to your computer and use it in GitHub Desktop.
Download ZIP
Quick WordPress Conversion Tutorial
Raw
functions.php
<?php
// Now here's where you add your scripts. It's a good idea to have
// a single function containing all of your desired scripts.
function sample_script_loading_func () {
// First, we'll register our script.
// wp_register_script($handle, $src, $deps, $ver, $in_footer);
wp_register_script('main', get_template_directory_uri() . '/js/main.js', array(), '1.0', true);
// Now we'll actually queue it up.
wp_enqueue_script('main');
// For argument's sake, let's say you want your script to only
// load on the front page. With WordPress, you can totally do that.
if(is_front_page()) {
wp_enqueue_script('main');
}
// Conditional tags are boss.
}
// The action lets WordPress know you want your function queued
// with the wp_enqueue_scripts action hook.
add_action('wp_enqueue_scripts', 'sample_script_loading_func');
// Now we're gonna register our dynamic sidebar. In theme development,
// avoid hardcoding your sidebar if possible.
function sample_sidebar_registration () {
register_sidebar(array(
'name' => 'Main Sidebar',
'id' => 'main-sidebar',
'description' => 'the main one',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => "</li>\n",
'before_title' => '<h3>',
'after_title' => "</h3>\n"
));
}
// Finally, the action will alert WordPress to our dynamic sidebar
// with the widget_init hook.
add_action('widgets_init', 'sample_sidebar_registration');
Raw
header.php
<!--
Our chopped up page.html header markup.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/theme.css" />
<title>My Page</title>
</head>
<body>
<header>
<h1>My Brilliant Website</h1>
<nav class="main-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
Raw
index.php
<!--
Content contained within index.php.
-->
<h2>Are you ready to rrrrumble?</h2>
<section class="blog-module">
<div class="posts">
<div class="post-01">
<span class="post-date">12-11-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsam sequi eum cum nihil obcaecati tenetur! Cupiditate vero voluptatibus facilis.</p>
</div>
</div>
<div class="post-02">
<span class="post-date">12-12-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fugiat commodi rem ipsum fuga doloribus natus doloremque necessitatibus amet nobis!</p>
</div>
</div>
<div class="post-03">
<span class="post-date">12-13-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ducimus adipisci sed corporis aspernatur quas expedita pariatur quibusdam recusandae quisquam.</p>
</div>
</div>
<div class="post-04">
<span class="post-date">12-14-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aspernatur necessitatibus quidem tempore quae soluta eaque quas animi architecto.</p>
</div>
</div>
</div><!-- .posts -->
</section><!-- .blog-module -->
<section class="sidebar-module">
<nav class="recent-post-list">
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
</ul>
</nav>
<nav class="archived-post-list">
<ul>
<li><a href="#">2001</a></li>
<li><a href="#">2002</a></li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</nav>
</section>
Raw
page.html
<!--
Our basic page markup to be converted.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/theme.css" />
<title>My Page</title>
</head>
<body>
<header>
<h1>My Brilliant Website</h1>
<nav class="main-menu">
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<div class="content">
<h2>Are you ready to rrrrumble?</h2>
<section class="blog-module">
<div class="posts">
<div class="post-01">
<span class="post-date">12-11-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsam sequi eum cum nihil obcaecati tenetur! Cupiditate vero voluptatibus facilis.</p>
</div>
</div>
<div class="post-02">
<span class="post-date">12-12-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fugiat commodi rem ipsum fuga doloribus natus doloremque necessitatibus amet nobis!</p>
</div>
</div>
<div class="post-03">
<span class="post-date">12-13-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ducimus adipisci sed corporis aspernatur quas expedita pariatur quibusdam recusandae quisquam.</p>
</div>
</div>
<div class="post-04">
<span class="post-date">12-14-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aspernatur necessitatibus quidem tempore quae soluta eaque quas animi architecto.</p>
</div>
</div>
</div><!-- .posts -->
</section><!-- .blog-module -->
<section class="sidebar-module">
<nav class="recent-post-list">
<ul>
<li><a href="#">Post 1</a></li>
<li><a href="#">Post 2</a></li>
<li><a href="#">Post 3</a></li>
</ul>
</nav>
<nav class="archived-post-list">
<ul>
<li><a href="#">2001</a></li>
<li><a href="#">2002</a></li>
<li><a href="#">2003</a></li>
<li><a href="#">2004</a></li>
</ul>
</nav>
</section>
</div> <!-- .content -->
<footer>&copy;2012 Fake Company</footer>
<script src="js/main.js"></script>
</body>
</html>
Raw
sidebar.php
<!--
Here we've moved our sidebar markup. Some important things
to note:
We've checked for the existence of a dynamic sidebar. This is
a best practice in WordPress to only load the fallback if one
doesn't exist. We're gonna define one in functions.php.
-->
<?php // Dynamic Sidebar
if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Main Sidebar') ) : ?>
<section class="sidebar-module">
<nav class="recent-post-list">
<h3>Recent Posts</h3>
<ul>
<?php wp_get_archives('type=postbypost&limit=3'); ?>
</ul>
</nav>
<nav class="archived-post-list">
<h3>Archives</h3>
<ul>
<?php wp_get_archives('type=yearly&limit=4'); ?>
</ul>
</nav>
</section>
<?php endif; // End Dynamic Sidebar Main Sidebar ?>
Raw
style.css
/*
style.css is REQUIRED in WordPress to log authorship information
on a theme. If you don't have this, WordPress won't recognize your theme.
That said, you don't need to use style.css as your actual stylesheet.
The format for a valid style.css in WordPress is as follows.
*/
/*
Theme Name: Joe's Site
Theme URI: http://somesite.org
Description: A theme for something.
Author: Joe Everyman
Author URI: http://averagejoe.com
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
License: (usually unneeded and implied under WordPress to be GPL)
License URI:
General comments (optional).
*/
/* That's that for style.css if you want */
Raw
wp-optimized-header.php
<!--
As documented by codex.wordpress.org the changes made are included
with the original markup commented out for reference.
wp_head() is included as a hook for plugin output and for queuing up
scripts and conditional stylesheets.
-->
<!DOCTYPE html>
<!-- <html> -->
<html <?php language_attributes(); ?> >
<head>
<!-- <meta charset="utf-8" /> -->
<meta charset="<?php bloginfo('charset'); ?>" />
<!-- <link rel="stylesheet" href="css/theme.css" /> -->
<link rel="stylesheet" href="<?php echo get_stylesheet_uri() ?>/css/theme.css" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<link rel="alternate" href="<?php bloginfo('rss2_url'); ?>" />
<!-- <title>My Page</title> -->
<title><?php wp_title('&mdash;', true); ?></title>
<?php wp_head(); ?>
</head>
<!-- <body> -->
<body <?php body_class(); ?> >
<header>
<!-- <h1>My Brilliant Website</h1> -->
<h1><?php bloginfo('name'); ?></h1>
<nav class="main-menu">
<!--
<ul>
<li><a href="#">Services</a></li>
<li><a href="#">Pricing</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact</a></li>
</ul>
-->
<?php wp_nav_menu(); ?>
</nav>
</header>
<div class="content">
Raw
wp-optimized-index.php
<!--
Now it gets fun. Blog posts on WordPress, as well as
any quantified data pulled from the database, can be accessed
and manipulated via the loop.
-->
<?php get_header(); ?> <!-- This fetches your header.php -->
<h2>Are you ready to rrrrumble?</h2>
<section class="blog-module">
<!--
We're gonna start the loop here. It's a very simple one
for this gist.
-->
<div class="posts">
<!--
<div class="post-01">
<span class="post-date">12-11-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro ipsam sequi eum cum nihil obcaecati tenetur! Cupiditate vero voluptatibus facilis.</p>
</div>
</div>
<div class="post-02">
<span class="post-date">12-12-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi fugiat commodi rem ipsum fuga doloribus natus doloremque necessitatibus amet nobis!</p>
</div>
</div>
<div class="post-03">
<span class="post-date">12-13-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem ducimus adipisci sed corporis aspernatur quas expedita pariatur quibusdam recusandae quisquam.</p>
</div>
</div>
<div class="post-04">
<span class="post-date">12-14-12</span>
<div class="post-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam incidunt aspernatur necessitatibus quidem tempore quae soluta eaque quas animi architecto.</p>
</div>
</div>
-->
<!-- Loop time -->
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="post">
<h2><?php the_title(); ?></h2>
<span class="post-date"><?php the_date('m-d-y'); ?></span>
<div class="post-content"><?php the_content(); ?></div>
</div><!-- .post -->
<?php endwhile; ?>
<nav class="posts-nav">
<?php previous_posts_link(); ?>
<?php next_posts_link(); ?>
</nav>
<?php else: ?>
<h2>No posts here</h2>
<p>Sorry, but this loop has no posts.</p>
<?php endif; ?>
</div><!-- .posts -->
</section><!-- .blog-module -->
<?php wp_link_pages(); ?>
<?php get_sidebar(); ?> <!-- In WordPress, the sidebar markup has its own file: sidebar.php -->
<?php get_footer(); ?> <!-- Grabs your footer.php -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment