Clases que genera WordPress automaticamente para facilitarnos la vida y que algunos desconocíamos

1. Clases CSS en
WordPress

2. César Aquino Maximiliano
@cesjam7
+

3. Clases CSS
.content .text {
font-size: 1.4rem;
margin-left: 12px;
}

4. ¿Clases CSS?
¿WordPress?

5. Clases que genera WordPress:
.home
.single-product
.search
.page-contact
.post-514
.menu-item-69
.status-publish

6. Ya muy bonito, pero…

7. Ya muy bonito, pero… ¿sirven?

8. body_class();
.archive
.search-no-results
.error404
.single-product
.page-contact
.logged-in
.admin-bar
http://codex.wordpress.org/Function_Reference/body_class

9. archive.php
.post-type-archive-product {
background: url(product.jpg);
}
.post-type-archive-event {
background: url(event.jpg);
}
http://codex.wordpress.org/Function_Reference/body_class

10. post_class();
.post-610
.type-noticias
.has-post-thumbnail
.status-publish
.tag-futbol
.category-deporte
http://codex.wordpress.org/Function_Reference/post_class

11. single.php
.type-noticias {
padding-left: 50px;
}
.type-noticias.has-post-
thumbnail {
padding-left: 0px;
}
http://codex.wordpress.org/Function_Reference/post_class

12. wp_nav_menu();
.menu-item
.current-menu-item
.menu-item-has-children
.menu-item-666
.current-menu-parent
.menu-item-object-page
http://codex.wordpress.org/Function_Reference/wp_nav_menu

13. header.php
.current-menu-item,
.current-menu-parent {
background: #c00;
}
http://codex.wordpress.org/Function_Reference/wp_nav_menu

14. ¿Y si jugamos con JavaScript y sus
selectores CSS?

15. ¿Y si jugamos con JavaScript y sus
selectores CSS?
main.js
$(‘.menu-item-has-children
ul’).addClass(‘menu-submenu’);

16. ¿Y las clases del wp-admin?

17. ¿Y las clases del wp-admin?

19. functions.php
function border_colors() {
echo '<style type="text/css">
#categorydiv.postbox {
border: 1px solid #000;
}
</style>';
add_action('admin_head', 'cborder_colors');

20. Gracias ;)
+ @cesjam7
+ jovenred.com
+ databomberos.com
+ orange612.com
+ speakerdeck.com/cesjam7

21. Gracias ;)
+ @cesjam7
+ jovenred.com
+ databomberos.com
+ orange612.com
+ speakerdeck.com/cesjam7
PD: En caso de emergencias llamen al 116