Wordpress 2 Flashcards
Wordpress uses a ……… templating system?
distributed
What principle is the templating system in wordpress based on?
DRY - Don’t Repeat Yourself.
What is one of the most important things you have to do in the functions.php to allow support of child themes?
You should wrap your functions in a conditional block:
if ( ! function_exists('the_name_of_function')) {
function the_name_of_function() {
}
}
This allows child theme creators to override your functions if they need to. This is referred to as “pluggable functions.”
Under appearance in the WP dashboard, there are some sub menus, like “themes”, “header” etc. Where are these defined?
In functions.php. There are entries for “add_theme_support” that allow you to add / remove options from the menu list.
The call to add extra stylesheets should always be done where?
In the head section of the markup - however, you don’t add these directly, you must use the enqueue function from functions.php
In the styles.css file there is a section called css reset - should you touch this?
No, in general leave it as is.
Why is it useful to use rem’s to resize fonts?
The rem (or relative em size) is based on the outer most element (the body tag) - in underscores for instance, this will be set to 100%, so when using rem’s you can be sure you are using a consistent sizing method, and you shouldn’t get screwed by hierarchical nonsense.
Not every browser supports rem sizing, how do you support a fallback?
Make sure you put both px and rem size, and make sure the rem size comes after the px size. That way, if rem isn’t supported it’s simply ignored, and if rem IS supported, it will overwrite the px size.
font-size: 16px;
font-size: 16rem;
How do you use hsl colors in your css?
color: #404040;
color: hsl(0, 0%, 25%);
NOTE: First 0 doesn’t have a percentage, and note that we are providing a fallback for browsers that don’t support it.
If you want different styles to apply to different pages, where should you put your css?
It should likely go into one of the css files (content-sidebar or sidebar-content) in the layouts folder. In order to load this, you need to enqueue it in the functions file.
What are the three main elements that are typically kept in the header.php file?
The site title, the site tagline and the main menu
The enqueue scripts are hooked into what function?
wp_head();
This means that all the styles, scripts etc that you enqueue in functions.php, will appear in the header at the location of the wp_head() call.
What is the custom header feature in wordpress?
It is a feature that allows the user to modify how the header is display. It must be enabled in wordpress, usually through the functions.php file (some themes may wrap the functions in a file in the inc directory).
What is one of the gotchas with using the custom header function?
There is an option (tick box) that allows you to disable the display of the site text. However, this means the HTML may still be showing in the header.php file.
When you setup a theme so that you can edit the theme in the customizer, where does the config occur?
In a js file called customizer.js (at least for the underscores theme it is).
If you make a change in customizer.js and it doesn’t change in the customizer, what may be the problem?
A lot of browsers will cache customizer.js, you must flush the cache in the browser.
What is the best tool for enabling keyboard control of menus?
Super Fish
How do you add a custom search form?
In the header, you can simply call get_search_form() and wordpress will give you the html for the form. You can add additional styling by wrapping the form in your own HTML.
If you are using something like font-awesome, it uses i tags to inject an icon/font into a page using CSS. What does this mean for accessibility?
If you are using a keyboard or screenreader, you will not be able to access the icon as it technically doesn’t exist. You should use a anchor link (a href) to make sure there is something for it to find. You can use the css (wordpress) class screen-reader-text to hide it so it doesn’t affect layout.
What css class can be used to hide an item and what is the caveat?
screen-reader-text
However, this is intended for items that should be invisible to a user, but visible to screen readers or keyboard input for accessibility purposes. Therefore you shouldn’t just use it on everything.
Wordpress refers to the location that widgets can go as the “sidebar” - is that technically the only place they can go?
No - that is legacy. Widgets can also go in the footer, or elsewhere on the page.
Where are widgetised areas created?
functions.php
What function is used to create a widgetised area?
register_sidebar()
What html element are widgets usually wrapped in?
An “aside” tag
What function is responsible for actually displaying the sidebar widget area?
dynamic_sidebar
You use this in sidebar.php, and test whether there is a dynamic side bar (this will be the name you defined in functions.php). If there isn’t one, you should output some basic default widgets instead.
What function is responsible for actually using the sidebar template?
get_sidebar(), which you would use in the other template files.
There is a default sidebar template called sidebar.php - and you call that with get_sidebar(). How would you call a custom sidebar template for a footer?
If you have called the sidebar file “sidebar-footer.php”, then you can call it from any template file with the following function:
get_sidebar(‘footer’);
What function can you use to test if there are widgets in the sidebar currently?
is_active_sidebar(‘sidebar-2’)
NOTE: You will want to use this in say, a footer. It allows you to do a conditional test, then bail out of the template, rather than printing the surrounding widget formatting area (which is fine in a traditional sidebar).
Masonry is a javascript script that tiles block elements nicely - how do you enable it in Wordpress?
You enqueue it in functions.php using the standard enqueuing process. By passing the array(‘masonry’) parameter in the enqueue function, you will tell it to load that inbuilt javascript.
How do you create a comments link in a post page, and make it so that it is contextual to none, 1 or more comments being present?
comments_popup_link(__(‘Leave a comment’, ‘my-simone’), __(‘1 Comment’, ‘my-simone’), __(‘% Comments’, ‘my-simone’));
If you call the comments_popup_link function on a page, but no comments show up, why might that be?
Comments could be disabled for the post.
When styling a list or a string where you want characters to appear only at certain screen sizes, how can you achieve this?
You can use CSS pseudo selectors
@media screen and (max-width: 1319px){
.posted-on:before {
content: ' on ';
}
.posted-on:after {
content: '.';
}
}
This would mean something likes like “January 15th”, would end up looking like “ on January 15th. “
What is one “odd” feature of using pseudo selectors to add content into an element?
You can’t use your mouse to select it, since it’s not actually in the HTML.
What are block quotes?
They are a HTML tag that makes the encapsulated text stand our from the surrounding content. It’s the same thing as in printed media when you get an excerpt of text floating within the column, quoting an important piece.
What is “Pull content”?
It’s basically block quotes that have been slightly pulled out of the flow, so that it stands out.
What built in wordpress class allows blocks to be left and right alligned?
alignright
alignleft
How can you change how many top level comments are displayed in a wordpress post?
In the admin screen, go to discussions. Then change the “break comments into pages with … x”
Here you can set the number of top level comments per page.
How are comments output?
If you look in the single.php, you will find a call to comments_template(), which calls the template file. This will normally be comments.php
What function ACTUALLY displays each comment?
wp_list_comments
What function displays the comments form that you can enter your comment into?
comment_form()
How do you change the default size of a gravatar image in the comments?
When you call wp_list_comments, pass an additional parameter:
‘avatar_size’ => 50
How do you hide gravatar images through code?
When you call wp_list_comments, pass an additional parameter:
‘avatar_size’ => 0
NOTE: By setting it to zero, WP will not make a call to gravatar, and the icons will not be displayed.
What do you have to take into consideration when styling comment forms?
There are two versions - one when you are logged in, and when you are just a visitor.
What can you do to reduce the amount of work you have to do when styling a comment form?
Just style the public version (i.e. not logged in version) - the logged in version will inherit those styles and capture most if not all of the possible requirements.
What considerations do you need to take into account when styling errors for comment forms?
Some errors only appear based on settings in wp-admin. Which means you’ll have to toggle them to test.
What class wraps the waiting for moderation error message?
content-awaiting-moderation
What were “featured images” previously called?
Post thumbnails
All of the images, text, titles etc of a post is stored in how many fields?
A single field - and is retrieved by “the_content()”.
Is the featured image contained within the same data as the main post?
No, it is separated, so that when building an index or front page, you don’t have to retrieve the entire post to just put the featured image up.
How to retrieve the featured image?
the_post_thumbnail()
If all the data for a single post is in one field, how would you get just a small portion of the article for a front page link?
the_excerpt()
Is it possible to define multiple thumbnail sizes (i.e. one on the front page, and one on the main post?)?
Yes - you can pass the defined name of the image to “the_post_thumbnail()”
How do you define what size of “featured images” are avilable to your theme?
You must have enabled post-thumbnails support to wordpress first.
Then use the function add_image_size
add_image_size(‘name’, width, height, crop);
(in functions.php)
If you use add_image_size and set the crop parameter to true, how does wordpress crop it?
It will scale the width to match the width, and then crop the height.
If you use add_image_size and set the crop parameter to false, how does wordpress crop it?
If the image is larger than the specified size, it will draw the image at the specified size (potentially stretching / squashing it).
How would you allow someone to upload an image that is basically any height?
If you set add_image_size with the following parameters:
add_image_size(‘name’, 780, 9999, true);
Then wordpress will make the image the appropriate width, but if the image is smaller than 9999 (which it should be) it will not crop it. This will allow someone to upload really tall images if required.
If you have used the downloadable test data - but only just changed the image size attributes for your theme, what can you do about the existing images that wont’ have thumbnails?
In the developer tools plugin, there is a tool called “regenerate thumbnails” - simply run this and it will create thumbnails based on the sizes specified in functions.php
Because “the_post_thumbnail” only returns the image code, what do you have to take into consideration with regards to wrapping it in a div for formatting?
If there is no image, then you should not output the div. You can test this using “has_post_thumbnail()”.
What are the main three ways we can display the content on an index page?
An excerpt, the first 55 words, or the full content.
How can the user define where to put the “read more” link if the full content is displayed on an index page?
By inserting the more tag within the content. This is via a button in the WYSIWYG editor in WP.
How do you customise the wording of the more tag?
Switch to text view in the editor, and find the more tag (which is just a comment with a more at the begining). Then change the text after the more tag.
When we create an excerpt, we should add a link to the bottom of the shortened text to allow a user to “read more”. What rel (relation) should this link be?
bookmark - because technically, this is a book mark.
What function can be used to create a navigation element that displays page numbers?
paginate_links
What function can you use to determine whether a post is “sticky”?
is_sticky
If you wanted to support the aside post format, and use a custom template to display it, what would you call the template?
content-aside.php
Which would be called from the index based on the function call:
get_template_part(‘content’, get_post_format());
Because the user has set the post as an “aside” where you call get_post_format, will be the word “aside”. Combined with the first parameter - “content-aside.php”.
What is an “aside” in wordpress?
It’s like a short blog post - generally doesn’t have a title, or a “read more” link. It would normally be read from the index page.
Can you create a new or custom post formats?
No - there are only the default ones. You can customise how the pages display using templates (content-[post format name].php).
What function can you use to determine whether the post you are reading is on the front page or in an archive?
is_font_page()
Test for this to determine if it is on the front page.
What function can you use to determine if the post you are reading is on the first or subsequent pages?
is_paged()
This will tell you if the posts are paged (i.e. on page 2 +)
What conditional statement could you use to get the first post, and only the first post (i.e. on a front page) so you can format it differently to the rest of the posts?
if ($wp_query->current_post == 0 &&
!is_paged() &&
is_front_page()) {
// Setup styles here. }
We are saying, if it’s the first item in the query result, and it’s not on a page (i.e. page 2 or more), and it’s a front page post (i.e. not an archive) - then bam.
What function can you use to get the title of a category archive?
single_cat_title()
What commonly requested custom page template is a good idea to include in your themes?
A no side bar custom page. Basically all the content aligned to the middle.
Why is it a good idea to separate your layout css styles into another file?
So when you are creating a custom page template, you can setup specific layout css - and it wont be interfered with by other styles.
How would you make an option for a template with the name “Page with no sidebar” appear in your page editor?
If you create a file called page-nosidebar.php (note - it doesn’t seem to matter that the page- prefix is there).
Then in the header, create a comment that has the following text:
/**
* Template Name: Page with no sidebar
*/
The option will appear in your page editor.
If you have created a new css file, for the purposes of laying out a custom page template, how do you make that css file load only for that page?
using is_page_template, you can pass it the name of the page template - if it matches, then enqueue the specific css file.
if (is_page_template(‘page-templates/page-nosidebar.php’)) {
wp_enqueue_style(‘my-sinome-layout-style’, get_template_directory_uri() . ‘/layouts/no-sidebar.css’);
}
Why is it a good idea to add custom styles to the editor?
So that when a user is editing a page, the editor accurately reflects what will be seen on the front page - the editor uses by default, the internal wp styles.
