16
WordPress Theme Design and Development Workshop Partner:

WordPress Theme Design and Development Workshop - Day 3

Embed Size (px)

Citation preview

Page 1: WordPress Theme Design and Development Workshop - Day 3

WordPress Theme Design and Development

Workshop Partner:

Page 2: WordPress Theme Design and Development Workshop - Day 3

Instructor(s)

Saad AminCofounder and CTOInspire Chittagong

Cofounder & Managing DirectorCodework Builders and Assets Ltd

Page 3: WordPress Theme Design and Development Workshop - Day 3

Instructor(s)

Mizanur Rahaman MizanCofounder and COOInspire Chittagong

FounderBD Pathshala

Page 4: WordPress Theme Design and Development Workshop - Day 3

Enqueue style<?php  wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>

$handle = Name used as a handle for the stylesheet.

$src = URL to the stylesheet

$deps (array)  (optional) = Dependency

$ver  (string|boolean) (optional) = Version

$media (string|boolean)  (optional) = String specifying the media for which this stylesheet has been defined. Examples: 'all', 'screen', 'handheld', 'print'. See this list for the full range of valid CSS-media-types.Default: 'all'

Page 5: WordPress Theme Design and Development Workshop - Day 3

Global variable for pathReturn string;$tu = get_template_directory_uri();$tu = get_stylesheet_directory_uri () ;

site_url();Output: http://www.example.com or 

http://www.example.com/wordpress

Return with echobloginfo('template_url')

Page 6: WordPress Theme Design and Development Workshop - Day 3

<?php  wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

$handle(string) (required) Name used as a handle for the script$src (string) (optional) URL to the script,$deps (array)  (optional) = Dependency$ver  (string|boolean) (optional) = Version$in_footer (boolean) (optional) Normally, scripts are placed in <head> of

the HTML document. If this parameter is true, the script is placed before the </body> end tag. This requires the theme to have the wp_footer() template tag in the appropriate place.

Default: false

Enqueue script

Page 7: WordPress Theme Design and Development Workshop - Day 3

/** * Proper way to enqueue scripts and styles */function theme_name_scripts() { wp_enqueue_style( 'style-name', get_stylesheet_uri() ); wp_enqueue_script( 'script-name',

get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );

} add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

Note : Tip: print_r( $wp_styles );

Usage

Page 8: WordPress Theme Design and Development Workshop - Day 3

<?php function my_scripts_method() { wp_enqueue_script( 'scriptaculous' ); wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); wp_enqueue_script(' jquery-effects-core '); } add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

// wp_enqueue_scripts action hook to link only on the front-end , For admin panel use admin_enqueue_scripts

?>

Enqeue Jquery

Page 9: WordPress Theme Design and Development Workshop - Day 3

Custom Posthttp://codex.wordpress.org/Function_Reference/register_post_type

<?phpfunction edu_slider_reg() { $args = array( 'public' => true, 'label' => 'Slider',

'supports' => array('thumbnail', 'title', 'custom-fields') ); register_post_type( 'slider', $args );}add_action( 'init', 'edu_slider_reg' );

?>

Page 10: WordPress Theme Design and Development Workshop - Day 3

Add Featured Image Supportadd_theme_support( 'post-thumbnails', array(

'post', 'slider-items','page') );

// for adding fixed image size for slider or anything

add_image_size('slider-larger',1900,654);

Image Resize for Slider

Page 11: WordPress Theme Design and Development Workshop - Day 3

Slider <?php $args = array(

'post_type' => array( 'slider' ),'posts_per_page' => -1

);$wp_query = new WP_Query( $args );$i=1;if ( $wp_query->have_posts() ) {

while ( $wp_query->have_posts() ) {$wp_query->the_post();$feat_image =

wp_get_attachment_url( get_post_thumbnail_id($post->ID) );

?> <li><a href="#slide<?php echo i; ?>"><img src="<?php echo $feat_image; ?>" alt="<?php the_title(); ?>"></a></li> <?php

$i++;}}

?>

Page 12: WordPress Theme Design and Development Workshop - Day 3

Register Menu// for registering a menu. we can do this for

as many menu we want in a theme.

register_nav_menus( array('primary' => __('PrimaryMenu'),

) );

Page 13: WordPress Theme Design and Development Workshop - Day 3

Make a menu dynamic<?php

$menus = wp_get_nav_menus();$menu_items = wp_get_nav_menu_items($menus[0]);

foreach ($menu_items as $menu_item) {

echo ' <li><a href="'.$menu_item->url.'">' . $menu_item->title . '</a></li>';

}?>

Page 14: WordPress Theme Design and Development Workshop - Day 3

Register Sidebar / widget// widget registration/ register sidebar

function edu_widget(){register_sidebar( array(

'name' => __( 'HomePage Welcome', 'smebiztcrews' ),

'id' => 'welcome_text','description' => 'This is the widget to put

text in the homepage as welcome text alongside a video or something else',

'class' => '','before_widget' => '<article class="col-

sm-7">','after_widget' => '</article>','before_title' => '<h4 class="text-title">','after_title' => '</h4>'));

}add_action('widgets_init','edu_widget');

Page 15: WordPress Theme Design and Development Workshop - Day 3

Show Sidebar/widget<?php

dynamic_sidebar( 'HomePage Welcome' );

?>

Page 16: WordPress Theme Design and Development Workshop - Day 3

Twitter: @mizpress (Mizan) @saadwho (Saad) Website(s): http://www.inspirechittagong.com (Inspire

Chittagong)

http://www.saadamin.info (Saad Amin)http://www.mizpress.com (Mizanur Rahaman

Mizan)

Email: [email protected]

Questions? Comments?