Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

pull new changes #1

Open
wants to merge 17 commits into
base: master
Choose a base branch
from
3 changes: 2 additions & 1 deletion .gitignore
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
.sass-cache
.sass-cache
*~
221 changes: 221 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
# The Compass Skeleton Theme for WordPress

> This theme is a skeleton. The purpose of the theme is to demonstrate how to use the WordPress API.
> The files are prepared for styling in *Sass / Compass*.

This repo was made in order to get a starting point for a WordPress theme styled via *SASS* and *Compass*.
In a standard Compass project the .scss files are placed in the /sass folder.
However WordPress needs the style.css in the root folder. The solution is to edit the *config.rb*.


## config.rb - Compass Configuration

The file *config.rb* defines the whereabouts of certain directories.

WordPress needs a *style.css* file in the root of the theme folder.
Therefore *config.rb* should look like this:

~~~~
http_path = "/"
css_dir = ""
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
~~~~


## style.css for a theme

Here's a style.css sample for this WordPress theme:

~~~~
/*!
Theme Name: SASS / Compass Skeleton
Theme URI: http://multimusen.dk/
Author: Per Thykjaer Jensen
Author URI: http://multimusen.dk/
Description: Sass and Compass Skeleton theme.
Version: Beta
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: compass, sass, barebone, skeleton
Text Domain: petj_sass_compass_skeleton

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.
*/
~~~~

Please note the exclamation mark after the /*!. It

## style.css for a child theme

And this is *style.css* for a child theme for the theme

~~~~
/*!
Theme Name: Compass Skeleton Child
Theme URI: http://multimusen.dk
Description: A skeleton theme prepared for SASS and Compass.
Author: Per Thykjaer Jensen
Author URI: http://multimusen.dk
Template: twentyfifteen
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: sass, compass, skeleton
Text Domain: compass-skeleton-child
*/
~~~~

# The Loop

