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.
      • Free Hosted Service, Themes, and Widgets (limited)
      • Optimized Resource Utilization, Load Balancing
      • Automatic Version Updating
      • Host a CMS* website on server of own choosing.
      • Unlimited Customization, Access to Code
      • Maintenance is your own Responsibility!
  • 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?

 <- Twitter Site

* 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.

Cupertino WordPress Meetup

Cupertino, CA
76 Members

We’re a group of local WordPress developers, designers, and publishers who get together to share our knowledge and experience, and to meet other WordPress users in the area. T…

Next Meetup

Improving WordPress Search: Help your readers find the conte…

Thursday, May 16, 2019, 6:30 PM
5 Attending

Check out this Meetup Group →

The San Jose WordPress Meetup

San Jose, CA
596 Members

We’re a group of WordPress enthusiasts located in San Jose, CA. We are a mix of designers, developers, and small business owners who work with WordPress and love to share our …

Next Meetup

Improving WordPress Search: Help your readers find the conte…

Tuesday, May 7, 2019, 5:30 PM
13 Attending

Check out this Meetup Group →

WordPress Bay Area Foothills Group

Milpitas, CA
522 Geeks

If you love to design and build blogs and CMS sites with WordPress this is the group for you. Down and dirty technical talk about WordPress php and CSS – Themes and plugins. L…

Next Meetup

Building a Membership Site Using Free WordPress Plugins

Wednesday, May 29, 2019, 1:00 PM
2 Attending

Check out this Meetup Group →


Saratoga, CA
16 WordPressers

WordPress is an open source content management tool and internet publishing platform powered by PHP & MySQL.This MeetUp group gives presentations and holds discussions about …

Next Meetup

Themes, Plugins, & Templates

Thursday, May 16, 2019, 1:15 PM
7 Attending

Check out this Meetup Group →

WordPress Petaluma

Petaluma, CA
388 Members

Ready to get better with WordPress than ever before? Want to build your first WordPress Website on your own? Come to a WordPress Petaluma Meetup event and we’ll show you how t…

Next Meetup

WordPress Wednesday

Wednesday, Jun 26, 2019, 11:00 AM
4 Attending

Check out this Meetup Group →

-Technical Overview-








Design Patterns



















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,, Writing

#3 Map Links – Alternatives to Google



Microsoft Bing Maps API

Mobile Maps


OpenStreetMap Android

OpenStreetMap API





Yahoo Maps API


0) UX for Theme Development

Presenting a number of strategies for creating a meaningful site-visitor experience
beyond just usability.

This is brief – you don’t need to know everything (satisfice = satisfy + suffice):

  1. Don’t Make Me Think
  2. Muddling through the Web
  3. Billboard Design 101
  4. mindless choices
  5. needless words
  6. Navigation
  7. Home page
  8. Arguments
  9. Usability testing

define, build, measure

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


  • 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

13) Responsive Results 

14) More Information 

Themes (continued)


New Elements for better structure:
other new elements:
Unusual Elements/Tags:

Style.css 2014





Input Element Type Attribute Values:
New Attributes to existing elements:
Deprecated Tags:
Deprecated Attributes:
HTML5 Differences from HTML4:

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

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

01) Contents

JavaScript for WP

  2. Document Object Model
  3. Change Style
  4. Function Parameters
  5. Get Elements
  6. Input ID
  7. Date & Hour
  8. Mouseover
  9. Change Image
  10. Event Listener
  11. Array Loops
  12. Paint the Canvas
  13. Escape the Void!
  14. 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

  1. Elements on demand
  2. Specialized controls
  3. Shadows around modal windows
  4. Empty states that tell you what to do
  5. Pressed button states
  6. Sign-up page links from the log-in page
  7. Context-sensitive navigation
  8. More emphasis on key functions
  9. Embedded video


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.

  1. Download from Plugins Repository
  2. Install/Activate
  3. Upgrade Version
  4. Troubleshoot Problem
  5. Manage
  6. Develop New/Own

Default Plugins included with fresh installation:

  • Akismet
  • hello.php

Gravity Forms
Duplicate Post
One-Click Child Theme
Yoast SEO


Updraft Plus

Event Post

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 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:

  1. The Purpose of your communication.
  2. The Content of your blog.
  3. Its Appearance in terms of arrangement & layout.
  4. Navigation: where you want the reader to go to next and from where.
  5. 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.

Codex Glossary


  • 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) 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) Theme 2011

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.

Theme 2011 edit

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.

Theme 2011 (medium)

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.

Theme 2011 (small)


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.


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) 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.

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) 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.

Theme 2012 (narrow)

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.

Theme 2012 (medium)

Full width is 1000px, beyond which the margins expand to fill the window.

Theme 2012 (wide)


04) Add New Post

Add New Post in theme TwentyTen

Show on screen

  • Author
  • Categories
  • Comments
  • Discussion
  • Excerpt
  • Featured Image
  • Format
  • Likes and Shares
  • Revisions
  • Send Trackbacks
  • Slug
  • Tags
  • Writing Helper

Screen Layout

  • Number of Columns: 1 or 2
  • Enable full-height editor and distraction-free functionality.

Add New Post in theme TwentyThirteen

04) mindless choices

It doesn’t matter how many times I have to click, as long as each click is a mindless, unambiguous choice. -Steve Krug’s Second Law of Usability

wide site = fewer levels



deep site = fewer options at each level


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

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.

Theme 2013 (wide)

Narrow the window, and navigation goes from 4 columns to 3.

Theme 2013 (medium 1)

Two columns for navigation.

Theme 2013 (medium 2)

One column for navigation, and the list of pages in the menu bar can be seen by clicking the  drop-down button.

Theme 2013 (narrow)