Ako na vlastne WP temy

WP theme dev @ webikon

soundsystem @ cyklokuchyňa

Preco stavat custom a neklikat premium temy?

20 sliderov!

15 dizajnov

60 shortcodov

50 templatov

18 druhov tlacitok

5 typov menu

800 novych nastaveni v backende

onepage parallax

nekonecno farebnych kombinacii

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)

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...

Neopakuj sa, get_template_part();

archive.php<?php

while( have_posts() ) : the_post();

if( get_post_type() == ‘post’ ) {

…markup pre post…

} elseif( get_post_type() == ‘product’ ) { …markup pre produkt…

<?php

while( have_posts() ) : the_post();get_template_part( ‘loop’, get_post_type() );

loop-post.phploop-product.php…

Nauc sa pouzivat hooky!

• do_action(); apply_filters();

• add_action();add_filter();

• codex.wordpress.org/Plugin_API/Hooks

• template:do_action( ‘my_action’ );

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

• 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’ );

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

• add_action( ‘pre_get_posts’, ‘order_posts’ );

prezentacia = tema funkcionalita = modul

• templaty = tema

• CPT, taxonomie, metaboxy => modul

• mu-plugins FTW

mu-plugins

• funguju bez aktivacie

• nedaju sa deaktivovat ani zmazat z admin rozhrania

• klient o nich ani nevie

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’ );

boostrap? foundation?

• pouzivaj sass/less a grunt/gulp

• includuj len to co potrebujes

• pouzivaj mixiny

• minifikuj v produkcii

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”…

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); …

github.com/Webikon/_s-foundation-sites

Neboj sa customizera

diky