Connecting to Social Media APIs

Connecting to APIs makes for a better experience

 

As I have spoken about in the past, the social media modality triggers deep aspects of our psychological nature. Through social media you are exposed. People know what you’ve posted and what you like. You know how many of your friends, and what friends, like a product or idea. It activates cognitive biases like in-group favoritism and the consistency principal.

This is good for the owners of social media platforms. Clicking into cognitive bias is addictive. This fact is not lost on these owners. They utilize web technologies like JavaScript AJAX to display in new posts without the visitors to the site having to take any action, a la the endless news feed. That constant (re)inforcement of in-group and consistency principals combined with the Zeigarnik effect (see https://en.wikipedia.org/wiki/Zeigarnik_effect), where folks are inclined to finish an uncompleted task, makes for an extremely compelling case for adding social media elements and techniques to your content.

This is great. Utilize social media in your messaging and you too can tap into this amazing marketing resource. The only problem is that Facebook and Twitter and all other social media platforms are doing it on someone else’s website. Visitors are not clicking on your buy now button if they’re on the facebook.com domain.

 

Social Media Platforms are Sharing Too

 

Luckily for us it is to the advantage of social media platform owners to share their content. They do this through a standard web development mechanism called the application programming interface (API – https://en.wikipedia.org/wiki/Application_programming_interface). As per Wikipedia, “an application programming interface is a set of subroutine definitions, protocols, and tools for building software applications.”

Whoa, what does that mean? APIs take the content from web services and break it down into discrete pieces. For example, you can connect with the Facebook’s Graph API and get information about users on facebook.

 

As facebook describes it on their overview page (https://developers.facebook.com/docs/graph-api/overview) The Graph API “is a low-level HTTP-based API that you can use to query data, post new stories, manage ads, upload photos and a variety of other tasks that an app might need to do.” That’s a long way of saying that you can get (literally using the GET method) information from Facebook through http. HTTP is most commonly utilized in a browser. The webpage you’re looking at was delivered to you via HTTP (look at the start of the location in the location bar at the top of your browser… http or possibly https (s is for security)). That means with a browser you can see information from the Facebook Graph API. You can also get this information via programming languages like PHP, JavaScript, etc. Check out the reference here: https://developers.facebook.com/docs/graph-api/reference/.

 

That’s a lot of information to grab from Facebook and other platforms have APIs as well. You can take information from one API and mix it with another to create new ways to interact and consume with content.

Techniques for accessible web development

Image of HTML codeGreat, you’re on board. You’ve made the choice to offer accessible content. A first step to building an accessible website is to be aware of the components of web development. These integrated components include the web content (text, images, and media), user agents (the software/hardware people use to to access the content), and authoring tools (the software used to produce web content). In other words the move toward accessibility has to take an all inclusive view point. It’s about the the producer and the consumer and the tools.

Accessibility standards play a key role in determining what techniques should be utilized. Here we’ll focus on the Web Content Accessibility Guidelines (WCAG) https://www.w3.org/WAI/intro/wcag.php. There are two other guidelines that are pertinent to this work. For the developers of user agents, these address the needs of browsers, browser extensions, media players, readers, etc. This is the User Agent Accessibility Guidelines (UAAG) https://www.w3.org/WAI/intro/uaag.php. Finally there are guidelines for authoring tools. These tools include tools like Adobe’s Dreamweaver and Automatic’s WordPress CMS. These guidelines are named the Authoring Tool Accessibility Guidelines (ATAG) https://www.w3.org/WAI/intro/atag.php.

WCAG at a glance

Perceivable

  • Provide text alternatives for non-text content.
  • Provide captions and other alternatives for multimedia.
  • Create content that can be presented in different ways,
    including by assistive technologies, without losing meaning.
  • Make it easier for users to see and hear content.

Operable

  • Make all functionality available from a keyboard.
  • Give users enough time to read and use content.
  • Do not use content that causes seizures.
  • Help users navigate and find content.

Understandable

  • Make text readable and understandable.
  • Make content appear and operate in predictable ways.
  • Help users avoid and correct mistakes.

Robust

  • Maximize compatibility with current and future user tools.

Source: https://www.w3.org/WAI/WCAG20/glance/

Image of W3C logoThis is a good start, perceivable, operable, understandable, and robust – POUR. Let’s connect some techniques to these concepts. The first one under perceivable, provide text alternatives for non-text content, has an obvious implications for web developers, use the alt tag with your images. This one has an immediate added bonus: greater search engine optimization. One of the great things about coding with accessibility in mind is that SEO plays very nicely with accessibility enhanced websites.

Take the birds eye view

The first step in this process should be an overhead view of your web content.

Some questions to ask yourself in early production:

  • What are the main sections of my website?
  • These main sections might include the header, nav, main content, aside, and footer. Once you have that laid out in your html, add aria labels to your sections.
    Is the code semantic?
  • Having semantic code means that when viewing the code sections are named for their purpose.
  • HTML5 does a great job of this, but there are cases when the guidelines suggest you also use the aria labels. For example, the header of the page should also include the aria=”banner” attribute.
  • Are there sections of the page that a visitor might like to skip?
    Including skip links at the top of the page to guide folks to the main content and/or the navigation can be very helpful for folks using a keyboard for navigating. This advantage is even more pronounced for folks using more tailored assistive technology.

Some techniques to consider

ARIA Roles

Accessible Rich Internet Applications or ARIA are a guidelines for accessible programming. The documentation includes usage guidelines on page roles. There are specific names for roles of different page parts. Remember that there should be only one role per page. For example there should only be one item with the role of navigation, even though you might have multiple navigations on your page. By adding landmark roles to your code you can potentially make life much easier for people using screen readers.

banner: A region that contains the prime heading or internal title of a page.
complementary: Any section of the document that supports the main content, yet is separate and meaningful on its own.
contentinfo: A region that contains information about the parent document such as copyrights and links to privacy statements.
form: A region of the document that represents a collection of form-associated elements, some of which can represent editable values that can be submitted to a server for processing.
main: Main content in a document. In almost all cases a page will have only one role=”main”.
navigation: A collection of links suitable for use when navigating the document or related documents.
search: The search tool of a Web document.
application: A region declared as a web application, as opposed to a web document. (note: The role of application should only be used with caution because it gives a signal to screen reading software to turn off normal web navigation controls. Simple widgets should generally not be given the application role, nor should an entire web page be given the application role, unless it is not to be used at all like a web page, and not without much user testing with assistive technology.)

Source: https://www.w3.org/WAI/GL/wiki/Using_ARIA_landmarks_to_identify_regions_of_a_page

Alt(ernative) Text

Simple enough, right? Add an alt tag to your images, ex. <img src=”path/to/image” alt=”A programmer working hard to bring this site to life!”> That’s the start, but this item includes all non-text content. This includes controls, time-based media, test, sensory, and captcha. For decorative content, the guideline recommends that it is used in a way that, if disabled, does not interfere with the usage of the site (i.e. it can safely be ignored).

Skipping links

Skip links are links that are hidden from visitors, unless those visitors are using assistive technology. The newer web readers utilize the aria roles to skip around the page, but these links are good for backward compatibility. Thomas Bradley has a great 5 minute video on how to utilize them here. There’s nothing particularity fancy about it. They’re just a navigation ul that is hidden with css (using a negative margin). When focused the negative margin is removed.
Check out Thomas’ video: https://www.youtube.com/watch?v=UnEItq289lU&list=PLWjCJDeWfDdcEtSnqq_iGLKGA_H_3o3y7&index=5

 

Keep your eye on the big picture

These are just a few techniques that will help make your pages more accessible. There is more to it than this. For a more comprehensive list of items and techniques, check out the W3C WCAG quick reference, https://www.w3.org/WAI/WCAG20/quickref/. When thinking about coding for accessibility consider POUR: Perceivable, Operable, Understandable, and Predictable. This will have benefits to the folks needing help. It will help you as the developer and content producer consider the structure of your content, and it will increase your search engine optimization.

An introduction to accessible websites

Image of Accessible IconsWhat does it mean to have an accessible website?

People with disabilities can perceive, understand, navigate, and interact with the site. Interaction includes being able to read and write.

It’s more than the ability to interact. Building accessible websites is about the experience provided by the designer and coder to folks with a variety of challenges, including visual, auditory, physical, speech, cognitive, and neurological challenges.

Making a website accessible is not always straight forward. Making the right choices is key to providing a user experience that is appropriate for all audiences. Accessibility isn’t about compliance with section 508 of the Rehabilitation Act (https://www.section508.gov/ & https://en.wikipedia.org/wiki/Section_508_Amendment_to_the_Rehabilitation_Act_of_1973). It’s about UX.

It’s about being inclusive and broadening the scope of your audience. One of the great things about accessibility is that it helps in other aspects of your website. For example, one of the important techniques in accessibility programming is the inclusion of alt tags for images. Alt tags also help with search engine optimization. Another example is the structure of your pages. Pages with clear hierarchy in headings are accessible and also more readable for non-challenged audiences.

Making the case for accessibility

Building an accessible website or retrofitting a site is time-intensive and takes the skill of a professionally trained programmer and strategist. It costs money and takes time. For people interested in promoting accessibility in their organization there are several ways to frame the discussion.

  • Inclusiveness: The most important case for building accessible websites is inclusiveness and to aid folks who need the help.
  • Avoid Fines: Did you know that if you accept federal dollars you must make, not only you website, but all digital documents accessible? The fees for non-compliance can be hefty.
  • Content Organization: Building accessible websites encourages the organization and optimizing of your content.
  • SEO: Accessible websites are inherently optimized for search engines.

Photo of a hand writing "Human Resources"Assembling Resources

There are a variety of skills and resources needed to develop an accessible strategy. Often many of these roles are played by the same person.

  • User Research Team: Includes folks with disabilities.
  • Content Strategist/ Information Architect: Performs tasks related to macro and micro content. They decide which labels and names should be used. They determine key clues to help audience navigate and perform actions.
  • Interaction Designer: Develop wireframe and interactive maps to best accommodate information flow.
  • UX Designer: Develop the interface that best accommodates both challenged and non-challenged visitors.

 

 

Accessibility to web content is more than a trend. It is a key for everyone to access your content.

It’s a human rights issue, and a very big deal.

Resources

W3C Web Accessibility Initiative: Introduction to Web Accessibility

W3C Web Accessibility Initiative: Developing a Web Accessibility Business Case for Your Organization

Social Media meets Social Psychology

Using Social Psychology in Social Media Marketing - Half Full Using Social Psychology in Social Media Marketing - Half Full

Utilizing cognitive bias to help frame your messages

Psst…  I’m going to tell you something that folks have been taking advantage of for years.

How you frame a message sometimes has more impact than the message itself.

I’ll tell you what I mean.

We are influenced by what social psychologists call cognitive biases (note the plural). You, me, your great-grandmother, the guy down the street, the person you last talked to on the phone… everyone has cognitive bias. Marketers have been using cognitive bias to influence you for years. It’s time you took some of that power to shape your own social media messages.

There are hundreds if not thousands of cognitive biases. Let’s identify a few and give some examples of how you might incorporate them into your campaigns.

What is a cognitive bias?

First off let’s get our minds around exactly what a cognitive bias is. Wikipedia defines cognitive bias as:

A cognitive bias refers to a systematic pattern of deviation from norm or rationality in judgment, whereby inferences about other people and situations may be drawn in an illogical fashion. Individuals create their own “subjective social reality” from their perception of the input.

-Wikipedia

Whoa, what does that mean?

Well put more simply, a cognitive bias is the tendency for folks to filter messages through their experiences and belief systems. For example, folks see the above glasses as half full or half empty? How your audience answers that question might indicate how receptive they might be to one type of message or another.

As a side note, utilizing cognitive bias in one’s social media campaigns necessitates  a well thought out persona of your audience, but that’s a talk for another time.

Examples of Cognitive Bias

Ok, let’s jump in with a few examples of cognitive bias and how you might use it in your messaging.

The Endowment Effect

This is the fact that people tend to ascribe more value to things merely because they own them.

Ways you might use it in your messaging:

  • Find ways to offer ownership in your campaigns.
  • Ask questions.
  • Encourage sharing.
  • Encourage participation.
  • Encourage audience to invite friends to participate.
  • More?

This next one is related…

Loss Aversion

It has to do with the idea that the pain of loss is almost twice as strong as the reward from a gain.

  • Discover your customer’s challenges and reservations, and alleviate their concerns up front.
  • Risk-free trials and money-back guarantees are one way to deal with loss aversion.
  • Remove the fear of loss from the equation.

In-group favoritismWorking out cognitive bias

This refers to how we favor members of our in-group over out-group members. For example, people will seek to make more internal (dispositional) attributions for events that reflect positively on groups they belong to and more external (situational) attributions for events that reflect negatively on their groups.

To use it in your messaging…

  • Create tiers or levels of engagement.
  • Reward your audience by giving them a special status.

Consistency Principle

People will change their opinion to confirm with their previous statements or actions.

To use it in your messaging…

  • Have audience contribute or approve a message.
  • Have audience share message or better have them create their own message in line with your goals.
  • Try to have your audience make a public commitment.

We’re just scratching the surface

There are MANY cognitive biases. This is just four. To give you some idea of the depth of this research see the list below.

One more thing

People are smart and they don’t like being taken for a dupe. If someone notices that you’ve been trying to pull their strings it will be a significant turn-off. That being said, we’re all wired the same way. Utilizing techniques related to cognitive bias could make a big difference in the affect and effect of your message.

A list

Ambiguity effect   The tendency to avoid options for which missing information makes the probability seem “unknown.”Anchoring or focalism   The tendency to rely too heavily, or “anchor,” on one trait or piece of information when making decisions (usually the first piece of information that we acquire on that subject)
Attentional bias   The tendency of our perception to be affected by our recurring thoughts.
Availability heuristic   The tendency to overestimate the likelihood of events with greater “availability” in memory, which can be influenced by how recent the memories are or how unusual or emotionally charged they may be.
Availability cascade   A self-reinforcing process in which a collective belief gains more and more plausibility through its increasing repetition in public discourse (or “repeat something long enough and it will become true”).
Backfire effect   When people react to disconfirming evidence by strengthening their beliefs.
Bandwagon effect   The tendency to do (or believe) things because many other people do (or believe) the same. Related to groupthink and herd behavior.
Base rate fallacy or base rate neglect   The tendency to ignore base rate information (generic, general information) and focus on specific information (information only pertaining to a certain case).
Belief bias   An effect where someone’s evaluation of the logical strength of an argument is biased by the believability of the conclusion.
Bias blind spot   The tendency to see oneself as less biased than other people, or to be able to identify more cognitive biases in others than in oneself.
Cheerleader effect   The tendency for people to appear more attractive in a group than in isolation.
Choice-supportive bias   The tendency to remember one’s choices as better than they actually were.
Clustering illusion   The tendency to overestimate the importance of small runs, streaks, or clusters in large samples of random data (that is, seeing phantom patterns).
Confirmation bias   The tendency to search for, interpret, focus on and remember information in a way that confirms one’s preconceptions.
Congruence bias   The tendency to test hypotheses exclusively through direc testing, instead of testing possible alternative hypotheses.
Conjunction fallacy   The tendency to assume that specific conditions are more probable than general ones.
Conservatism or regressive bias   A certain state of mind wherein high values and high likelihoods are overestimated while low values and low likelihoods are underestimated.
Conservatism (Bayesian)   The tendency to revise one’s belief insufficiently when presented with new evidence.
Contrast effect   The enhancement or reduction of a certain perception’s stimuli when compared with a recently observed, contrasting object.
Curse of knowledge   When better-informed people find it extremely difficult to think about problems from the perspective of lesser-informed people.
Decoy effect   Preferences for either option A or B changes in favor of option B when option C is presented, which is similar to option B but in no way better.
Denomination effect   The tendency to spend more money when it is denominated in small amounts (e.g. coins) rather than large amounts (e.g. bills).
Distinction bias   The tendency to view two options as more dissimilar when evaluating them simultaneously than when evaluating them separately.
Duration neglect   The neglect of the duration of an episode in determining its value
Empathy gap   The tendency to underestimate the influence or strength of feelings, in either oneself or others.
Endowment effect   The fact that people often demand much more to give up an object than they would be willing to pay to acquire it.
Essentialism   Categorizing people and things according to their essential nature, in spite of variations.
Exaggerated expectation   Based on the estimates, real-world evidence turns out to be less extreme than our expectations (conditionally inverse of the conservatism bias).
Experimenter’s or expectation bias   The tendency for experimenters to believe, certify, and publish data that agree with their expectations for the outcome of an experiment, and to disbelieve, discard, or downgrade the corresponding weightings for data that appear to conflict with those expectations.
Focusing effect   The tendency to place too much importance on one aspect of an event.
Forer effect or Barnum effect   The observation that individuals will give high accuracy ratings to descriptions of their personality that supposedly are tailored specifically for them, but are in fact vague and general enough to apply to a wide range of people. This effect can provide a partial explanation for the widespread acceptance of some beliefs and practices, such as astrology, fortune telling, graphology, and some types of personality tests.
Framing effect   Drawing different conclusions from the same information, depending on how or by whom that information is presented.
Frequency illusion   The illusion in which a word, a name or other thing that has recently come to one’s attention suddenly seems to appear with improbable frequency shortly afterwards (see also recency illusion).[37] Colloquially, this illusion is known as the Baader-Meinhof Phenomenon.
Functional fixedness   Limits a person to using an object only in the way it is traditionally used.
Gambler’s fallacy   The tendency to think that future probabilities are altered by past events, when in reality they are unchanged. Results from an erroneous conceptualization of the law of large numbers. For example, “I’ve flipped heads with this coin five times consecutively, so the chance of tails coming out on the sixth flip is much greater than heads.”
Hard–easy effect   Based on a specific level of task difficulty, the confidence in judgments is too conservative and not extreme enough.
Hindsight bias   Sometimes called the “I-knew-it-all-along” effect, the tendency to see past events as being predictable at the time those events happened.
Hostile media effect   The tendency to see a media report as being biased, owing to one’s own strong partisan views.
Hot-hand fallacy   The “hot-hand fallacy” (also known as the “hot hand phenomenon” or “hot hand”) is the fallacious belief that a person who has experienced success has a greater chance of further success in additional attempts.
Hyperbolic discounting   Discounting is the tendency for people to have a stronger preference for more immediate payoffs relative to later payoffs. Hyperbolic discounting leads to choices that are inconsistent over time – people make choices today that their future selves would prefer not to have made, despite using the same reasoning. Also known as current moment bias, present-bias, and related to Dynamic inconsistency.
Identifiable victim effect   The tendency to respond more strongly to a single identified person at risk than to a large group of people at risk.
IKEA effect   The tendency for people to place a disproportionately high value on objects that they partially assembled themselves, such as furniture from IKEA, regardless of the quality of the end result.
Illusion of control   The tendency to overestimate one’s degree of influence over other external events.
Illusion of validity   Belief that furtherly acquired information generates additional relevant data for predictions, even when it evidently does not.
Illusory correlation   Inaccurately perceiving a relationship between two unrelated events.
Impact bias   The tendency to overestimate the length or the intensity of the impact of future feeling states.
Information bias  The tendency to seek information even when it cannot affect action.
Insensitivity to sample size   The tendency to under-expect variation in small samples
Irrational escalation   The phenomenon where people justify increased investment in a decision, based on the cumulative prior investment, despite new evidence suggesting that the decision was probably wrong. Also known as the sunk cost fallacy.
Less-is-better effect   The tendency to prefer a smaller set to a larger set judged separately, but not jointly
Loss aversion   “the disutility of giving up an object is greater than the utility associated with acquiring it”.(see also Sunk cost effects and endowment effect).
Mere exposure effect   The tendency to express undue liking for things merely because of familiarity with them.
Money illusion   The tendency to concentrate on the nominal value (face value) of money rather than its value in terms of purchasing power.
Moral credential effect   The tendency of a track record of non-prejudice to increase subsequent prejudice.
Negativity effect   The tendency of people, when evaluating the causes of the behaviors of a person they dislike, to attribute their positive behaviors to the environment and their negative behaviors to the person’s inherent nature.
Negativity bias   Psychological phenomenon by which humans have a greater recall of unpleasant memories compared with positive memories.
Neglect of probability   The tendency to completely disregard probability when making a decision under uncertainty.
Normalcy bias   The refusal to plan for, or react to, a disaster which has never happened before.
Not invented here   Aversion to contact with or use of products, research, standards, or knowledge developed outside a group. Related to IKEA effect.
Observation selection bias   The effect of suddenly noticing things that were not noticed previously – and as a result wrongly assuming that the frequency has increased.
Observer-expectancy effect   When a researcher expects a given result and therefore unconsciously manipulates an experiment or misinterprets data in order to find it (see also subject-expectancy effect).
Omission bias   The tendency to judge harmful actions as worse, or less moral, than equally harmful omissions (inactions).
Optimism bias   The tendency to be over-optimistic, overestimating favorable and pleasing outcomes (see also wishful thinking, valence effect, positive outcome bias).
Ostrich effect   Ignoring an obvious (negative) situation.
Outcome bias   The tendency to judge a decision by its eventual outcome instead of based on the quality of the decision at the time it was made.
Overconfidence effect   Excessive confidence in one’s own answers to questions. For example, for certain types of questions, answers that people rate as “99% certain” turn out to be wrong 40% of the time.
Pareidolia   A vague and random stimulus (often an image or sound) is perceived as significant, e.g., seeing images of animals or faces in clouds, the man in the moon, and hearing non-existent hidden messages on records played in reverse.
Pessimism bias   The tendency for some people, especially those suffering from depression, to overestimate the likelihood of negative things happening to them.
Planning fallacy   The tendency to underestimate task-completion times.
Post-purchase rationalization   The tendency to persuade oneself through rational argument that a purchase was a good value.
Pro-innovation bias   The tendency to have an excessive optimism towards an invention or innovation’s usefulness throughout society, while often failing to identify its limitations and weaknesses.
Pseudocertainty effect   The tendency to make risk-averse choices if the expected outcome is positive, but make risk-seeking choices to avoid negative outcomes.
Reactance   The urge to do the opposite of what someone wants you to do out of a need to resist a perceived attempt to constrain your freedom of choice (see also Reverse psychology).
Reactive devaluation   Devaluing proposals only because they are purportedly originated with an adversary.
Recency illusion   The illusion that a word or language usage is a recent innovation when it is in fact long-established (see also frequency illusion).
Restraint bias   The tendency to overestimate one’s ability to show restraint in the face of temptation.
Rhyme as reason effect   Rhyming statements are perceived as more truthful. A famous example being used in the O.J Simpson trial with the defense’s use of the phrase “If the gloves don’t fit, then you must acquit.”
Risk compensation / Peltzman effect   The tendency to take greater risks when perceived safety increases.
Selective perception   The tendency for expectations to affect perception.
Semmelweis reflex   The tendency to reject new evidence that contradicts a paradigm.
Social comparison bias   The tendency, when making hiring decisions, to favour potential candidates who don’t compete with one’s own particular strengths.
Social desirability bias   The tendency to over-report socially desirable characteristics or behaviours in one self and under-report socially undesirable characteristics or behaviours.
Status quo bias   The tendency to like things to stay relatively the same (see also loss aversion, endowment effect, and system justification).
Stereotyping   Expecting a member of a group to have certain characteristics without having actual information about that individual.
Subadditivity effect   The tendency to judge probability of the whole to be less than the probabilities of the parts.
Subjective validation   Perception that something is true if a subject’s belief demands it to be true. Also assigns perceived connections between coincidences.
Survivorship bias   Concentrating on the people or things that “survived” some process and inadvertently overlooking those that didn’t because of their lack of visibility.
Time-saving bias   Underestimations of the time that could be saved (or lost) when increasing (or decreasing) from a relatively low speed and overestimations of the time that could be saved (or lost) when increasing (or decreasing) from a relatively high speed.
Unit bias   The tendency to want to finish a given unit of a task or an item. Strong effects on the consumption of food in particular.
Well travelled road effect   Underestimation of the duration taken to traverse oft-traveled routes and overestimation of the duration taken to traverse less familiar routes.
Zero-risk bias   Preference for reducing a small risk to zero over a greater reduction in a larger risk.
Zero-sum heuristic   Intuitively judging a situation to be zero-sum (i.e., that gains and losses are correlated). Derives from the zero-sum game in game theory, where wins and losses sum to zero.[69][70] The frequency with which this bias occurs may be related to the social dominance orientation personality factor.

Source: https://en.wikipedia.org/wiki/List_of_cognitive_biases

 

 

Raising a child (Theme)

Raising your first child theme

A child theme is a copy of a design for WordPress. It’s a way to modify a WordPress theme in a non-destructive way.

Raising your first child theme

First off, what is a child theme?

A child theme is a copy of a design for WordPress. It’s a way to modify a WordPress theme in a non-destructive way.

Why should I use a child theme for my WP site?

  • Developing a child theme is an excellent way to begin learning how to develop themes for WordPress.
  • It is a great way to rapidly develop themes.
  • Developing a child theme allows you to “lean” on the development of other programmers (some of whom are more detail-oriented than you are). It allows you to develop highly advanced themes in very little time.
  • It’s trendy.

Before you get started:

First off I’m assuming you have some experience with PHP, MySQL, and WordPress. This includes some experience theming for WordPress.

Ready, Set, Go!

The first step is to go to WordPress.org and download a fresh WordPress code base (click on the blue “Download WordPress” button).

Fire up your local web development environment using XAMP or similar service. I have an actual LAMP (Lynux Apache MySQL PHP) stack on my development machine. I find this to be a bit cleaner and less buggy. However you do it, install and get WordPress running in an environment you have access to.

Find a theme you’d like to work with. In this tutorial we’ll work with the twenty thirteen theme that shipped with WordPress. The most recent version of WordPress does not include Twenty Thirteen. To get it click to: https://wordpress.org/themes/ and search for twenty thirteen. Download it and add it to your themes directory in the wp-content/themes folder.

Getting down to it…

  1. Select a theme you’ll make a child of.
  2. Create a folder and give it a name that matches the parent theme. Place this folder in the wp-content/themes directory of your installation. In this example, I’m using the twenty thirteen theme that ships with WordPress. My folder name is twentythirteen-child.
  3. In your new folder create a style.css file and add information to the top of the page, so WordPress knows which theme is the parent.

/*

Theme Name:   Twenty Thirteen Child Theme
URI:    http://example.com/twenty-thirteen-child/
Description:  Twenty Thirteen Child Theme
Template:     twentythirteen
Version:      1.0.0
License:      GNU General Public License v2 or later License
URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  twentythirteen-child

*/

(This bit of code in your css file tells wordpress about the theme)

Note: The Template should be the same name as the parent theme directory, and the Text Domain should be the same name as the child theme directory.

4. Create a functions.php file and add it to your theme directory.

Add the following code:

<?php
function my_theme_enqueue_styles() {

$parent_style = ‘parent-style’; // This is parent’s style.

wp_enqueue_style( $parent_style, get_template_directory_uri() . ‘/style.css’ );
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style ),
wp_get_theme()->get(‘Version’)
);
}
add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );
?>

(This bit of code points any parent javascript or css to your new theme.)

Don’t forget to add the opening and closing php tags: <?php … ?>

5. That’s it. You now should see your child theme in the Themes directory.

Well, that’s great. Now what??

Now you start making modifications to the theme. For example, in the twenty thirteen theme there is a tan color for the navigation bar background. If you wanted to change that to a different color, add a rule for that style.

Yikes! How do I find what the rule is called??

Firefox and Chrome both have a code inspector. If you’re using either of those browsers, right-click on the element you’re interested in, than click “inspect element.” A split screen will appear showing you the html and css for that spot in the code. It’s a super handy way to inspect site designs.

Once you’ve determined what the class for the nav bar (or whatever element you might want to style), add the new rule to your style.css file (under the header that you added in a previous step) in your child theme directory (e.g. wp-content/themes/twentythirteen-child/style.css).

For changes in the structure of pages, you’ll create template files in your child theme directory. For example, if you wanted to change the format of the footer, you’d copy the footer.php file from the twentythirteen theme directory into the child theme directory (twentythirteen-child). Your child theme directory would now have three files (style.css, functions.php, and now footer.php).

Any template file in the child theme directory will overwrite the parent template file. Just like any rule in the child theme’s style.css file will overwrite any rule in the parent style. If the file is not there the child theme defaults to the parent’s files and rules.

…and that folks is how it works.

For further reading…

This is just scratching the surface of theming for WordPress, but it’s a great way to get started.

Please see the following links for more information about theming:

Codex Page for child themes: https://codex.wordpress.org/Child_Themes
WordPress Codex Main Page: https://codex.wordpress.org/Main_Page
Theme Development: https://codex.wordpress.org/Theme_Development
Template Files: https://codex.wordpress.org/Stepping_Into_Templates
Infographic on the Anatomy of a Theme: https://yoast.com/wordpress-theme-anatomy/