All posts by admin

05 – TRANSITION

HTML5

MARKUP

Presentational -> Semantic

Attributes & Properties

<input id="the-input" type="text" value="Name:">

The  value attribute of input contains the initial text-content of the value attribute from the HTML source code. The value property reflects the current text-content inside the input box.

CSS TO REPLACE PRESENTATIONAL MARKUP

HTML Font Tag

CSS Font Properties

  • font
  • font-family
  • font-size
  • font-style
  • font-variant
  • font-weight

 

IMAGE HYPERLINK

<a href=”…”><img border=”0″></a>

:link img,:visited img { border:0; }

 

TABLES

For XHTML/XML compatibility, include a <tbody> tag along with the opening and closing tags of every <table>:

table

 

CSS for table presentation:

<style> 
table { border-collapse:collapse; } 
td { border: 2px solid black; padding: 10px; text-align:right; } 
</style>
11 12
21 22

05) Security

Plugins

For security, consider blocking direct access to your files by adding the following line of code at the top of each file:

defined('ABSPATH') or die("permission denied!");

or

if (!defined('ABSPATH')) exit;

Direct access to your files could cause PHP errors which would disclose your WordPress install path.

The ABSPATH constant is set in the bootstrap file wp-load.php. It will define ABSPATH as wp-load.php’s directory:

define( 'ABSPATH', dirname(__FILE__) . '/' );

Here are the first two files executed when your WordPress site is accessed:

wordpress/index.php
wp-blog-header
wordpress/wp-blog-header.php

And at the top of wordpress/wp-load.php you will find this:

wp-load
wordpress/wp-load.php

index.php > wp-blog-header.php > wp-load.php > wp-config.php > wp-settings.php > functions.php

05) Theme 2014

Themes

Again, as with twentytwelve, theme twentyfourteen does not show a header image as part of the default layout.

The drop-down menu is an icon to the right of the search icon, on the right of the title bar. No subtitle is shown at this width.

No post content is shown; only the post title and date line.

window4
Theme 2014 (narrow)

Widen the window to get the post content.

window3
Theme 2014 (medium 1)

Text in admin bar shows. Page menu text shows.

window2
Theme 2014 (medium 2)

Finally, the submenu, and navigation is on the left side.

window1
Theme 2014 (wide)

Display area at full width is 1260px, aligned left. Margin is added on the right as the window expands.

05) Writing Code as User Experience Design – Nikolay Bachiyski

WordCamp

Writing code is building a user experience, where the user is the developer, who is reading the code.

There are rarely two programmers who have the same opinion on what is clean and readable code.

User experience, however, has longer history and more established and widely adopted practices.

In order for their code to be usable, developers need to take the same things in consideration as user experience designers.

Nikolay Bachiyski

Nikolay is a long-time WordPress core contributor, lives in Bulgaria, works for Automattic, blogs at extrapolate.me, and has a bear.

06 – SEMANTIC RECASTING

HTML5

The <strong> element has been redefined to mean “importance”. Use <em> for emphasis.

Use the <small> element for little bits of legalese or other items to explicitly de-emphasize. Things such as

  • small print legalese
  • disclaimers
  • caveats
  • copyright statements

The formerly presentational <i> for italics has been redefined to semantically express any one of the following:

  • idioms
  • taxonomy terms
  • technical terms
  • ship names

Use the <b> element for the following:

  • keyword
  • product name
  • lead sentence or paragraph

The primary semantic use for the <br> element is for lines of poetry.

The <hr> element has found meaning in separating paragraphs to indicate a thematic break between them. Control its appearance with CSS:

hr { border:0 }
hr { width:100%; height:3em; background:url(images/flourish.jpg) no-repeat; }

<hr style="height: 3em; background: url('https://zapmap.com/images/flourish.jpg') no-repeat scroll center;" />

Use the seamless attribute to undo any default presentation around iframes.

<iframe src=”embedded.html” seamless=”seamless”></iframe>

 

The target attribute is now valid on a, area, and base:

<a target=”t1”> - the hyperlink targets the iframe or window named “t1”
<area target=”t1”> - the imagemap area link targets “t1”
<base target=”t1”> - all links target “t1” by default

06) Content Strategy: WordPress Case Studies – Stephanie Leary

WordCamp

You’ve read Kristina Halvorson’s book.

You know you need a content strategy.

And then you open up your site’s Dashboard…

How do you get there from here?

Using examples from my experiences working with university departments (which Steve Krug calls “content factories”), I’ll show you how you can manage the complete content lifecycle in WordPress using plugins that are available on Extend right now.

Stephanie Leary

Stephanie Leary is a freelance web consultant specializing in WordPress sites for the higher education and publishing industries.

She has contributed more than a dozen plugins to the WordPress community.

