wordpress theme design and development workshop - day 3
Post on 14-Apr-2017
840 Views
Preview:
TRANSCRIPT
WordPress Theme Design and Development
Workshop Partner:
Instructor(s)
Saad AminCofounder and CTOInspire Chittagong
Cofounder & Managing DirectorCodework Builders and Assets Ltd
Instructor(s)
Mizanur Rahaman MizanCofounder and COOInspire Chittagong
FounderBD Pathshala
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'
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')
<?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
/** * 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
<?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
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' );
?>
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
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++;}}
?>
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'),
) );
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>';
}?>
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');
Show Sidebar/widget<?php
dynamic_sidebar( 'HomePage Welcome' );
?>
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: admin@inspirechittagong.com
Questions? Comments?
top related