Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

How to make a WordPress theme

339 Aufrufe

Veröffentlicht am

In this workshop, we discussed how to make a WordPress theme using a pre-made HTML template. It was originally made for WordCamp Singapore 2017.

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

How to make a WordPress theme

  1. 1. How to Make a WordPress Theme Hardeep Asrani
  2. 2. Things we need to start… ➤ WordPress on your system. ➤ A good IDE. ➤ Starter files from Github: ➤ A basic/good knowledge of HTML, CSS and PHP.
  3. 3. What’s a theme in WordPress?
  4. 4. Required Files ➤ style.css ➤ index.php
  5. 5. https://wphierarchy.com/
  6. 6. Functions of main files ➤ style.css ➤ index.php ➤ functions.php ➤ header.php ➤ footer.php ➤ single.php ➤ page.php ➤ comments.php
  7. 7. Enough gyaan, let’s start coding.
  8. 8. Starter Content ➤ HTML Design: https://www.styleshout.com/free-templates/keep-it-simple/ ➤ Workshop Content: https://github.com/HardeepAsrani/wp-massively ➤ Workshop Content has two folders, start and finished. ➤ We will use /start/ folder to make a theme. ➤ If you want to see the completed theme, you can see the /finished/ theme.
  9. 9. 1. Theme Info - style.css /* Theme Name: WP Massively Theme URI: https://github.com/HardeepAsrani/wp-massively/ Author: Hardeep Asrani Author URI: http://www.hardeepasrani.com Description: A learning project for WordCamp Singapore. Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: wp-massively Tags: blog, custom-logo, one-column, two-columns, custom-background… */ /* Rest of your CSS goes here. */
  10. 10. 2. Initial index.php <?php get_header(); ?> <?php // Rest of your content goes here. ?> <?php get_footer(); ?>
  11. 11. 3. Initial header.php <!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset='<?php bloginfo( 'charset' ); ?>'> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="http://gmpg.org/xfn/11"> <?php if ( is_singular() && pings_open( get_queried_object() ) ) : ?> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>"> <?php endif; ?> <?php wp_head(); ?> </head> <body <?php body_class(); ?>>
  12. 12. 4. Initial footer.php <?php wp_footer(); ?> </body> </html>
  13. 13. 5. Theme Setup - functions.php <?php function wp_massively_setup() { global $content_width; if ( ! isset( $content_width ) ) { $content_width = 614; } add_theme_support( 'title-tag' ); add_theme_support( 'custom-logo', array( 'flex-width' => true, 'height' => 70, ) ); load_theme_textdomain( 'wp-massively', get_template_directory() . '/languages' ); add_theme_support( 'automatic-feed-links' ); add_theme_support( 'post-thumbnails' ); } add_action( 'after_setup_theme', 'wp_massively_setup' );
  14. 14. 6. Enqueue Scripts/Styles - functions.php function wp_massively_scripts() { wp_enqueue_style( 'wp_massively_merriweather', '//fonts.googleapis.com/css?family=Merriweather: 300,300i,400,400i,700,700i,900,900i'); wp_enqueue_style( 'wp_massively_open_sans', '//fonts.googleapis.com/css?family=Open+Sans:300,300i, 400,400i,600,600i,700,700i,800,800i'); wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome/css/font- awesome.min.css' ); wp_enqueue_style( 'wp_massively_style', get_stylesheet_uri() ); if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); } wp_enqueue_script( 'wp_massively_main', get_template_directory_uri() . '/assets/js/modernizr.js' ); wp_enqueue_script( 'wp_massively_modernizr', get_template_directory_uri() . '/assets/js/main.js', array( 'jquery' ), '', true ); } add_action( 'wp_enqueue_scripts', 'wp_massively_scripts' );
  15. 15. 7. Adding Logo to Header - header.php <body <?php body_class(); ?>> <header id="top"> <div class="row"> <div class="header-content twelve columns"> <h1 id="logo-text"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php bloginfo( 'name' ); ?>"> <?php if ( get_theme_mod( 'custom_logo' ) ) { $logo = wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ), 'full' ); echo '<img src="' . esc_url( $logo[0] ) . '">'; } else { bloginfo( 'name' ); } ?> </a> </h1> <p id="intro"><?php bloginfo( 'description' ); ?></p> </div> </div>
  16. 16. 8.1 Adding a Menu - functions.php register_nav_menus( array( 'primary' => esc_html__( 'Primary Menu', 'wp- massively' ), 'social' => esc_html__( 'Social Menu', 'wp- massively' ), ) ); } add_action( 'after_setup_theme', 'wp_ massively_setup' );
  17. 17. 8.2 Adding a Menu - header.php <p id="intro"><?php bloginfo( 'description' ); ?></p> </div>           </div> <nav id="nav-wrap"> <a class="mobile-btn" href="#nav-wrap" title="<?php echo esc_attr( 'Show Menu', 'wp- massively' ); ?>"> <?php _e( 'Show Menu', 'wp-massively' ); ?> </a> <a class="mobile-btn" href="#" title="<?php echo esc_attr( 'Hide Menu', 'wp-massively' ); ?>"> <?php _e( 'Hide Menu', 'wp-massively' ); ?> </a> <div class="row">         <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu' => esc_html__( 'Primary Menu', 'wp- massively' ), 'container' => 'ul', 'menu_class' => 'nav', 'menu_id' => 'nav', ) ); ?> </div> </nav> </header>
  18. 18. 9.1 Adding Header Image/Background - functions.php add_theme_support( 'custom-background', array( 'default-color' => '#FFFFFF', ) ); add_theme_support( 'custom-header', array( 'default-image' => get_template_directory_uri() . '/assets/images/header.png', 'height' => 288, 'flex-height' => true, 'header-text' => false, ) ); } add_action( 'after_setup_theme', 'wp_ massively_setup' );
  19. 19. 9.2 Add Background Image to header-content class - header.php <div class="header-content twelve columns" style="background-image: url( '<?php header_image(); ?>' );">
  20. 20. 10.1 Adding a Social Menu - footer.php <footer> <div class="row"> <div class="twelve columns"> <?php wp_nav_menu( array( 'theme_location' => 'social', 'menu' => esc_html__( 'Social Menu', 'wp- massively' ), 'container' => 'ul', 'menu_class' => 'social-links', 'link_before' => '<span class="screen-reader-text">', 'link_after' => '</span>', ) ); ?> </div> <p class="copyright"><?php _e( '&copy; Copyright 2017 WP Massively. Design by <a title="Styleshout" href="http://www.styleshout.com/">Styleshout</a>.', 'wp-massively' ); ?></p> </div> <div id="go-top"><a class="smoothscroll" title="Back to Top', 'wp-massively" href="#top"><i class="fa fa-chevron-up"></i></a></div> </footer> <?php wp_footer(); ?> </body> </html>
  21. 21. 10.2 Adding a Social Menu - style.css .screen-reader-text {     clip: rect(1px, 1px, 1px, 1px);     position: absolute !important;     height: 1px;     width: 1px;     overflow: hidden; } footer .social-links a::before { content: "f1e0"; font-family: 'FontAwesome'; font-size: 16px; font-size: 1em; display: block; width: 20px; height: 20px; line-height: 20px; } footer .social-links a[href*="twitter.com"]::before { content: 'f099'; }
  22. 22. 11.1 Add Post Loop - index.php <?php get_header(); ?> <div id="content-wrap"> <div class="row"> <div id="main" class="eight columns"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content' ); endwhile; the_posts_navigation(); else : get_template_part( 'content', 'none' ); endif; ?> </div> </div> </div> <?php get_footer(); ?>
  23. 23. 11.2 Add Post Loop Content - content.php <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>> <header class="entry-header"> <h2 class="entry-title"> <a href="<?php the_permalink();?>" title="<?php the_title();?>"><?php the_title();?></a> </h2> <div class="entry-meta"> <ul> <li><?php echo esc_html( get_the_date() ); ?></li> <span class="meta-sep">&bull;</span> <?php $category = get_the_category(); ?> <li><a href="<?php echo esc_url( get_category_link( $category[0]->term_id ) ); ?>" title="<?php echo esc_attr( $category[0]->cat_name ); ?>" rel="category tag"><?php echo esc_html( $category[0]->cat_name ); ?></a></li> <span class="meta-sep">&bull;</span> <li><?php echo esc_html( get_the_author() ); ?></li> </ul> </div> </header> <div class="entry-content-media"> <div class="post-thumb"> <?php the_post_thumbnail(); ?> </div> </div> <div class="entry-content"> <?php the_content(); ?> </div> </article>
  24. 24. 11.3 Add 404 Template - content-none.php <article class="entry"> <header class="entry-header"> <h2 class="entry-title"> <?php _e( 'Well, that's a shame.', 'wp-massively' ); ?> </h2> </header> <div class="entry-content"> <p><?php _e( 'We weren't able to find what you were looking for. Perhaps searching might help?', 'wp-massively' ); ?></p> </div> <?php get_search_form(); ?> </article>
  25. 25. 12.1 Registering a Widget Area - functions.php function wp_massively_widgets_init() { register_sidebar( array( 'name' => esc_html__( 'Sidebar', 'wp-massively' ), 'id' => 'sidebar-main', 'description' => esc_html__( 'Sidebar widget area.', 'wp-massively' ), 'before_widget' => '<div id="%1$s" class="widget %2$s">', 'after_widget' => '</div>', 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>', ) ); } add_action( 'widgets_init', 'wp_ massively_widgets_init' );
  26. 26. 12.2 Displaying a Sidebar - sidebar.php <?php if ( ! is_active_sidebar( 'sidebar-main' ) ) { return; } ?> <div id="sidebar" class="four columns"> <?php dynamic_sidebar( 'sidebar-main' ); ?> </div>
  27. 27. 12.3 Call Sidebar - index.php <?php get_header(); ?> <div id="content-wrap"> <div class="row"> <div id="main" class="eight columns"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); get_template_part( 'content' ); endwhile; the_posts_navigation(); else : get_template_part( 'content', 'none' ); endif; ?> </div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>
  28. 28. 13.1 Make Single Post - single.php <?php get_header(); ?> <div id="content-wrap"> <div class="row"> <div id="main" class="eight columns"> <?php while ( have_posts() ) : the_post(); get_template_part( 'content', 'single' ); the_post_navigation( array( 'prev_text' => _x( '<strong>Previous Article</strong><span class="post-title">%title</span>', 'previous post', 'wp-massively' ), 'next_text' => _x( '<strong>Next Article</strong><span class="post-title">%title</span>', 'next post', 'wp-massively' ), ) ); if ( comments_open() || get_comments_number() ) : echo '<div id="comments">'; comments_template(); echo '</div>'; endif; endwhile; ?> </div> <?php get_sidebar(); ?> </div> </div> <?php get_footer(); ?>
  29. 29. 13.2 Make Post Content - content-single.php <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>> <header class="entry-header"> <h2 class="entry-title"> <?php the_title();?> </h2> <div class="entry-meta"> <ul> <li><?php echo esc_html( get_the_date() ); ?></li> <span class="meta-sep">&bull;</span> <?php $category = get_the_category(); ?> <li><a href="<?php echo esc_url( get_category_link( $category[0]->term_id ) ); ?>" title="<?php echo esc_attr( $category[0]->cat_name ); ?>" rel="category tag"><?php echo esc_html( $category[0]->cat_name ); ?></a></li> <span class="meta-sep">&bull;</span> <li><?php echo esc_html( get_the_author() ); ?></li> </ul> </div> </header> <div class="entry-content-media"> <div class="post-thumb"> <?php the_post_thumbnail(); ?> </div> </div> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages(); ?> </div> <?php the_tags( __( '<div class="tags">Tagged in: ', 'wp-massively' ), ', ', ' </div>'); ?> </article>
  30. 30. 13.3.1 Comment Template - comments.php <?php if ( post_password_required() ) { return; } ?> <div id="comments" class="comments-area"> <?php if ( have_comments() ) : ?> <h2 class="comments-title"> <?php $comments_number = get_comments_number(); if ( '1' === $comments_number ) { printf( _x( 'One Reply to &ldquo;%s&rdquo;', 'comments title', 'wp-massively' ), get_the_title() ); } else { printf( _nx( '%1$s Reply to &ldquo;%2$s&rdquo;', '%1$s Replies to &ldquo;%2$s&rdquo;', $comments_number, 'comments title', 'wp-massively' ), number_format_i18n( $comments_number ), get_the_title() ); } ?> </h2>
  31. 31. 13.3.2 Comment Template - comments.php <ol class="commentlist"> <?php wp_list_comments( array( 'avatar_size' => 32, 'style' => 'li', 'short_ping' => true, 'reply_text' => __( 'Reply', 'wp-massively' ), ) ); ?> </ol> <?php the_comments_pagination( array( 'prev_text' => '<span class="screen-reader-text">' . __( 'Previous', 'wp-massively' ) . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next', 'wp-massively' ) . '</span>', ) ); endif; if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?> <p class="no-comments"><?php _e( 'Comments are closed.', 'wp-massively' ); ?></p> <?php endif; comment_form(); ?> </div>
  32. 32. 14.1 Make Page - page.php <?php get_header(); ?> <div id="content-wrap"> <div class="row"> <div id="main" class="twelve columns"> <?php while ( have_posts() ) : the_post(); get_template_part( 'content', 'page' ); if ( comments_open() || get_comments_number() ) : echo '<div id="comments">'; comments_template(); echo '</div>'; endif; endwhile; ?> </div> </div> </div> <?php get_footer(); ?>
  33. 33. 14.2 Make Page Content - content-page.php <article id="post-<?php the_ID(); ?>" <?php post_class( 'entry' ); ?>> <header class="entry-header"> <h1 class="entry-title"> <?php the_title();?> </h1> </header> <div class="entry-content-media"> <div class="post-thumb"> <?php the_post_thumbnail(); ?> </div> </div> <div class="entry-content"> <?php the_content(); ?> <?php wp_link_pages(); ?> </div> </article>
  34. 34. Where to go from here? ➤ WordPress Theme Development Handbook: https://developer.wordpress.org/ themes/getting-started/ ➤ WordPress Theme Review Team Guidelines: https://make.wordpress.org/themes/ handbook/review/required/ ➤ If you have any questions then standing right in front of you. ➤ Tackling at home and got stuck somewhere? Have any question? Just open an issue at: https://github.com/HardeepAsrani/wp-massively/issues
  35. 35. I’m Hardeep Asrani @HardeepAsrani hardeepasrani.com Pirate at ThemeIsle.com

×