1-General 2-Writing 3-Reading 4-Discussion 5-Media 6-Permalinks
All posts by admin
– Welcome –

Welcome to WordPress-Saratoga
- Attendance: / Sign-in Sheet / password
- Survey 1: Macintosh, Windows, Linux?
- Survey 2: Freelance, Startup Team Member, Corporate Employee?
- Survey 3: Beginner, Intermediate, Advanced User?
- Fundamentals
- Blogging
- Write & post, categorize & tag; fresh content, from time to time.
- Content consists of text, photos, and/or audio/visual media.
- Accept comments from visitors.
- WordPress.com
- Free Hosted Service, Themes, and Widgets (limited)
- Optimized Resource Utilization, Load Balancing
- Automatic Version Updating
- WordPress.org
- Host a CMS* website on server of own choosing.
- Unlimited Customization, Access to Code
- Maintenance is your own Responsibility!
- Blogging
- This Month’s Question?
- Introduce Yourself
- Name, Title, and Background
- Tell us about your experience with WordPress so far.
- Where do you plan to go with WordPress?
- Next Month’s Topic?
* Content Management System (CMS) is a computer program that allows publishing, editing and modifying content on a website as well as maintenance from a central interface. Such systems provide procedures to manage workflow in a collaborative environment.
-Technical Overview-
Aesthetics | HTML5 | PHP |
WP FUNDAMENTALS
Akismet, Appearance, Categories, Customize, Dashboard, Discussion, Documentation, Editor, Export, Feedback, General, Header, Home, Import, Library, Links, Media, Menus, Network Setup, Pages, Permalinks, Plugins, Posts, Profile, Reading, Settings, Style Sheet, Support Forums, Tags, Themes, Tools, Tools, Updates, Users, Widgets, WordPress.org, Writing
#3 Map Links – Alternatives to Google
CloudMade
developers.cloudmade.com/projects
MapQuest
Microsoft Bing Maps API
www.microsoft.com/maps/developers/
Mobile Maps
labs.ericsson.com/apis/mobile-maps/
OpenLayers
OpenStreetMap Android
wiki.openstreetmap.org/wiki/Android
OpenStreetMap API
wiki.openstreetmap.org/wiki/API_v0.6
Osmdroid
wiki.openstreetmap.org/wiki/Osmdroid
Route-Me
TinyGeoCoder
Trimaps
Yahoo Maps API
0) File Sizes & Structures
0) UX for Theme Development
Presenting a number of strategies for creating a meaningful site-visitor experience
beyond just usability.
- information architecture
- visual design
- user research and testing
This is brief – you don’t need to know everything (satisfice = satisfy + suffice):
- Don’t Make Me Think
- Muddling through the Web
- Billboard Design 101
- mindless choices
- needless words
- Navigation
- Home page
- Arguments
- Usability testing
iterate, iterate, iterate, etc., etc…
The first UX skill anyone learns is to shift their thinking from the requirements of the system and business to the experience of the user. ~Jared M. Spool
Target Audience
- Demographic
- age
- ethnicity
- gender
- income
- location
- marital status
- Psychographic
- attitudes
- behaviors
- hobbies
- interests
- lifestyle
- values
BOUNCE RATE
- abandon a very slow website
- website froze or crashed
- purchase could not complete on first attempt
- tried to access a website that was down temporarily
- purchase, apparently completed, actually didn’t go through
00) Contents
This is a comparison of four default WordPress themes, twentyeleven, twentytwelve, twentythirteen, twentyfourteen – how they are different, and how they are surprisingly alike; followed by some talk about child themes.
CONTENTS (scroll down in the Themes category, or skip to the post)
01) Installed Files
02) Theme 2011
03) Theme 2012
04) Theme 2013
05) Theme 2014
06) Responsive Media
07) Four Home Pages
08) Theme Files for Home Pages
09) CSS Selectors
10) Post Styles
11) Child Themes
12) Options
14) More Information
01 – Files of Version 3 & 4
01 – INTRO TO HTML5
New Elements for better structure:
other new elements:
- audio
- bdi
- canvas
- datalist
- embed
- keygen
- mark
- meter
- output
- progress
- ruby, rt, and rp
- time
- track
- video
- wbr
Unusual Elements/Tags:
Input Element Type Attribute Values:
New Attributes to existing elements:
- area
- base
- button
- fieldset
- form
- html
- iframe
- img
- input
- label
- link
- meta
- object
- ol
- output
- script
- select
- textarea
Deprecated Tags:
Deprecated Attributes:
- abbr td and t
- align caption, iframe, img, input, object, legend, table, hr, div, h1, h2, h3, h4, h5, h6, p, col, colgroup, tbody, td, tfoot, th, thead and tr.
- alink body
- archive object
- axis td and t
- background body
- bgcolor table, tr, td, th and body.
- border table and object.
- cellpadding table
- cellspacing table
- char col, colgroup, tbody, td, tfoot, th, thead and tr.
- charoff col, colgroup, tbody, td, tfoot, th, thead and tr.
- charset link and a
- classid object
- clear br
- codebase object
- codetype object
- compact dl, menu, ol and ul.
- compact dl, menu, ol and ul.
- coords a
- declare object
- frame table
- frame table
- frameborder iframe
- hspace img and object.
- link body
- longdesc img and iframe.
- marginheight iframe
- marginwidth iframe
- name img
- nohref area
- noshade hr
- nowrap td and th
- profile head
- rev link, a
- rules table
- scheme meta
- scope td
- scrolling iframe
- shape a
- size hr
- standby object
- target link
- text body
- type li, ol and ul.
- type param
- valign col, colgroup, tbody, td, tfoot, th, thead and tr
- valuetype param
- version html
- vlink body
- vspace img and object.
- width hr, table, td, th, col, colgroup and pre.
HTML5 Differences from HTML4: w3.org/TR/html5-diff
01- Theme TwentyThirteen
01) Beyond the Default: Explorations and Experiments in BuddyPress – Tammie Lister
For years BuddyPress was tied to a specific theme and creating a custom theme had a steep learning curve.
Many just used the default theme not pushing the boundaries of what could be done.
BuddyPress now has theme independence and with this comes the chance to push ahead BuddyPress design.
Lets ban the bland and start thinking about how we can innovate not just about how we create a theme.
I’ll encourage in this talk to look beyond the default, to new UI’s, new possibilities, to design for the community not to the default.
I’ll also give some consideration to what the ‘new default’ should be that BuddyPress offers up when you load it.
Tammie Lister
Tammie Lister is a designer who specialises in creating communities using BuddyPress.
She’s passionate about community design and mixing in psychology with design and development to create these communities.
Over the years she’s been lucky enough to create varied projects with great clients under her own company at logicalbinary.com.
She is a contributor to BuddyPress and has written a soon to be published book on BuddyPress theme development.
Keen to explore new design possibilities, she has a sketchbook site exploring BuddyPress UI’s at buddydesignlabs.com.
01) Contents
JavaScript for WP
- CONTENTS
- Document Object Model
- Change Style
- Function Parameters
- Get Elements
- Input ID
- Date & Hour
- Mouseover
- Change Image
- Event Listener
- Array Loops
- Paint the Canvas
- Escape the Void!
- The Clock (to next page)
This presentation covers the following areas:
- Methods: getElementById, getElementsByTagName, getDate, getTime
- Image Property: src
- Style Property: color
- DOM Property: innerHTML
- Objects: Array(), Date()
- Events: onmouseover, onmouseout
- Popup Box: alert, prompt
01) Don’t Make Me Think
Web Design (and internet marketing success) is tied to this idea:
Humans Love Convenience
Interface Techniques
- Elements on demand
- Specialized controls
- Shadows around modal windows
- Empty states that tell you what to do
- Pressed button states
- Sign-up page links from the log-in page
- Context-sensitive navigation
- More emphasis on key functions
- Embedded video
smashingmagazine.com/2009/01/12/10-useful-web-application-interface-techniques
goodusability.co.uk/2009/01/12/easy-as-123
01) Installed Files
Latest installation of WordPress (Version 4.1.1) has a file structure not much different from previous versions. This is what you will see after unpacking the zip file.
Three themes are included, with twentyfifteen being activated as default. I later added another theme, twentyfifteen-child, for experimentation, and then twentyeleven and twentytwelve for comparison purposes.
Two plugins are included. Akismet does an excellent job of diverting spam, and hello.php is a simple demo plugin.
Several blank index.php files are used to prevent some servers from displaying the directory contents.
01) Intro to Plugins
Plugins extend and add functionality & features.
- Download from WordPress.org Plugins Repository
- Install/Activate
- Upgrade Version
- Troubleshoot Problem
- Manage
- Develop New/Own
Default Plugins included with fresh installation:
- Akismet
- hello.php
Bob:
Gravity Forms
Duplicate Post
Relevanssi
Updraftplus
Wordfence
One-Click Child Theme
Yoast SEO
Carol:
Redirection
Greg:
Updraft Plus
Paul:
Event Post
01) POSITIONING
01) Power of Javascript in WordPress Code
Learn how to link a Javascript file to the generated page at the right time according to its dependencies. There are two ways recommended for doing this, and we’ll examine them both plus explore the usefulness of Javascript in general.
JavaScript in Posts – Not all JavaScript may work; there could possibly be conflicts of one sort or another, such as with the automatic text formatting in the editor. There is a Text Control Plugin which allows you to control the automatic formatting features. If you choose No Formatting you will have to add paragraph tags and other HTML tags in order to format your page.
JavaScript in Template Files – The safe and recommended method of adding JavaScript to a WordPress generated page and WordPress Theme or Plugin is by using wp_enqueue_script(). This function includes the script if it hasn’t already been included, and safely handles dependencies.
01) Saratoga Meetup 2015
- Jan: New To WordPress?: Here’s How to Get Started
- Feb: Creating and Using Posts, Categories & Tags
- POSTS are timely and can be categorized & assigned tags
- Let’s talk about not just how to post, but also how the PHP makes it happen.
- And we’ll look at ways a theme influences the presentation of your posts.
- If you have yet to install Version 4.1 from WordPress.org onto your server, experts will be standing by to answer your questions.
- Mar: Creating and Using Pages & Templates
- PAGES are organized hierarchically and are constructed to present the relatively timeless information of your website.
- How to create pages and add links to them in the menu.
- Templates are the files which take information from the database and in combination arrange the HTML pages to be displayed in the browser.
- Apr: Using Themes
- May: Using Plugins
- Jun: Creating Child Themes
- Jul: Permalinks & Other Settings
- Sep: The MySQL Database: Overview & Details
- Oct: Blog Design and Layout
- Nov: Writing Plugins: All about the API and Resources
- Dec: Profit from Documentation & Development
01) Start Here
Blog Design is the art & science of delivering a message and perhaps exchanging ideas with others via the internet.
The online world allows the narrowest interests to be shared with the broadest base of the world’s web users. And vice versa: there could be a few who have your wide range of interests, but their physical location is many timezones away.
In essence, a good blog design enhances communication, whereas a bad blog design could negate it completely.
Although there is value in good communication itself alone, if your purpose is to showcase a product or service that you wish to sell, then the better your blog captures the interests of potential customers, the more opportunity you will have to pursuade them of the value of making a purchase. This demands that you attract attention first, and that is where the visual (and perhaps audio) elements of your blog come into play.
If you choose the right colors (to set the mood) and the proper fonts (to let the meaning of your words flow through better) then landing on your blog becomes an increasingly comfortable experience for the reader. The next thing you know, updating your blog frequently with fresh posts becomes incentivised, i.e., all of your hard work begins to pay off.
Look at blog design from five different angles:
- The Purpose of your communication.
- The Content of your blog.
- Its Appearance in terms of arrangement & layout.
- Navigation: where you want the reader to go to next and from where.
- Aspects of Technology: what is done by the code to produce the web page and facilitate dynamic interaction.
You can use the acronym PCANT for Purpose, Content, Appearence, Navigation, and Technology.
These areas of concern intersect in varying degrees. For example, the appearence of the content should reflect the blog’s purpose, and navigation is most dependent on the technology of hypertext.
P - Purpose: For example, to promote your product or service; to spread the word about a just cause in order to attract advocates and/or contributors; to showcase your hobby; or simply to exercise your creative webdesign talents.
C - Content: Advertising, Blurbs, Charts, Comments, Diagrams, Drawings, Graphics, Icons, Images, Labels, Maps, Photos, Phrases, Pictures, Quotes, Sketches, Text, Titles, Words, etc.
A - Appearance: Alignment, Balance, Clutter, Color, Columns, Fonts, Footer, Header, Layout, Padding, Sidebar, Spacing, Weight, Whitespace, etc.
N - Navigation: From a menu, finding the link that takes you there; or use the search feature.
T - Technology: Action, Attribute, Boolean, Class, CSS, Division, Element, Fieldset, Filter, Hook, HTML, Input, Function, Hypertext, Javascript, Loop, Method, MySQL, Parameter, Permalink, Permission, PHP, Selector, Slug, Tag, etc.
02 – Contents of style.css
02 – Create Config
02 – HISTORY
- HTML Version 2
- HTML3 (1995)
- HTML 3.2 (1997)
- HTML4 (1998)
- HTML 4.01 (1999) -> XHTML
- HTML5 (2014)
In 2004, at a two day workshop in San Jose, California on Web Applications and Compound Documents, the World Wide Web Consortium staff advocated replacing that stack with non-backward-compatible XHTML2 + XForms + SVG + MathML + RDFa.
However, a poll taken at the end of the workshop showed that browser makers unanimously favored an incremental approach based on evolving HTML4/ XHTML1 + CSS + DOM.
In 2005, the W3C began work on HTML5 to advance regular HTML, and in 2009 it acknowledged that HTML5 would be the only next-generation version of HTML, although it would include both XML and non-XML serializations.
- Fixes to HTML4
- Richer Semantic Markup
- New Forms Capabilities
- Native Multimedia
- Programmable Vector Graphics
- Powerful APIs
All browsers need two modes: quirks mode for the old rules, strict mode for the standard.
02-3-4) POSITIONING
02) Document Object Model
HTML is for Content
CSS is for Presentation
JavaScript is for Interactivity
JavaScript is able to create dynamic HTML:
- JavaScript can change all the HTML elements in the page
- JavaScript can change all the HTML attributes in the page
- JavaScript can change all the CSS styles in the page
- JavaScript can react to all the events in the page
JavaScript can be executed whenever an event occurs.
Examples of HTML events:
- When a user clicks the mouse
- When a web page has loaded
- When an image has been loaded
- When the mouse moves over an element
- When an input field is changed
- When an HTML form is submitted
- When a user strokes a key
JavaScript is able to manipulate HTML elements.
Here are the ways Javascript is able to find the HTML elements:
- by id
- by tag name
- by class name
02) Muddling through the Web
Design pages for scanning, not reading.
We’re in a hurry and don’t need to read everything.
Focus on words that match trigger words.
Take the first reasonable plan that comes to mind, do a quick mental test for problems, and then take action.
02) Plugins Directory
02) Posts vs. Pages
02) Theme 2011
Title and subtitle in upper right.
There are links to all the pages in the menu bar. Home page defaults to the stack of the posts, most recent at top. Here, in our virgin installation, there is only the one.
Notice that there are two search boxes.
The number of comments shows in an iconic balloon, and in the string “Posted in Uncategorized | 1 Reply” below the post.
Navigation side-panel is to the right.
The string “Proudly powered by WordPress” is centered in the footer.
All of the text font is sans serif.
The header image rotates through a group of eight JPGs located at the end of this path: twentyeleven > images > headers
Log-in as Administrator, and you will see a bar with icon and text hot-links appear at the top. There is also an edit button to the lower right of each post.
The header image will shrink gradually as you narrow the page. At a certain width, the layout changes. Navigation goes from the side to below the posts.
Shrink the page width more and the admin bar shows only icons. Shrink more and the W icon disappears and next the font size decreases.
02) WordPress and the Ten Year Itch – Siobhan McKeown
It’s been ten years since the first release of WordPress, and even longer since its predecessor, b2, caught the eye of a small group of bloggers.
Thousands of lines of code have been written, hundreds of hours have been spent in online discussions, and many, many itches have been scratched.
This presentation is the story of the itch.
It will travel back through time to trace the itch, from the very first scratcher, to the people who caught the itch, until it became contagious and hundreds of people were scratching furiously and somehow they solved a problem for millions of people all over the world.
Siobhan McKeown
Siobhan McKeown is a Word Ninja at Audrey Capital where she writes about WordPress, deals with documentation, and has nightmares about the Codex.
She’s currently working on an open source book about the history of WordPress.
She spends her days delving into the brains of its early developers and community members.
When she’s not worrying about the finer details of forking and the GPL, she’s helping out with the project’s future by wrangling WordPress’ documentation.
In her spare time, she writes and edits for Smashing Magazine, eats, reads, and creates huge amounts of mess and chaos.
03 – Database
03 – Missing search-icon.png
03 – SEMANTIC WEB
Semantic Web: an evolutionary stage of the World Wide Web in which automated software can store, exchange, and use machine-readable information distributed throughout the Web, in turn enabling users to deal with the information with greater efficiency and certainty.
Convert unstructured web documents into a common framework that allows data to be shared and reused across application, enterprise, and community boundaries.
Object-oriented design; object (sky), attribute (color) and value (blue)
03) Change Style
03) Confident Commits, Delightful Deploys – Mark Jaquith
You’re a WordPress professional.
It’s time that your WordPress coding and deployment practices moved beyond manual backups and editing files on the server.
Mistakes happen.
You need a workflow that is ordered towards minimizing and recovering from mistakes, rather than one that embarasses you and makes changes stressful.
This talk will examine the pitfalls of “winging it” when it comes to changing and deploying code, and will showcase multiple paths to the promised land of confident commits and delightful deploys.
wordpress.tv
Mark Jaquith
Mark Jaquith has been working with and contributing to WordPress since 2004.
He is one of the lead developers of the WordPress core and offers freelance WordPress consulting services through Covered Web Services with a focus on scaling, security, and custom functionality.
Mark likes patches that have more red than green, and his favorite WordPress features are the ones that you’re not even aware of.
He eagerly looks forward to shooting down your feature suggestions with, “No, but it would make a great plugin!”
03) Dashboard
03) Theme 2012
Activating the next theme, twentytwelve, shows some javascript in action. The menu bar of pages is replaced by a button that will show the available pages when you click it. Compare this feature to that of twentyeleven which would wrap the string of page links to the next line if it didn’t fit the narrow width.
A header image is not part of the default layout, but can be added easily.
Did you notice that the title and subtitle are aligned center? (Although the footer , not visible here, is always aligned left.)
Also, the text string below the post is different, with the Edit link appended to it.
Widen the page and the W link reappears in the admin bar, the page menu bar expands out of its button, and the navigation goes to the side. Notice the footer beginning to show.
Full width is 1000px, beyond which the margins expand to fill the window.
03) Web Design 101
UI Terms
- visual hierarchy
- logical relationship
- nested content
- familiar conventions
- defined areas
- obvious clickable
- persistent navigation
UX TERMS
- clutter/noise
Visual Cognition
viscog.beckman.illinois.edu/flashmovie/15.php
03) Web Design 101
Four Strategies
simpleandusable.com/simplify-this
Accessibility – Alt text provides a text description of an image
03) Writing a Plugin
Main Page « WordPress Codex
codex.wordpress.org
- Using Plugins
- Writing a Plugin
- Plugin API
- Plugin Resources
Reference | WordPress Developer Resources
developer.wordpress.org/reference
- Functions
- Hooks
- Classes
- Methods
Writing a Plugin
codex.wordpress.org/Writing_a_Plugin
04 – Building 2013
04 – Connection
04 – FUNDAMENTALS
04) Add New Post
04) Branding
04) Function Parameters
04) mindless choices
04) Plugins Directory
Directory of the plugin may contain a variety of file types.
zapmap.com/virgin/wp-admin/plugins.php
- .php (one required)
- .js
- .css
- .gif, .jpg, .png
04) Setting Up Your WordPress Site: Six Stories of Joy and Despair – Natalie MacLees
So often, we think the first steps in setting up a new WordPress site are to install WordPress, choose a theme, and start writing.
But the secret first step to a successful site is planning.
When you’ve mapped out the crucial 5 W’s and 1 H, you can focus on what’s important, avoid procrastination, and dodge mistakes that can be hard to recover from later on.
Learn how to get it right the first time by witnessing six examples of total wins and epic fails.
Natalie MacLees
Natalie MacLees is a front-end web developer and UI designer and is founder + principal of the interactive agency, Purple Pen Productions.
In 2012 she published jQuery for Designers with Packt Publishing.
She founded and runs the jQuery LA Users’ Group and together with Noel Saw she heads up theSouthern California WordPress User’s Group, organizing WordPress meetups, help sessions, and workshops.
She’s currently has two big events in the works: WordCamp Los Angeles 2013 and the first annual Website Weekend LA.
She makes her online home at nataliemac.com.
04) Theme 2013
Theme twentythirteen uses a display area up to 1600px before it adds margins to the page.
The header displays in the default layout. Three images are included: circle, star, and diamond. (Curiously, each of these PNGs is 3200 pixels wide, but does not take much file space.)
The menu bar shows the pages, but not the home page which is accessed by clicking on the title.
Search is an icon aligned right on the menu bar, and the second search is in navigation which is always below the posts, above the footer.
Post title text is a serified font.
Narrow the window, and navigation goes from 4 columns to 3.
Two columns for navigation.
One column for navigation, and the list of pages in the menu bar can be seen by clicking the drop-down button.