{"id":21262359,"url":"https://github.com/johanbrook/whiteboard","last_synced_at":"2025-07-11T04:30:35.065Z","repository":{"id":1293527,"uuid":"1234836","full_name":"johanbrook/whiteboard","owner":"johanbrook","description":"Barebones theme for Wordpress 3.x, with nifty functions and theme files that don't get in your way.","archived":false,"fork":false,"pushed_at":"2011-07-17T21:46:08.000Z","size":7224,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-15T12:13:33.085Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johanbrook.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2011-01-09T10:15:23.000Z","updated_at":"2023-08-30T23:44:35.000Z","dependencies_parsed_at":"2022-08-16T13:00:18.280Z","dependency_job_id":null,"html_url":"https://github.com/johanbrook/whiteboard","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanbrook%2Fwhiteboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanbrook%2Fwhiteboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanbrook%2Fwhiteboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johanbrook%2Fwhiteboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johanbrook","download_url":"https://codeload.github.com/johanbrook/whiteboard/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225674918,"owners_count":17506272,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T04:58:15.218Z","updated_at":"2024-11-21T04:58:16.057Z","avatar_url":"https://github.com/johanbrook.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Whiteboard for Wordpress\n\nWhiteboard is \"another naked, barebone, Wordpress theme\", but still not quite. It serves as the starting point for every Wordpress project I start working on, and includes an extensive library of nifty Wordpress helper functions.\n\nI encourage you to poke around in the files and remove stuff you don't need.\n\n## Constants\n\nURL constants:\n\n- `WB_THEME_DIR`. The absolute URL to the theme directory. Could for example be: `http://domain.com/wordpress/wp-content/themes/\u003cyour-theme\u003e/`. This constant is preferrable over calling the `bloginfo(\"stylesheet_directory\")` all the time.\n- `WB_JS_DIR`. The absolute URL to the Javascript directory. Defaults to `JB_THEME_DIR . static/js/`.\n- `WB_IMG_DIR`. The absolute URL to the images directory. Defaults to `JB_THEME_DIR . static/images/`.\n- `WB_CSS_DIR`. The absolute URL to the stylesheet directory. Defaults to `JB_THEME_DIR . static/css/`.\n\nSome more configurable constants you should have a look at:\n\n- `GOOGLE_ANALYTICS_ID`. Your Google Analytics id. Fill it in and uncomment the `add_action(..)` row just below to add Analytics to the footer.\n- `EXCERPT_LENGTH`. The global length in characters of post excerpts. Defaults to 40 characters.\n- `USE_ROOT_RELATIVE_LINKS`. Set to false if you don't want to use relative permalink (\"/some/page/\" instead of \"http://domain.com/some/page/\").\n- `USE_JQUERY`. Set to false to deactivate registration of the jQuery library in the theme.\n\n\n## Helpers\n\nHelper functions. Included in `library/helpers.inc.php`. Put all your custom theme functions in here in order to keep things tidy. \n\nSome handy, time-saving functions:\n\n### `link_to($page, [$echo = true])`\n\nLink to a Wordpress page by providing the slug name (Note: a pretty permalink structure must have been setup).\n\t\n\t// In template:\n\t\u003ca href=\"\u003c?php link_to(\"about\");?\u003e\"\u003eAbout me\u003c/a\u003e\n\t\n\t// Produces:\n\t\u003ca href=\"http://domain.com/about/\"\u003eAbout me\u003c/a\u003e\n\n### `build_link($text, $page)`\n\nBuilds a complete `\u003ca\u003e` element with text and href attribute.\n\n\t// In template:\n\t\u003c?php build_link(\"About me\", \"about\");\n\t\n\t// Produces:\n\t\u003ca href=\"http://domain.com/about/\"\u003eAbout me\u003c/a\u003e\n\nAfter some use, it's incredibly nice to having to write HTML links all the time. You're also able to use IDs instead of page slugs, if you would want that (Ex: `link_to(2)`).\n\n### `img_src($filename, [$echo = true])`\n\nRemember how tedious it is to link to static images in some directory in your theme? Writing `bloginfo` and all that? Fear not, these image helpers will help you.\n\n\t// In template:\n\t\u003cimg src=\"\u003c?php img_src(\"duck.png\");?\u003e\" alt=\"Duck\" /\u003e\n\t\n\t// Produces:\n\t\u003cimg src=\"http://domain.com/wordpress/wp-content/themes/\u003cyour-theme\u003e/static/images/duck.png\" alt=\"Duck\" /\u003e\n\nThe path varies, of course. The path constant to the images directory is set at the top of `functions.php`.\n\n### `img($filename, [$alt = \"\"])`\n\nBuilds the `\u003cimg\u003e` element with just the filename and an optional `alt` attribute.\n\n\t// In template:\n\t\u003c?php img(\"duck.png\");?\u003e\n\t\n\t// Produces:\n\t\u003cimg src=\"http://domain.com/wordpress/wp-content/themes/\u003cyour-theme\u003e/static/images/duck.png\" alt=\"\" /\u003e\n\n\n### `has_children()`\n\nUsed within a loop. Returns true if the current page has child pages.\n\n\t// In template:\n\tif(has_children()){\n\t\t// Do stuff\n\t}\n\n### `is_child()`\n\nUsed withing a loop. Returns true if the current page is a child page.\n\n\t// In template:\n\tif(is_child()){\n\t\t// Do stuff\n\t}\n\n### `show_posts_nav()`\n\nReturns true if there's need to show a page navigation (\"\u003c Previous page, Next page \u003e\"). Hence there's no annoying navigation links if there are only a couple of posts listed. You set the post limit from wp-admin.\n\n\t// In template:\n\tif(show_posts_nav()){\n\t\t// Show some sort of navigation.\n\t}\n\t\n### `slugify($text)`\n\n\"Slugifies\" a text string, i.e. the function replaces spaces for hyphens, and non-ASCII characters for their equivalents, and makes it all lowercase.\n\n\t// In template:\n\t$text = \"This is a text string\"\n\t$slug = slugify($text);\n\t\n\t// $slug =\u003e 'this-is-a-text-string'.\n\t\n## HTML\n\nThe theme's HTML is valid HTML5, complete with ARIA roles for accessibility. The theme's HTML structure (for a regular page, for example) is as follows:\n\n\tbody\n\t|__ header[role=\"banner\"]\n\t\t|__ hgroup\n\t\t\t|__ h1 \"Site title\"\n\t\t\t|__ h2 \"Subtitle/Description\"\n\t\t|__ nav[role=\"navigation\"]\n\t\t\n\t|__ section[role=\"main\"]\n\t    |__ article.page\n\t\t\t|__ h1 \"Page title\"\n\t\t\n\t|__ footer[role=\"contentinfo\"]\n\t\nNot too hard to grasp. These selectors are invaluable to have when targeting elements from the CSS as well (instead of having IDs and class attributes set). As you see, it's in `section[role=\"main\"]` the main content goes (duh). I also advise you to use the `body` element as the main container for the site, and use the `html` element for background image/color.\n\n\n## Javascripts\n\nThere's no crazy use of Javascript built in – that's up to you to write – but some Javascript files are included. In the `style/js` directory you'll find:\n\n- `whiteboard.js`. The main script file. Automatically loaded. Put your custom code and setup functions here.\n- `html5.js`. Self-hosted HTML5 Shim for IE 8 and below. Automatically included in the `\u003chead\u003e`. Rather than using Google's I prefer using a local copy. Why? Imagine if Google Code would go down – every IE user with or below 8.0 would see a broken site.\n\t\nI've tossed a few handy libraries along with Whiteboard (lives in the `static/js/library` directory):\n\n- `jquery.min.js`. Local copy of jQuery.\n- `jquery.hashgrid.js`. Superb grid tool. Sets up a customizable (through CSS) grid overlay which can be shown with the 'G' key. More info on [http://hashgrid.com](http://hashgrid.com/). \n- `jquery.retina.js`. If you're targeting the iPhone 4, this handy script will replace all regular images on your site with (by you created) high-res images named after Apple's \"@2x\" convention.\n- `jquery.smoothscroll.js`. Smoothscroll on anchor links. Automatically loaded.\n- `modernizr-1.7.min.js`. See [Modernizr.com](http://www.modernizr.com/). Detects HTML5, CSS3 and other modern browser features.\n\nFor more JS polyfills, please see [https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills](https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills).\n\n\n### Global theme path variable\n\nA thing I've used recently is the global Javascript variable `THEME_DIR`. In the footer, this variable is set to the path to the Wordpress theme directory, so you're able to reach theme files from within Javascript files, for example when writing Ajax functions which are talking to a PHP script in your theme:\n\n\t// In whiteboard.js:\n\t$.get(THEME_DIR + \"server-script.php\", {name: \"John\"}, function(data){\n\t\t// Do stuff with data\n\t\t\n\t\t// Very handy when inserting external images as well:\n\t\t$(this).after(\"\u003cimg src='\"+ THEME_DIR +\"static/images/loader.gif' /\u003e\");\n\t});\n\nThis means you don't have to hard code the theme directory into the Javascript code (which is very, very bad when you want to migrate or deploy your site). The `THEME_DIR` Javascript variable is the same as the `JB_THEME_DIR` PHP constant.\n\n## CSS\n\nWhiteboard is a Wordpress theme template only – there's no boilerplate CSS included. For that I recommend you to have a look at my [Sass framework](https://github.com/johanbrook/dyluni \"Dyluni Framework\"). However, in the `style/css` directory, there are styles for the visual editor in wp-admin, styles for the login screen, and several patch files for IE.\n\n\n## Other features\n\n### Partials\n\nInstead of writing the same template code over and over again, you should use partials. There's one partial included in Whiteboard – `post.php` – which is the main post template. It's included with the `get_template_part(\"partials/_post\")` construct. I advise you to use partials (put them in the partials directory) whenever you find yourself writing the same code twice or more.\n\n### Body classes\nWhiteboard's functions file automatically adds browser names to the theme's `body` class. This means you're able to target specific browsers in your CSS and Javascripts. Ex. if a user running Firefox visits the site, the body class looks like `\u003cbody class=\"firefox\"\u003e`. Also supports the iPhone body class.\n\t\n\t\n### Real shortlinks\n\nWhiteboard uses **real** shortlinks when using the Wordpress template tag `the_shortlink()`, i.e. it outputs the raw URL rather than a pre-built link element.\n\n\n### Custom backend styles\n\nAutomatically adds references to `editor-style.css`, where CSS styles for the visual editor in wp-admin goes, as well as `login.css` which lets you style the login screen (`wp-login.php`).\n\n\n## General security tips\n\n### Place Wordpress in its own directory.\n\nDon't keep Wordpress directly in the web root. The web root is usually `public_html` or some other name if you're using a subdomain. It's a security concern – any naughty individual could guess your whole Wordpress installation structure with ease (which isn't optimal). Personally, I find it cluttering with all Wordpress core files in my web root as well.\n\nThe solution is to put the whole Wordpress core in a separate directory (`core`, for instance) and put an `index.php` in the web root which \"starts up\" Wordpress:\n\n\tpublic_html/\n\t\tindex.php\n\t\t-- core/\n\t\t\t-- wp-admin/\n\t\t\t-- wp-content/\n\t\t\t-- etc, etc.\n\nIn `index.php` it should say:\n\n\t\u003c?php\n\t/**\n\t * Front to the WordPress application. This file doesn't do anything, but loads\n\t * wp-blog-header.php which does and tells WordPress to load the theme.\n\t *\n\t * @package WordPress\n\t */\n\n\t/**\n\t * Tells WordPress to load the WordPress theme and output it.\n\t *\n\t * @var bool\n\t */\n\tdefine('WP_USE_THEMES', true);\n\n\t/** Loads the WordPress Environment and Template */\n\trequire('./core/wp-blog-header.php');\n\t?\u003e\n\t\nChange `core` in the `require('./wordpress/wp-blog-header.php');` line to the name of the sub-directory you keep Wordpress in. More info may be found in the [Wordpress Codex page about this topic](http://codex.wordpress.org/Giving_WordPress_Its_Own_Directory). \n\n### Protecting wp-config.php\n\nwp-config.php is an important file, since it contains sensitive stuff about the database, and more. To prevent anyone to view the contents of wp-config, put this in your `.htaccess` file:\n\n\t\u003cfiles wp-config.php\u003e\n\t\torder allow,deny\n\t\tdeny from all\n\t\u003c/files\u003e\n\t\nDouble-check the path to your installation's wp-config.php. More info at [http://www.devlounge.net/code/protect-your-wordpress-wp-config-so-you-dont-get-hacked](http://www.devlounge.net/code/protect-your-wordpress-wp-config-so-you-dont-get-hacked). I've included a `.htaccess` file in this theme with the code above.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohanbrook%2Fwhiteboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohanbrook%2Fwhiteboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohanbrook%2Fwhiteboard/lists"}