�ݺ�ߣ

HI, MY NAME IS
JORDAN
Thursday, 25 April 13

A LITTLE BIT
ABOUT ME

COLDFUSION
PHP ASP
JAVA
RUBY JAVASCRIPT
image: http://reactiongifs.com/?p=996

DANGEROUS
TO BE
KNOW ENOUGH

DANGEROUS
TO BE
KNOW ENOUGH
TWEAKING YOUR WORDPRESS THEME

HOW WORDPRESS WORKS
image: http://harriespotters.tumblr.com/

HOW WORDPRESS WORKS
DATABASE THEME
YOUR CONTENT HOW THINGS LOOK

YOUR THEME
image: http://tom-raider.tumblr.com/

ANATOMY OF A THEME
image: http://thelissomelightofevening.tumblr.com/

ANATOMY OF A THEME
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js

SCARED YET?
image: http://www.bukk.it/cat-dramatic.gif

PHP / HTML
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js

PHP / HTML

COPING?
image: speakinginternet.tumblr.com

HTML
AN AWESOME TITLE
A FANTASTIC BYLINE
In hac habitasse platea dictumst. Nam pulvinar, odio
sed rhoncus suscipit, sem diam ultrices mauris, eu
consequat purus metus eu velit.

HTML
AN AWESOME TITLE
A FANTASTIC BYLINE
In hac habitasse platea dictumst. Nam pulvinar, odio
sed rhoncus suscipit, sem diam ultrices mauris, eu
consequat purus metus eu velit.
<h1> </h1>
<h2> </h2>
<p>
</p>
<div>
</div>
Adding Structure and Meaning

HTML
<img src = /slideshow/sc2013-19944184/19944184/“whereTheImageIs.jpg” alt = “description”>
<a href = “thePageLink.pdf”> Link Text </a>
<ul>
<li>List Item Text</li>
<li>List Item Text</li>
<ul>
Some More Elements

CLASSES & IDs
<div id=”aSingleID”> ... </div>
<div class=”oneOfManyClasses”> ... </div>
Something to grab onto

PHP
<?php ... ?>
Doing all the Hard Work

PHP & The Loop
<?php if ( have_posts() ) while (have_posts()) : the_post(); ?>
.... magic! ...
<?php endwhile; endif; ?>
You’ll see this a lot.

PHP & Template Tags
You’ll see these a lot.
<?php the_title(); ?>
<?php the_permalink(); ?>
<?php the_content(); ?>
<?php the_excerpt(); ?>

image: http://bukk.it/applause.gif

JAVASCRIPT
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js

JAVASCRIPT
image: http://bukk.it/productivity.gif

Cascading Style Sheets
YOUR AWESOME THEME
404.php
archive.php
footer.php
header.php
index.php
images
page.php
search.php
sidebar.php
single.php
style.css
scripts.js

from this...

to this!

image: http://bukk.it/blinkhomer.gif

Remember those classes and IDs?
<div id=”aSingleID”> ... </div>

Hooking In! (selectors)
#aSingle ID { .... }
.oneOfManyClasses { ... }

Adding style (property and value)
color: #ff0000;
text-align: left;

Putting it Together
#aSingle ID {
color: #ff0000;
text-align: left;
background-color: #0000ff;
border: 1px solid #111111
padding: 10px 10px 5px 8px;
}

image: http://bukk.it/clap-nj.gifit

Editing Your Theme

Editing Your Theme
image: http://ano.lolcathost.org/thumbs//code-25.gif

Tools You’ll Need
FTP Editor
CyberDuck (MAC)
FileZilla (PC)

Tools You’ll Need
Text Editor
Text Wrangler (MAC)
NotePad ++ (PC)

Tools You’ll Need
Browser Inspectors
Chrome Developer Tools
Firebug (for Firefox)
Safari Developer Tools

Let’s Get Started

Let’s Get Started
Add Picture
Add Dates
Less Gap
Bigger Type

Connect to the Server
Using your FTP Client

wp-content > themes > your_theme

WARNING: Cowboy Coding
image: http://gif-central.blogspot.com.au/2012/09/cowboy-shaking-head.html

WARNING: Cowboy Coding
Duplicate/Backup the Theme Folder!!
Duplicate/Backup File You’re Editing!!

Adding The Picture
Add Picture

Adding The Picture
<img src = /slideshow/sc2013-19944184/19944184/“jordan.jpg” alt = “A picture of Jordan”
id= “sidebarPhoto”>
sidebar.php

Adding The Picture

Adding The Picture
#sidebarPhoto {
float:left;
width:100px;
margin-right:10px;
}
styles.css

Adding The Picture
image: http://bukk.it/struttin.gif

Tweaking the Excerpt
Less Gap
Bigger Type

Using Developer Tools

#blog .meta {
font-size: 13px;
line-height: 14px;
margin-bottom: 14px;
color: #b8ada0;
}
styles.css

#blog .meta {
font-size: 18px;
line-height: 14px;
margin-bottom: 5px;
color: #b8ada0;
}
styles.css

image: http://bukk.it/blues.gif

Adding Published Date to List
Add Date

image: http://bukk.it/celebration.gif

Resources:
http://www.jordesign.com/be-dangerous
http://codex.wordpress.org/

Thanks!
Questions?

�ݺ�ߣ

Know Enough to Be Dangerous

More Related Content

Know Enough to Be Dangerous