* Codex: [The Loop](https://codex.wordpress.org/The_Loop)
* See: [Elegant Themes](http://www.elegantthemes.com/blog/tips-tricks/the-wordpress-loop-explained-for-beginners)

Here's a loop sample from the page above:

~~~~
if (have_posts()) :
while (have_posts()) :
the_post();
the_content();
endwhile;
endif;
~~~~

More elaborate loops are possible, have a look at the loops in e.g. the *twentyfifteen*, *twentyfourteen* and other themes.

* [The Loop](https://codex.wordpress.org/The_Loop)
* [Template Tags](https://codex.wordpress.org/Template_Tags)
* [Query](https://codex.wordpress.org/Template_Tags/query_posts)


## Widget Areas

1. Define the widget in functions.php
2. Invoke the widget in relevant file

### functions.php

Use something like this in functions.php:

~~~~
/* WIDGET AREAS */
// http://codex.wordpress.org/Widgetizing_Themes

function petj_widgets_define() {

register_sidebar( array(
'name' => 'petj_sidebar_widget',
'id' => 'petj_sidebar_widget',
'before_widget' => '<div id="petjSidebarWidget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="petjSidebarWidget rounded">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'petj_widgets_define' );
~~~~

### sidebar.php

You can have widget areas whereever you want in your theme. In this case I add the widget area in sidebar.php:

~~~~
<?php dynamic_sidebar( 'petj_sidebar_widget' ); ?>
~~~~

# The Menu

The menu is defined in functions.php and invoked in sidebar.php. You can define menu areas all over your theme.

## functions.php

Here the menu is registered:

~~~~
function petj_menus() {
register_nav_menus(
array(
'sidebar-menu' => __( 'Sidebar Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'petj_menus' );
~~~~

## sidebar.php

And here we display the menu in the theme:

~~~~
<?php dynamic_sidebar( 'petj_sidebar_widget' ); ?>
~~~~
----

# Further development ideas

## A Costum Hook

* [do_action](https://codex.wordpress.org/Function_Reference/do_action)
* [add_action](https://codex.wordpress.org/Function_Reference/add_action)
* [hooks](http://codex.wordpress.org/Plugin_API/Hooks)

### A SEO hook samplle

This hook will add metatags for SEO optimisation.

#### functions.php

Define your action in *functions.php*. Here's a function that will add metatags to the theme's head:

~~~~
function petj_add_meta_tags() {

print '

<!-- SEO META SECTION -->
<meta name="description" content="Being a skeleton for the creation of WordPress themes. The files are prepared for Compass. ">
<meta name="keywords" content="WordPress, Theme, Skeleton, Compass, Sass, CSS">
<meta name="robot" content="index,follow">
<meta name="copyright" content="GPLv2">
<meta name="author" content="Per Thykjaer Jensen">
<meta name="generator" content="www.onlinemetatag.com">
<meta name="revisit-after" content="3 days">

';

}

add_action( 'petj_metatags', 'petj_add_meta_tags' );
~~~~

You can intrerpret the add_action like this:

~~~~
add_action( 'NAME-OF-YOUR-ACTION', 'FUNCTION-TO-BE-EXECUTED' )
~~~~

You can execute the action wherever you will in the theme.
As an example I'd like some meta tags in the head in order to improve SEO.

#### header.php

The do_action asks WordPress to do an action. The action will execute a function, defined in *functions.php* as shown above.

~~~~
do_action( "petj_metatags" );
~~~~


## Filters

* Queries
* Filter categories and posts

## Enqueue Scripts

* Bootstrap CDN
Empty file added bootstrap.html
Empty file.
2 changes: 1 addition & 1 deletion config.rb
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
css_dir = ""
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
Expand Down
4 changes: 4 additions & 0 deletions footer.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
<h2 class="newFile">File: footer.php</h2>

</body>
</html>
32 changes: 32 additions & 0 deletions functions.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<?php
/* REGISTER MENUS */
// https://codex.wordpress.org/Navigation_Menus
// The sidebar-menu is used in sidebar.php

function petj_menus() {
register_nav_menus(
array(
'sidebar-menu' => __( 'Sidebar Menu' ),
'extra-menu' => __( 'Extra Menu' )
)
);
}
add_action( 'init', 'petj_menus' );

/* WIDGET AREAS */
// http://codex.wordpress.org/Widgetizing_Themes

function petj_widgets_define() {

register_sidebar( array(
'name' => 'petj_sidebar_widget',
'id' => 'petj_sidebar_widget',
'before_widget' => '<div id="petjSidebarWidget">',
'after_widget' => '</div>',
'before_title' => '<h2 class="petjSidebarWidget rounded">',
'after_title' => '</h2>',
) );

}
add_action( 'widgets_init', 'petj_widgets_define' );
?>
48 changes: 48 additions & 0 deletions header.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
<?php
/**
* file: header.php
* included via: get_header()
**/
?>
<!DOCTYPE html>
<html <?php language_attributes(); ?> class="no-js">
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width">

<!-- Bootstrap CDN -->
<!-- url: http://getbootstrap.com/getting-started/ -->
<!-- alternative (and more correct according to the WP API: use enqueue styles -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- SEO Metatags Hook -->
<?php // do_action('getSEO'); ?>

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />

<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

<!-- Jquery ( allways before the wp_head() ) -->
<?php wp_enqueue_script("jquery"); ?>

<!-- wp_head() hook -->
<?php wp_head(); ?>
<!-- wp_head() hook ends -->
</head>

<body <?php body_class(); ?>>
<header>
<hgroup>
<h2 class="newFile">File: header.php "Compass Skeleton"</h2>
<h1><?php bloginfo(); ?></h1>
<h2><?php bloginfo('description'); ?></h2>
</hgroup>
</header>
Binary file added images/744px-Pirate_Flag_of_Henry_Every.svg.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 changes: 23 additions & 0 deletions index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<?php
/**
* file: index.php
*/
?>
<?php get_header(); ?>
<?php get_sidebar(); ?>
<div id="mainContent">
<h2 class="newFile">File: index.php</h2>
<h2>Main Content</h2>
<h2 class="loop">The Loop</h3>
<!-- skeleton loop -->
<?php
if (have_posts()) :
while (have_posts()) :
the_post();
// here you can add the_author, the_title, the_content and many other template loop tags
the_title('<h4 class="loop">','</h4>');
endwhile;
endif;
?>
</div><!-- ends mainContent -->
<?php get_footer(); ?>
47 changes: 47 additions & 0 deletions koala-config.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
// Sass project settings, you can edit it and set custom settings.
{
// The mappings of source directory and output directory
"mappings": [
// {
// "src": "path/to/source",
// "dest": "path/to/output"
// }
],

// Add the ignore rules that Koala will not search them.
// e.g. ["*.json", "*.txt", "test", "path/libs"]
"ignores": ["*.css"],

// Compile options of Sass.
"options": {

// Output style. Can be nested (default), compact, compressed, or expanded.
"outputStyle": "nested",

// Emit comments in the generated CSS indicating the corresponding source line.
"lineComments": false,

// Emit extra information in the generated CSS that can be used by the FireSass Firebug plugin.
"debugInfo": false,

// Create sourcemap files next to the generated CSS files
"sourceMap": false,

// Use Unix-style newlines in written files.
"unixNewlines": false,

// auto add vendor prefixes to rules
"autoprefix": false
},

// Other compile options, use the full name of options.
// e.g, ["--scss", ... ,"--no-cache"].
// Run the command 'sass -h' to see more options.
"customOptions": [],

// An array of filesystem paths or importers which should be searched for Sass templates imported with the @import directive.
"includePaths": [],

// A array of ruby libraries, require them before running Sass.
"requireLibs": []
}
Loading