Wordpress Flashcards
What PHP function can be called to get the name of the blog (for templating)?
bloginfo(‘name’);
What PHP function can be called to get the name of the stylesheet?
bloginfo(‘stylesheet_url’);
What function is used to include the header of a theme file?
get_header()
What function is used to include the footer of a theme file?
get_footer()
What function is called just before the end of the head block of a theme to allow wordpress to ‘hook’ into the head?
wp_head()
What function is called just before the end of the body tag, so that wordpress can provide hooks for plugins?
wp_footer()
What function is used to get the template directory?
i.e. in templates, you may need to specify the root folder the images and content lives in
echo get_template_directory_uri();
How do you setup a query for posts?
query_posts(‘posts_per_page’);
How do you iterate through the posts from a query?
while(have_posts()) {
the_post();
the_permalink();
}
How do you get the heading of a post?
the_post();
How do you get the link to a post?
the_permalink();
Once you’ve made your query using query_posts - what should you do to clean up?
wp_reset_query()
Should a theme use query_posts?
No - it may fail, and is inefficient. I would use pre_get_posts action.
What function do you call to get the content of a post?
the_content();
This is normally done in a page called single.php
How do we get the thumbnail for the post?
the_post_thumbnail(array(300, 300));
How can we determine if a page is the front page?
You can use the function
is_front_page();
What method gives you the title?
the_title();
What method gives you the permalink?
the_permalink()
Why is it we can see a 980px layout on a 320px size iPhone screen?
There is the notion of viewports and screen sizes. The viewport is 980px, and the screen size is 320px. The web page is first loaded into the viewport then resized to the screen size.
What is the following meta-tag doing?
meta name=”viewport” content=”width=device-width”
It is telling the device to match the viewport width with the device width. Using the meta tag is probably the best supported method, and easier than specifying viewport sizes on a per device basis.
The initial-scale part of the meta tag does what?
It controls the amount of zoom applied to the webpage - note, it is just the initial zoom, the user can change it.
Because some older browsers do not know how to deal with media queries, what library can we use to fix this?
respond.js
Whats the difference between
@media and (max-width:632px)
and
@media screen and (max-width:632px)
Not a lot - it’s very similar - however, the use of the term screen specifies we are only targetting screen media types, and not other types such ‘print’.
Whats the difference between
@media screen and (max-width:632px)
@media only screen and (max-width:632px)
Basically the ‘only’ keyword hides the media query from older browsers. According to the W3C, the user-agent must process the only keyword as if it isn’t present, but older browsers don’t recognise it, so they ignore it.
What is code like Respond.js and Htmlshiv referred to as?
Pollyfil. - or Pollyfiller - because they fill the gaps in terms of code that is not present on older browsers.
What is a breakpoint in regards to CSS?
The moment where the browser layout switches between media queries, from one layout to another.
How do we space our min-width / max-width values so there isn’t overlap?
Make sure the styles min-width value is 1px higher than the max-width
How do you setup XAMPP security?
/Applications/XAMPP/xamppfiles/xampp security
In XAMPP - if you get writing file permissions, what do you need to do?
Make sure you have the Wordpress installation saved with the right user for Webserver. Under XAMPP it is likely daemon.
What should you install in order to obtain better developer tools?
Developer plugin by Automatic. This will include additional plugins.
What base theme can be used to start a new web theme?
_s or Underscores
written by automatic
When a user comes to a WP site, they will enter a URL for the resource they want - for instance “http://foobar.com/about”. That page gets mapped to what?
Different pages have different page types. You can think of these as templates. So the about page may have a type of “Page”. So it will be presented based on how the resource is mapped to the templates.
In styles.css you can add tags that describe the theme - what is the restriction on this?
You must use the tags that are made available by Wordpress.
Header.php page contains all the elements that are needed at the top of each HTML page, including:
The doctype, opening HTML, meta and title tags. Blog info, style sheets and website navigation.
The content files (page etc) are..
scaffolding files that call the header, footer and other files based on the content type.
The footer.php file contains…
information that typically goes at the bottom of the page - including closing tags - and in some cases, the calls to footer sidebars / widgets.
The index.php scaffolding file is important - why?
It’s purpose is to show the blogs index page, or any other index page - it is used if the system can’t locate the designated template page, such as page.php or single.php.
What does get_template_part do?
Loads a template part - you can call it like such to get the content part.
get_template_part(‘content’);
If you call it like this:
get_template_part(‘content’, ‘none’);
it will load the file “content-none.php”.
In order to prevent naming conflicts with the Wordpress core - what do we need to do?
Make sure all functions are uniquely named (Wordpress suggests either prefixing them with the theme name - or enclosing them in a class).
What does page.php do?
Scaffolding page for content, contains the “the_content” call that calls content-page.php
What does the search.php file do?
Scaffolding file where search results are shown.
What does the archive.php file do?
Scaffolding file in which archived pages are shown.
What does the comments.php file do?
Scaffolding file that is used to display comments.
What does the 404 file do/
Scaffolding file that is used to display 404 errors when files cannot be found.
What is the rtl.css file for?
It is a CSS file that is used for right-to-left languages.
What is the README.md file for?
Github readme file.
What is the functions.php file?
Add custom functions to the theme.
What is a Post Format?
It is a piece of metadata that can be used to customise the presentation of a post. This feature provides a standardised list of formats that are available to all themes that support the feature. The post format types are defined by Wordpress and new ones cannot be added. The author can select the post format from a radio button when creating a new post.
If we want to add custom JavaScript or Styles to a page - how do we do this?
We must use the functions.php file, and in the topcat_scripts function - call:
wp_enqueue_scripts
wp_enqueue_scripts
functions.
What is the difference between content-sidebar.css and sidebar-content.css?
content-sidebar is for sidebars on the right of the content. sidebar-content is for sidebars on the left of the content.
What file extension does localisation files have?
.pot, located in the
themes/yourthemename/languages
folder
What does the following JS file do in the theme JS directory directory?
skip-link-focus-fix.js
In opera and webkit browsers, when using the keyboard instead of the mouse to click on a skiplink, the browsers don’t properly move focus to their target. This is a fix for this.
What is a skip link?
A navigation link that is usually used to link to parts of the same page, to allow users to skip over repetitive content.
What goes in the “inc” folder of the theme?
Files that are used for extending the functionality of the theme.
Generally PHP files.
Does wordpress require tabs or spaces for the PHP coding standards?
tabs
Wordpress class names should use what convention?
Capitalised words, with underscores to separate them.
Which is correct for the Wordpress CSS coding standard?
h1, h2, h3 { }
or
h1,
h2,
h3 {
}
The second one:
h1,
h2,
h3 {
// Do CSS stuff here
}
What third party tool can be used to fix coding stanards issues with wordpress themes / plugins?
PHP Codesniffer
How do child themes allow functions to be “pluggable”?
Because a child theme can also include a “functions.php” file - it’s possible to override the function name in the parent theme. Simply redeclare it here - and it will override the parent themes function.
What must you do to ensure child themes work correctly?
Child themes are loaded before parent themes - so you must use the if (!function_exists(‘function_name’)) construct to ensure your theme will play nicely with child themes.
If we are planning to submit the theme to wordpress.org, what do we have to remember with regards to fonts?
We must include the fonts locally - and not use google.com font repository.
Often it’s enough to use wp_enqueue_style(‘nameoffont’, ‘location of font’); to get a font to work. But if there is an issue (such as wanting to use a font used by the WP core, that for some reason cant be accessed by the theme) - what should you do?
Register the font first:
wp_register_style(‘topcat-headings-font’, get_template_directory_uri() . ‘/css/open-sans.css’);
wp_enqueue_style(‘topcat-headings-font’);
In style.css the “reset” section overrides a number of settings - why?
The purpose of the reset section is override some of the default style sheet settings for reach browser. This means all browsers start with the same settings as opposed to their own settings.
Is the “reset” section in style.css meant to be changed?
no - in general it should be left as is.
How do you configure the tagline?
Settings | General | Tagline
What does the body_class function do?
It inserts the given classes into the body tag of the html based on where you are in the WP hiearchy.
What is the difference between the functions “the_title()” and “get_the_title”?
the_title will echo the title of the page out directly into HTML. get_the_title returns the title string.
Why does wordpress sometimes use query strings to pass data to functions?
Because some functions take a lot of parameters (some up to 24), and it allows you to just set the parameters you want to set.
What is the Yoda condition?
Putting the comparison variable on the right of an equality test to ensure you don’t accidentally use an assignment operator.
if (true === $theForce)
What are the naming conventions for Wordpress?
Functions and variables should be lowercase
Classnames should always be capitalised words
All constants should be uppercase
CamelCase should never be used
File names should be lowercase with words separated by hyphens.
What must be done with regards to HTML?
HTML code must pass validation of the W3C validator. All tags must be closed.
What does the constant WP_DEBUG_LOG do?
If set to true, stores all errors warnings and notifications in a debug.log file in wp-content folder.
What does WP_DEBUG_DISPLAY do?
Set to true by default, this option inserts all debug information as and when it happens. If you set it to false, you should really set WP_DEBUG_LOG to true so that the data goes somewhere.
What does the constant SCRIPT_DEBUG do?
Makes the wordpress environment use the development styles and scripts in case you are developing anything in the admin area.
What does the constant SAVEQUERIES do?
When set to true, saves all queries to the database as well. Causes heavy performance issues - but useful for debugging.
Wordpress theme names should never include any…
numbers - or else it wont be shown in the theme browser.
What is the absolute bare minimum number of files that can be in a theme?
index. php
style. css
What needs to be at the top of the style.css file?
Meta data in the form of comments:
Theme Name: foobar Theme URI: myurl Author: My name Author URI: My url Description: Version: License: License URI: Tags: Note - these tags are defined by WP Text Domain: Unique Identifier used for localisation - usually lowercase with no spaces version of themename
How do you add a screenshot to your theme?
Use an image of 600x450px, and call it screenshot.png. Place it in the root of the theme folder.
What are the basic template files that can be used to build a theme?
header. php
footer. php
sidebar. php
comments. php
searchform. php
What does the wp_title function do?
Returns the title of the page, based on where you are viewing the page from. Can be used anywhere in a theme, but most commonly in the title tag.
Which function holds the data required to display the admin bar when a user is logged in?
wp_footer()
If there is a 30px space at the top of your site, what have you likely forgot?
wp_footer() function
Is a comments.php template required in your theme?
Yes - if you want to show comments (you probably do). It used to have a default version that would be used if it wasn’t present, however this has been deprecated.
Is a searchform.php template required in your theme?
No - wordpress provides a default one if there isn’t one in your theme.
Rather than using php’s ‘include’ keyword, wordpress provides a set of functions that can be used to include the appropriate templates - what are they?
get_header() get_footer() get_sidebar() get_search_form() comments_template()
get_header, get_footer and get_sidebar can all be passed a string, what does that do?
You can specify an alternative template other than the default to use.
How would you specify a different sidebar to be used on specific pages?
Create a file called sidebar-secondary.php, then call it in the template you want to use it in like this:
get_sidebar(‘secondary’);
comments_template(), like get_header, can take a parameter specifying a special template - but what is different about it from get_header?
It requires a full filename and a relative path.
‘/custom-comments.php’.
It also takes a second parameter that determines whether to have the comment separated by type.
What is the purpose of the functions.php in wordpress?
To setup WP functionality such as post-thumbnails, or custom post types
To define functions that can be used throughout the theme
To change the WP admin or add in options page
What does add_theme_support function do?
Adds support for certain features available within Wordpress to the theme.
What is the list of features that can be added via add_theme_support function?
post-formats post-thumbnails custom-background custom-header automatic-feed-links html5 title-tag
What does the theme support “posts-formats” provide?
Post formats are a piece of meta-data that can be used to customise the way a post appears. Themes that implement posts-formats are not required to support all of the post types.
Can new post-formats be added to wordpress?
No, not through themes or even plugins.
What does the theme support for posts-thumbnails provide?
The post-thumbnail (now called featured image) is an image that is chosen as the representative image for a post, page or custom post type.
This adds a link on the edit post / edit page screens that allows you to set an image.
What does the theme support for html5 provide/
Allows the use of HTML5 markup in search forms, comment forms, galleries and captions.
What does the theme support for title tag do?
It allows you to control the title tag of a page. You should provide backwards compatability for older versions, since it’s a relatively recent addition.
How would you create a template for an about page?
You use the page.php template - and then add the name for the page (based on the pages slug)
page-{name}.php
so it would be:
page-about.php
What is single.php template for?
Single pages i.e. individual posts. It is also used when a custom post type needs to be displayed. If you are using custom post types, then you can target the post types.
single-post.php -> template for plain posts (all individual posts fall back to single.php if single-post.php does not exist).
So you can use single-{post-type}.php for all custom post types, and rely on single.php for standard posts.
What page is used if you link to post attachments?
single. php, however you can specify mime-type pages as well. You can also specify a “attachment.php” page for a simpler layout.
attachment. php
image. php
video. php
text. php
When is the archive.php file used?
It is used whenever a group of posts or information is being accessed through a query.
What pages can override the archive.php file?
There are a lot of them - but at the next level down:
taxonomy. php
category. php
tag. php
author. php
date. php
These can each be broken down further. i.e. category-{catname}.php
When is the front-page template used in WP?
When a static front page has been selected from the wordpress admin options, or it will be the default landing page if it exists, when a user goes to the base URL.
When is the home.php template used?
In two circumstances. As the main template for the website, or the main listing page template of your site when you have setup a static front page using the reading settings.
What is the search.php page used for?
Displays the results of any search performed on the site.
What url do you have to call to perform a search?
Perform a GET request on the home page with a query string:
foobar.com?s=shoes
Does a search for shoes - and will call search.php to present the results.
What function fetches the search results?
the_search_query();
The 404.php template is displayed by PHP when…
it can’t find the result for a query, a specific page, or post.
How do you create a custom page template?
You have to create a new file in the theme directory. It must not conflict naming wise with any of the reserved template names in the WP template hiearchy. It requires a meta data header like the CSS files:
- Template Name: Custom page type 1
What is a post format?
It’s a way of adding meta data to a post allowing more specific formatting and styling in a theme.
By default post types can be used for posts and custom post types, to add post formats to pages, you need to…
call add_post_type_support
// Add post-formats to post_type 'page'
add_post_type_support('page', 'post-formats');How can I test whether a post has a specific post format?
if (has_post_format(‘video’)) :
endif;
How would you get the post format as a string?
$format = get_post_format($post_id);
What is the most common way to get the post format?
Call in a special template part:
get_template_part(‘content’, get_post_format());
This code is using the result of get_post_format as a parameter to specify which template get_template_part should use.
How does get_template_part work?
It assumes the name of the template part to include is made of the components - slug and the second parameter. so:
get_template_part(‘content’, ‘video’); will look for content-video.php.
If it can’t find content-video.php, it will look for content.php. If it can’t do that - it will just fail silently and not load anything. You can add a path to a directory as part of the slug if you are keeping these files in different directories.
What is a good directory structure for a theme?
/ - the root directory with main template files and style.css lives.
/images/ main folder for all the images used in the theme.
/js/ All javascript files
/languages/ multilingual files stored here
/css/ Any additional css files (on top of style.css)
/inc/ additional php files for theme
/scss or /less - precompiler css files - compile down into style.css in root
wp_register_style
wp_register_script
These functions are used for…
Tells WP that a style or script is available for use, and gives them a handle.
wp_enqueue_style
wp_enqueue_script
These functions are used for…
Used to add the style sheet to a generated WP page through either wp_head, or wp_footer
What does add_action function do?
It’s a wordpress hook - and it lets you call a specified function at a specified time.
add_action(‘after_setup_theme’, ‘prowordpress_setup’);
prowordpress_setup is a custom function that is called when the “after_setup_theme” action occurs.
What function do you use to include a style sheet/
wp_enqueue_style
Which action hook should you use to load scripts and styles that are meant to be viewed on the front end?
wp_enqueue_scripts
Does WP_Query make database calls?
Not itself no, it acts as a gateway.
What are the two main things that happens in the main index.php file for Wordpress?
Themes are enabled
define(‘WP_USE_THEMES’, true);
and the wordpress environment is loaded:
require( dirname( __FILE__ ) . ‘/wp-blog-header.php’ );
Which file is responsible for setting up wordpress, making the database connections etc?
wp-load.php
How are have_posts and the_post related to WP_Query/
They are functional wrappers around that class.
What happens when have_posts reaches the end (i.e. it has looped through the counter it contains, and reached the end and returned false instead of true)?
It calls rewind_posts() so that Wordpress is ready to setup another loop should it need to.
What does the_post do?
When you call the_post, it goes through the current posts array, and sets up the data that is used to get the template tags, so you can start crafting the templates.
It also sets up the global $post variable and advances the loop counter, ready to access the next post when the_post () is called again.
Do you need to loop everytime when setting up posts?
You should - as this is convention in Wordpress - even if you THINK you only have one post for a specific page, there is no guarentee that if you sell the theme, that rule will be broken.
What are the three functions that WP gives you to customise a query?
query_posts
get_posts
WP_Query