She is the author of Beginning WordPress 3 (2010) and WordPress for Web Developers (2013).

06) File Header Format

Plugins

repository

akismet

The WordPress plugin repository takes the “Requires” and “Tested up to” versions from the wordpress/wp-content/plugins/akismet/readme.txt file.

=== Akismet ===
Contributors: matt, ryan, andy, mdawaffe, tellyworth, josephscott, lessbloat, eoigal, cfinke, automattic, jgs
Tags: akismet, comments, spam
Requires at least: 3.2
Tested up to: 4.1.1
Stable tag: 3.1.1
License: GPLv2 or later

Akismet checks your comments against the Akismet Web service to see if they look like spam or not.

== Description ==

Akismet checks your comments against the Akismet Web service to see if they look like spam or not and lets you review the spam it catches under your blog's "Comments" admin screen.

Stable tag should indicate the Subversion “tag” of the latest stable version, or “trunk,” if you use `/trunk/` for stable.

See https://wordpress.org/plugins/about/readme.txt

Top of the Akismet plugin PHP file:

<?php
/**
 * @package Akismet
 */
/*
Plugin Name: Akismet
Plugin URI: http://akismet.com/
Description: Used by millions, Akismet is quite possibly the best way in the world to <strong>protect your blog from comment and trackback spam</strong>. It keeps your site protected from spam even while you sleep. To get started: 1) Click the "Activate" link to the left of this description, 2) <a href="http://akismet.com/get/">Sign up for an Akismet API key</a>, and 3) Go to your Akismet configuration page, and save your API key.
Version: 3.1.1
Author: Automattic
Author URI: http://automattic.com/wordpress-plugins/
License: GPLv2 or later
Text Domain: akismet
*/

* General Public License, version 2

06) Navigation

Blog Design, UX for WP

Navigational Menus – position in the header or along left or right-hand side, or even in the footer of the site.

Street signs: Up & Horizontal

Who wants to talk to you?

Page Name should match what was clicked.

Scope of Search

  • whole site
  • part
  • whole Web


https://www.youtube.com/watch?v=I1wg1DNHbNU

Breadcrumbs

about.com

Tabs: Every browser has them; how about your theme?

wordpress.org/themes/search/tabs

Dropdown Menus / Pulldowns: Good (conserve real estate) & Bad (too twitchy!)

EVALUATE

  1. Site ID?
  2. Page name?
  3. Welcome Blurb?
  4. Major sections/subsections?
  5. Local navigation?
  6. Location indicators?
  7. Search?

06) Responsive Media

Themes

Screen and Print are the media attributes addressed in these style sheets. There are also aural, braille, handheld, projection, tty, tv, and even 3d-glasses.

Here are the conditionals found near the bottom of each theme’s style.css.

Note: There is a subtle difference between width and device-width.

2011
Theme 2011
2012
Theme 2012
2013
Theme 2013
2014
Theme 2014

The last theme seems to go overboard, considering that the changes in appearance at the various widths, in areas such font size, margins, padding, and borders are so subtle.

07 – FLEXIBILITY

HTML5

Wrap your links around both the heading and the image:

<a rel="bookmark" href="http://shakespeare.com/hamlet"> 
    <img src="http://shakespeare.com/hamlet" alt="">
    <h3>To be, Or not to be?</h3>
</a>

Use one hyperlink for both to simplify your markup, eliminate a potential source of data drift errors, and help with accessibility by getting rid of the adjacent duplicate hyperlinks.

These attributes are allowed on all elements:

  • class
  • dir
  • id
  • lang
  • style
  • tabindex
  • title

Use the following attributes on all <a>, <area>, and <link> elements:

  • media (to indicate applicable media)
  • hreflang (language of the destination)
  • rel (relation of the destination to the source)

07) (What’s So Funny ‘Bout) Themes, Love, and Understanding – Ian Stewart

WordCamp

An inspirational talk about the beautiful and amazing future of WordPress themes.

My aim is to excite the imagination and passion of WordPress themers while encouraging the next generation of themers to take a stab at theming through stories of my own experiences.

I want to convince the world that they can help build WordPress while making the world a more beautiful and exciting place through theming.

Ian Stewart

Ian is Theme Wrangler in-chief at Automattic where they make amazing WordPress themes for your blog.

07) Date & Hour

Javascript

Display Date


date appears here

Display Hour

Hour Displays Here



datehour

 

Why is the hour just a string of numbers? What does it mean?

 

 

07) Hooks

Hooks, Plugins

At various times while running, WordPress checks to see if any plugins have functions that are registered to run at that time. If so, those functions are executed.

Plugins register their functions to execute at various times using “filter” and “action” hooks.

Action functions return nothing but true, while Filter functions are expected to return something.

 

