Getting Started - ar-to/WordPress-Theme GitHub Wiki

The getting started process can be outlined in the following:

  1. Create theme folder "name"
  2. Create index.php & style.css
  3. Add folder to wp-contents/themes
  4. Add Bootstrap links; see Bootstrap via functions.php
  5. Begin splitting index.php into template files, template partials according to Wordpress template hierarchy and template tags.

###1.Folder name: basictheme ###2.Index.php & style.css Create a basic index.php with the following code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="author" content="ariel" />
<meta name="description" content="Basic theme for wordpress.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Theme</title>
<?php wp_head();?> <!--allows plugins api hooks & function.php scripts to work-->
</head>
<body>
  <h1>Header</h1>
<div class="container">
<div class="row">
<div class="col-md-12 well"><h1 class="text-center">Hello World!!</h1></div>
</div>
</div>
<!--jquery-->
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<?php wp_footer();?><!--adds the top admin menu-->
</body>
</html>
  • style.css
/*
Theme Name: Basic Theme
Theme URI: https://github.com/ar-to/WordPress-Theme
Author: ar-to
Author URI: http://philosophyanddesign.com
Description: A basic theme to start a Wordpress.org site.
Version: 1.0
*/

###4.Add styles and scripts Bootstrap styling will not be seen until <?php wp_head();?> & <?php wp_footer();?> have been added.

Function.php should look like this:

<?php
//Add theme support via add_theme_support( 'support' ); see https://developer.wordpress.org/themes/basics/theme-functions/
// Add Google Fonts
//Add scripts and stylesheets; see https://developer.wordpress.org/themes/basics/including-css-javascript/
function theme_scripts(){
  //wp_enqueue_style( $handle, $src, $deps, $ver, $media );
  wp_enqueue_style('bootstrap', get_template_directory_uri().'/css/bootstrap.min.css');
  //wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);
  wp_enqueue_script('bootstrap', get_template_directory_uri().'/js/bootstrap.min.js', array('jquery'),'3.3.7',true);
}
//Add add_action hooks here
add_action('wp_enqueue_scripts','theme_scripts');//load styles and scripts
?>

###5.

Inside index.php replace <!DOCTYPE html> to <body><h1>Header</h1> with

<?php get_header(); ?>

Inside index.php replace <!--jquery--> to </html> with

<?php get_footer(); ?>

The updated index.php should look like this

<?php get_header(); ?>

<div class="container">
<div class="row">
<div class="col-md-12 well"><h1 class="text-center">Hello World!!</h1></div>
</div>
</div>
<?php get_footer(); ?>

At this point, refreshing the browser will show a header and footer of generic Wordpress info.

gs_basic

To customize and change these standard templates from wordpress the index.php needs to be overwritten using themplate hierarchy. Create new template partials header.php and footer.php and add the code removed earlier.

The header.php should look like this

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="author" content="ariel" />
<meta name="description" content="Basic theme for wordpress.org" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic Theme</title>
<?php wp_head();?> <!--allows plugins api hooks & function.php scripts to work-->
</head>
<body>
  <h1>Header</h1>

and footer.php should be

<!--jquery-->
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"   integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="   crossorigin="anonymous"></script>
<?php wp_footer();?><!--adds the top admin menu-->
</body>
</html>

Now the header will show the H1 tag and footer will be empty when previewed on the browser.

gs_basic2

⚠️ **GitHub.com Fallback** ⚠️