Pseudo-classes and pseudo-elements
Featured
Reply
WP icons, Dashicons
Print page
<a href="javascript:window.print()">Udskriv side</a>
Pseudo-class :last-child not working
Pseudo-classe li:last-child not working if not in direct child.
:last-child NOT working
<ul> <a href=""><li>first child</li></a> <a href=""><li>middle child</li></a> <a href=""><li>last child</li></a> </ul>
:last-child working
<ul> <li><a href="">first child</a></li> <li><a href="">middle child</a></li> <li><a href="">last child</a></li> </ul>
Add excerpt to pages
add_action( 'init', 'my_add_excerpts_to_pages' );
function my_add_excerpts_to_pages() {
add_post_type_support( 'page', 'excerpt' );
}http://www.wpbeginner.com/plugins/add-excerpts-to-your-pages-in-wordpress/
Filtered posts
Ultimate WP Query Search Filter
https://wordpress.org/plugins/ultimate-wp-query-search-filter/
Column
.content-archive-links-single {
-webkit-column-count: 5; /* Chrome, Safari, Opera */
-moz-column-count: 5; /* Firefox */
column-count: 5;
-webkit-column-width: 150px;
-moz-column-width: 150px;
column-width: 150px;
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-moz-column-gap: 10px; /* Firefox */
column-gap: 10px;
-webkit-column-rule: 4px outset #ff00ff; /* Chrome, Safari, Opera */
-moz-column-rule: 4px outset #ff00ff; /* Firefox */
column-rule: 4px outset #ff00ff;
}Resource:
Ordered list, start number
<ol start="3">
<li>Google Chrome</li>
<li>Internet Explorer</li>
<li>Mozilla Firefox</li>
<li>Safari</li>
<li>Opera</li>
</ol>Resource: https://css-tricks.com/almanac/properties/l/list-style/
Unordered list (ul) custom list style
How to control list style:
- type
- color
- size
- position
#sidebar li:before {
content: "» ";
color: #999; /* or whatever color you prefer */
font-size: 26px;
vertical-align: text-top;}List all tags outside loop
<h3>Tags</h3>
<ul>
<?php $tags = get_tags();
if ($tags) {
foreach ($tags as $tag) {
echo '<li><a href="' . get_tag_link( $tag->term_id ) . '" title="' . sprintf( __( "View all posts in %s" ), $tag->name ) . '" ' . '>' . $tag->name.'</a></li> ';
}
} ?>
</ul>