Use these commands in your plugin:

 add_action( $hook, $myFunction );
 add_filter( $hook, $myFunction );

Look for these commands in the source code of the templates to see where the hooks are executed:

 do_action( "$hook" )
 apply_filters( "$hook", "what_to_filter" )

Look into the wordpress/wp-admin/admin-footer.php template to find the admin_footer_text filter hook. It looks like this:

And, look into the wordpress/wp-admin/admin-header.php template to find the admin_notices action hook.

The conditionals in the code above show that not all admin pages use the same template.

wordpress.org/plugins/search/simply+show+hooks

08) Cats & Tags

Blog Design, Posting

 

Arid Gardening

Categories are assigned to a post in a methodical, organized, and structured way.

Tags are a more casual way to relate these otherwise arbitrary posts to each other. Tags have no hierarchy; there’s no relationship from one Tag to another.

Home

08) How To Jazz Up Your WordPress Site Without a Lick O’ Code – Kathryn Presner

WordCamp

While building a site for a fictitious event, learn how to add variety by using plugins to easily create columns, display information in tabs, add social media buttons, generate contact forms, and lots more – all without manually coding anything!

wordpress.tv

Kathryn Presner

Kathryn thrives on helping people get the most out of WordPress.

After a career designing and building websites for clients, she now supports WordPress.com users around the world as an Automattic Happiness Engineer.

She enjoys spreading her passion for WordPress at WordCamps, Girl Geek Dinners, Podcamps, and other grassroots events.

Non-WordPress hours are spent collecting vintage Pyrex mixing bowls, growing organic garlic, and cavorting with her three cats.

08) Mouseover

Javascript
Move Mouse Here

mouseover

 

The onmouseover attribute in HTML can be used within many HTML elements. In JavaScript, the command is:

object.onmouseover=function() { ExecuteCodeHere };

08) Theme Files

Themes
dir/template
2013
2014
2015
404.php
x
x
x
archive.php
x
x
x
author-bio.php
x
x
author.php
x
x
category.php
x
x
comments.php
x
x
content-aside.php
x
x
content-audio.php
x
x
content-chat.php
x
content-featured-post.php
x
content-gallery.php
x
x
content-image.php
x
x
content-link.php
x
x
x
content-none.php
x
x
x
content-page.php
x
x
content-quote.php
x
x
content-search.php
x
content-status.php
x
content-video.php
x
x
content.php
x
x
x
css
x
x
x
featured-content.php
x
footer.php
x
x
x
functions.php
x
x
x
genericons
x
x
x
header.php
x
x
x
image.php
x
x
x
images
x
x
inc
x
x
x
index.php
x
x
x
js
x
x
x
languages
x
x
x
page–templates
x
page.php
x
x
x
readme.txt
x
rtl.css
x
x
x
screenshot.png
x
x
x
search.php
x
x
x
sidebar-content.php
x
sidebar-footer.php
x
sidebar-main.php
x
sidebar.php
x
x
x
single.php
x
x
x
style.css
x
x
x
tag.php
x
x
taxonomy-post_format.php
x
x

09 – VECTOR GRAPHICS

HTML5


JavaScript can draw a line in the canvas element.


canvas

09) Change Image

Javascript 

<html>
<body>

<script>

function changeImage() {
	theElement=document.getElementById('myimage')

	if (theElement.src.match("bulbon.gif")) {
		theElement.src="bulboff.gif";
		}
	else {
		theElement.src="bulbon.gif";
		}
	}

</script>

<img id="myimage" onclick="changeImage()" src="bulboff.gif">

</body>
</html>

09) CSS Selectors

Themes

ID selectors are supposed to be unique, i.e., only one appearance per HTML document. These are the ID selectors found within each of the four theme homepages:

id
id= selectors

Many of the class selectors in the four home pages appear several times. In the lists below, the duplicates have been removed for readability:

class
class= selectors

Quiz: Why have the ie6, ie7, and ie8 selectors in the twentyeleven theme changed from ID to CLASS in the next three themes?

09) The Loop

Blog Design 

<?php
get_header();
if (have_posts()) :
   while (have_posts()) :
      the_post();
         get_template_part( 'content', get_post_format() );
   endwhile;
endif;
get_sidebar();
get_footer(); 
?>

twentyfifteen

09) What I Wish I Had Known Before Developing a WordPress Theme – Konstantin Kovshenin

WordCamp

Theme developers tend to overlook some of the APIs, principles and WordPress best practices.

This talk covers a few of them in detail, and includes the reasons behind each one.

Konstantin Kovshenin

Konstantin Kovshenin is a Code Wrangler at Automattic, passionate about all things WordPress and especially themes.

He works from home in Moscow, where he leads the monthly WordPress meetups and is co-organizing the very first WordCamp Russia.

During his free time, Konstantin writes regular expressions.