Ako zacat robit vlastne WP temy a vyhnut sa castym chybam

1. Ako na vlastne WP temy

2. WP theme dev @ webikon
soundsystem @ cyklokuchyňa

3. Preco stavat custom a neklikat premium temy?

4. 20 sliderov!
15 dizajnov
60 shortcodov
50 templatov
18 druhov tlacitok
5 typov menu
800 novych nastaveni
v backende
onepage parallax
nekonecno farebnych kombinacii

6. ako zacat?
• codex.wordpress.org/Theme_Development
• index.php + style.css
• zaklady sa nauc “from scratch” a potom
si vyber starter temu
• _s (underscores.me)
• components (components.underscores.me)

7. nevymyslaj koleso
odznova
• codex.wordpress.org/Function_Reference
• <?php echo url_shorten( 'http://
www.example.com/an/article/with/a/
very/long/url' );
• example.com/an/article/with/a/ve...

8. Neopakuj sa,
get_template_part();

9. archive.php
<?php
while( have_posts() ) :
the_post();
if( get_post_type() == ‘post’ ) {
…markup pre post…
} elseif( get_post_type() == ‘product’ ) {
…markup pre produkt…

10. <?php
while( have_posts() ) :
the_post();
get_template_part(
‘loop’,
get_post_type()
);
loop-post.php
loop-product.php
…

11. Nauc sa pouzivat
hooky!

12. • do_action();
apply_filters();
• add_action();
add_filter();
• codex.wordpress.org/
Plugin_API/Hooks

13. • template:
do_action( ‘my_action’ );
• plugin:
add_action( ‘my_action’, ‘my_function’ )
function my_funcion() {
echo ‘hello wordcamp’;
}

14. • Nazov page *
• function add_asterisk( $title, $post_id ) {
if( get_post_type( $post_id ) == ‘page’ ) {
$title = $title . ‘*’;
}
return $title;
}
• add_filter( ‘the_title’, ‘add_asterisk’ );

15. • function order_posts( $query ) {
$query->set( ‘order’, ‘ASC’ );
}
• add_action( ‘pre_get_posts’,
‘order_posts’ );

16. prezentacia = tema
funkcionalita = modul
• templaty = tema
• CPT, taxonomie, metaboxy => modul
• mu-plugins FTW

17. mu-plugins
• funguju bez aktivacie
• nedaju sa deaktivovat ani zmazat z
admin rozhrania
• klient o nich ani nevie

18. wp-content/mu-plugins/
hello-wcba.php
<?php
// print hello wordcamp in footer
function wcba_hello() {
echo ‘Hello Wordcamp Bratislava’;
}
add_action( ‘wp_footer’, ‘wcba_hello’ );

19. boostrap?
foundation?
• pouzivaj sass/less a grunt/gulp
• includuj len to co potrebujes
• pouzivaj mixiny
• minifikuj v produkcii

20. foundation.css
<div class=“site row”>
<div class=“site-content small-12
medium-8 large—9”>…</div>
<div class=“site-sidebar small-12
medium-4 large-3>…</div>
<a class=“button secondary custom-class”…

21. foundation.scss
<div class=“site”>
<div class=“site-content”>…</div>
<div class=“side-sidebar”>…</div>
.site {
@include grid-row();
&-content {
@include grid-column();
@include breakpoint( medium ) {
@include grid-column(8);
…

22. github.com/Webikon/_s-foundation-sites

23. Neboj sa
customizera

24. diky