Skip to content

Instantly share code, notes, and snippets.

@danielpataki

danielpataki/content.php

Last active March 11, 2020 03:45
Show Gist options
  • Save danielpataki/3daf60076c594afa6bb8 to your computer and use it in GitHub Desktop.
Save danielpataki/3daf60076c594afa6bb8 to your computer and use it in GitHub Desktop.
Download ZIP
Basics Of Theme Development
Raw
content.php
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_excerpt() ?>
</div>
Raw
enqueue.php
<?php
add_action( 'wp_enqueue_scripts', 'mat_assets' );
function mat_assets() {
wp_enqueue_style( 'my-awesome-theme', get_stylesheet_uri() );
}
Raw
frame-header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<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 wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="site-header">
<h1><?php bloginfo('title') ?></h1>
</div>
<div id='site-content'>
Raw
frame-style.css
/*
Theme Name: My Awesome Theme
Theme URI: https://myawesometheme.awesome
Author: Daniel Pataki
Author URI: https://danielpataki.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
html {
height: 100%;
background:#444;
font-family: "Helvetica Neue", Arial, sans-serif;
line-height: 1.5em;
}
#site-header {
text-align: center;
}
#site-header h1 {
font-size:32px;
color: #ffffff;
font-weight: 300;
letter-spacing: 1px;
}
#site-content {
max-width:625px;
background: #fff;
margin: 0 auto;
padding: 22px;
border-radius:5px;
}
#site-footer {
color: #fff;
text-align:center;
font-size:12px;
text-transform: uppercase;
}
Raw
full-template.php
<?php get_header() ?>
<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
</div>
<?php get_sidebar() ?>
<?php get_footer() ?>
Raw
header-mod.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<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 wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="site-header">
<h1><?php bloginfo('title') ?></h1>
</div>
<div id='site-container'>
<div id='site-content'>
Raw
header.php
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<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 wp_head(); ?>
</head>
<body <?php body_class(); ?>>
Raw
ifloop.php
<?php get_header() ?>
<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php if( is_singular() ) : ?>
<?php the_content() ?>
<?php else : ?>
<?php the_excerpt() ?>
<?php endif ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>
<?php get_footer() ?>
Raw
indexframe.php
<?php get_header() ?>
My Awesome Theme
<?php get_footer() ?>
Raw
indexmod.php
<?php get_header() ?>
<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
get_template_part( 'template-parts/content', '' );
}
}
else {
get_template_part( 'template-parts/content', 'none' );
}
?>
<?php get_footer() ?>
Raw
loop.php
<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_content() ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>
Raw
menu-display.php
<div id="header-menu">
<?php wp_nav_menu( array( "theme_location" => 'header-menu' ) ) ?>
</div>
Raw
menu-style.css
#header-menu {
text-align:center;
}
#header-menu ul {
padding:0px;
}
#header-menu li {
display:inline-block;
padding: 0 8px;
}
#header-menu a {
color: #ccc;
text-decoration: none;
}
#header-menu a:hover {
color: #fff;
}
Raw
nav-menu.php
register_nav_menus( array(
'header-menu' => 'Our Awesome Header Menu',
) );
Raw
sidebar-final.php
<div id='site-sidebar'>
<?php dynamic_sidebar( 'mat-sidebar' ); ?>
</div>
Raw
sidebar.php
add_action( 'widgets_init', 'mat_widget_areas' );
function mat_widget_areas() {
register_sidebar( array(
'name' => 'Theme Sidebar',
'id' => 'mat-sidebar',
'description' => 'The main sidebar shown on the right in our awesome theme',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</li>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
));
}
Raw
single.php
<?php get_header() ?>
<?php if( have_posts() ) : ?>
<?php while( have_posts() ) : the_post() ?>
<h2><a href='<?php the_permalink() ?>'><?php the_title() ?></a></h2>
<div class="content">
<?php the_content() ?>
</div>
<?php endwhile ?>
<?php else : ?>
<p>Oh No, there are no posts!</p>
<?php endif ?>
<?php get_footer() ?>
Raw
structure.php
<body>
<div id="site-header"></div>
<div id='site-container'>
<div id='site-content'></div>
<div id='site-sidebar'></div>
</div>
</body>
Raw
style-mod.css
#site-container {
max-width: 855px;
margin:0 auto;
}
#site-sidebar {
width:220px;
float:right;
padding: 22px;
border-radius:5px;
background: #fff;
}
#site-content {
float:left;
max-width:525px;
background: #fff;
padding: 22px;
border-radius:5px;
}
#site-footer {
clear:both;
color: #fff;
text-align:center;
font-size:12px;
text-transform: uppercase;
}
Raw
style.css
/*
Theme Name: My Awesome Theme
Theme URI: https://myawesometheme.awesome
Author: Daniel Pataki
Author URI: https://danielpataki.com
Description: The theme for my awesome site
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-awesome-theme
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
Raw
tamplate.php
<!DOCTYPE html>
<html>
<head>
<title>A single post template</title>
</head>
<body>
<div id="site-header">
<h1>Welcome to my site</h1>
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
</div>
<div id="article">
<h2 class="article-title"><?php the_title() ?></h2>
<div class="article-content"><?php the_content() ?></div>
<div class="article-meta">Published on <?php the_time( "Y-m-d" ) ?> by <?php the_author() ?></div>
</div>
<div id="site-footer">
<nav>
<ul>
<li><a href=''>Home</a></li>
<li><a href=''>About</a></li>
<li><a href=''>Contact</a></li>
</ul>
</nav>
<div id="copyright">&copy; Daniel Pataki</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment