Wordpress Theme Development 101


November 11, 2018 6 minutes wordpress theme development

list of file

  • index.php
  • style.css
  • screenshot.png
  • functions.php
  • header.php
  • footer.php
  • single.php
  • archive.php
  • search.php
  • content.php
  • content-link.php
  • content-gallery.php
  • content-aside.php
  • content-link.php
  • page.php
  • page-about.php
  • company-template.php
  • front-page.php
  • comments.php

theme name and other meta data

/**
 * Theme Name: Advanced WP;
 * Author: Jeff Bezos
 * Author URI: http://jeff.com
 * Description: Advanced wordpress theme
 * Version: 1.0
 *
 * /

language attribute in html tag

<html <?php language_attributes() ?></html>

adding stylesheet url using bloginfo

bloginfo('stylesheet_url);

adding meta charset

bloginfo('charset') ;

blog title

bloginfo('name')

description

bloginfo('description')

for wp_head & wp_footer()

wp_head()
wp_footer();  // responsible for admin menu in view page

search option in wordpress

<form method='get' action="<?php esc_url(home_url('/')) ?>">
    <input type="text" name='s' />
</form>

body class in wordpress

<body <?php body_class() ?>>  </body>

showing nav menu in view

$args = [ 'theme_location' => 'primary' ]
wp_nav_menu($args);

adding custom nav menu

// functions.php
function adv_theme_support(){
  register_nav_menus([
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu')
  ])
}
add_action('after_setup_theme', 'adv_theme_support')

for homepage link

<a href="<?php echo home_url('/') ?>"></a>

post loop

<?php if(have_posts()): ?>
  <?php while(have_posts()) : the_post() ?>
    {{postcontent}}
  <?php endwhile ?>
<?php else:  ?>
  <?php wpautop('Sorry, no posts were found') ;?>
<?php endif; ?>

for post getting title

the_title();

for date and time

the_time('F j, Y g:i a')

autor name and link

<a href="<?php echo get_author_posts_url(get_the_author_meta('ID'));  ?>"> <?php the_author() ?> </a>

showing all catergory with category url

$categories = get_the_category();
$output = '';
$separator = ', ';
if ($categories) {
  foreach($categories as $category) {
    $output .= "<a href="<?php get_category_link($category->term_id)) ?>"> <?php $category->cat_name ?> </a> . <?php echo $separator ?>
  }
  echo trim($output, $separator)
}
?>

showing content

the_content();

showing excerpt

the_excerpt();
// if we change excerpt default length
// functions.php
add_filter('excerpt_length', function () {
  return 25;
})

link of title

the_permalink()

adding support for fetured image

// inside jfuction adv_theme_support
add_theme_support('post_thumbnails');

add_action('after_setup_theme', 'adv_theme_support');
// inside view
if (the_post_thumbnail()) {
  thie_post_thumbnail();
}

calling splitted header.php and footer.php

get_header()
get_footer()

showing different different title for different type of page

if(is_category()){
  single_cat_title();
} else if(is_author()){
  the_post();
  echo 'Archives By Author: ' .get_the_author();
  rewind_posts();
} else if(is_tag()){
  single_tag_title();
} else if(is_day()){
  echo 'Archives By Day: ' .get_the_date();
} else if(is_month()){
  echo 'Archives By Month: ' .get_the_date('F Y');
} else if(is_year()){
  echo 'Archives By Year: ' .get_the_date('Y');
} else {
  echo 'Archives';
}

keeping single content page by using if else statement

<?php if (is_search() || is_archive()) : ?>
  content of archive or search page
<?php else: ?>
  content from regular post
<?php endif; ?>
<?php get_template_part('content'); ?>

conditionally showing content incase of single page

if (is_single()) {
  the_content()
}else {
  the_excerpt()
}

post format support

add_theme_support('post-formats', ['aside', 'gallery', 'links'])
// dashboard/posts/newpost in side bar we will see a format box
// from where we can select appropriate format

if we have use post-formats we have to pass 2nd paramater in get_template_part function when calling

get_template_part('content', get_post_format());

we can specify content for individual type by creating following file

  • content-gallery.php
  • content-aside.php
  • content-link.php

for showing page we have to create page.php

for specific page

we have to create page-specific.php. like page-about.php. Rather using template is good idea

making a template

/*
Template Name: Company Layout
*/
// we will get option in the  right sidebar to choose template

how to show all pages in wp

wp_list_pages()

if we want to filtered list of pages we have to pass arguments

$args = [
  'child_of' => get_top_parent(),
  'title_li' => ''
];
// here get_top_parent() user defined function
<php wp_list_pages($args) ?>
function get_top_parent() {
  global $post;
  if ($post->post_parent) {
    $ancestors = get_post_ancestors($post->ID);
    return $ancestors[0]
  }
  return $post->ID;
}
// confused
<a href="<?php echo get_the_permalink(get_top_parent()) ?>"><?php get_the_title(get_top_parent()) ?></a>
// functions.php
function page_is_parent() {
  global $post;
  $pages->get_pages('child_of='.$post->ID);
  return count($pages) // if its more than zero its parent
}
if(page_is_parent() || $post->post_parent > 0) {
  // it means it has child so we are going to show child
}

widget

// functions.php
function init() {
  register_sidebar([
    'name' => 'Sidebar',
    'id' => 'sidebar',
    'before_widget' => '<div class='block'>',
    'after_widget' => '</div>',
    'before_title' => '<h2 class="title">',
  'after_title' => '</h3>',
  ]);
}
add_action('widgets_init', 'init_widget');
// we can set widget inside dashboard
//showing in view page
if (is_active_sidebar('sidebar'))  {
  dynamic_sidebar('sidebar')
}

comments

//single.php
comments_template()

if we want to change the comment template

//from where he got comments I dont know
$args = ["getting form wp website by searching wp_list_list_comments"];
wp_list_comments($args, $comments)

for comments form

$form_args = ['from up website searching for comments form'];
comment_form($form_args);

See Also