This project is the source for the default theme that ships as standard with Textpattern CMS as of v4.5.0 onwards. It is intended as a starting point for new users learning the Textpattern CMS for the first time or existing users that want to adapt their current code for modern standards, and is not intended as a finished production theme (though you could use it as such if you want to).
- The code is commented throughout with helpful information to help you learn some of the techniques and tags available within Textpattern.
- Current best practices gathered from all over the web – in particular the HTML5 Boilerplate.
- Mobile first structure.
- Responsive CSS layout adapts to various device screen sizes, from 320px to over 1280px.
- Adheres to the Schema.org microdata format.
- Includes Sass version of CSS for rapid development.
- No images used at all.
- Tested on a wide range of devices, browsers and operating systems.
- Internet Explorer 8, 9, 10
- Chrome, Firefox, Safari and Opera the last two recent stable releases
Building this source repository requires:
Environment must consist of:
- Apache 2
- PHP >=5.3
- MySQL >=5
- Textpattern CMS 4.6.0-dev
- Unix-like OS, e.g. Linux or Mac OS
The project uses Grunt to run tasks and Sass for CSS pre-processing. This creates few dependencies in addition to your normal PHP required by Textpattern. First make sure you have base dependencies installed: Ruby, Node.js, Bundler and Grunt. You can install Node, Ruby and Composer using their installers, Bunder with gem and the rest with npm:
$ gem install bundler
$ npm install -g grunt-cli
$ npm install -g bowerConsult the tools’ documentation for more instructions. Outside from these, the project will also require the normal git, Apache, MySQL and PHP. All requirements must be added to your path variable.
After you have the base dependencies taken care of, you can install the project’s dependencies. Navigate to the project’s directory, and run the dependency managers:
$ cd textpattern-default-theme
$ npm install
$ bundle installnpm installs Node modules for Grunt and bundle takes care of Ruby gems.
This repository hosts sources and needs to be built before it can be used. After you have installed all dependencies, you will be able to run tasks using Grunt, including building:
$ grunt [task]Where the [task] is either test, build or watch. Watch will launch a task that watches for file changes. The project is automatically built if a source file is modified. The build task builds the project.
The theme comes with some extra CSS modules. To compile a custom CSS file from Sass, create a new .scss file to the sass directory, for instance custom.scss. In that file, import any extra modules you want:
@import "default";
@import "extra/code-prettify";
@import "extra/flickr";When you now run grunt build you will get a /css/custom.css file, containing any extra modules too. Now just change the Style for your sections to custom and you are set.
- Check ‘Automatically append comments to articles?’ is set to ‘no’. More info.
- Check you have the latest Textpattern language database update, new data was added to the Textpattern language server from 31/08/11 onwards specifically to support this theme. Go to the preferences, language tab – if you are not already running the latest language version there will be a prompt to update next to your installed languages. Click on ‘update’ and an up-to-date language table will be automatically loaded.
There were a number of forms and pages that formed part of the original default (pre-4.5) theme for Textpattern. For the most part we will be reusing those existing forms with our own code. However, there are some forms you can safely remove from the system, if present, as we will not be using them (in fact the original default Textpattern theme did not require them either – they are mostly left over from earlier versions of Textpattern and not used any more).
- link (link type form)
- lofi (article type form)
- noted (link type form)
- single (article type form)
Textpattern differs from many CMS solutions in that it stores the all template files (used to build the final page a browser sees) directly in the database as ‘styles’ (the CSS styling), ‘pages’ (the main page templates) and ‘forms’ snippets of code and logic that form building blocks within the ‘pages’.
However, many coders like to use their preferred IDE (integrated development environment) to write code and leverage all the tools within those applications provide to make code writing easier. That means you will have to copy/paste from your IDE into the corresponding parts of the Textpattern admin-side which adds a bit of time.
With CSS files you could simply use external stylesheet and link in the traditional way (see below). However there is another solution in the form of the ‘cnk_versioning’ Textpattern plugin, which effectively moves the ‘styles’, ‘pages’ and ‘forms’ back out of the database and into external directories for easier editing – a good solution when used in combination with an IDE. If you do use that plugin then dropping the files from this project into your correspondingly named directories will suffice. Detailed information on how to use cnk_versioning is available at the Textpattern forum.
Provides basic HTML5 support for Internet Explorer versions 6-8. This script can be removed if you don’t intend to support IE less than version 9 (remember to also remove the corresponding link in the page <head> section of page templates).
The forms follow the cnk_versioning standard of labelling, in that ‘xxxx.misc.txp’ is a misc type form, ‘xxxx.article.txp’ is an article type form, etc. This is only for file structure, when you actually create new forms within Textpattern you should not include the ‘.xxxx.txp’, just the first part of the filename.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Used to display listings of articles and is called from the ‘default.txp’ page when viewing category lists of articles, and the ‘archive.txp’ page when viewing the archive list of articles.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Used to format the form for inputting comments.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Used to display all the comments features, and calls other comment type forms.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Used to display the individual comments.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Used to display the written article, either as an individual article of part of a set of articles. When called on an individual article basis this form also calls the ‘comments_display.article.txp’.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. You can call this form from within an article by simply using <txp:file_download id="xxx" /> (you don’t need to specify a form name as ‘files’ is the default form for files) – you can also call this form from within other any other forms and pages using the same method (just mind your <p>’s).
Create a new form in the system with name of ‘images’ and type of ‘misc’, then copy/paste the code from this file into it. This form can optionally be used in your page/form templates. You could also, for example, display article_images by inserting the following code into a written article…
notextile. <txp:images form="images" />…you should use the notextile. prefix in this instance because the HTML <figure> tag cannot be wrapped inside a <p> tag.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. You can call this form from within a form, page or article by using <txp:linklist /> (you don’t need to specify a form name as ‘plainlinks’ is the default form for links).
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Used to display the comment system in a new window if you set ‘Comments mode’ to ‘popup’ in the Textapttern preferences. If you don’t need the popup comments feature (quite likely) then you can safely remove this form from the system.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. Note that this form makes use of the following tag…
<txp:text />…which is used to target language strings from the database ‘txp_lang’ table for the language you set in the Textpattern preferences. For example to display ‘Search’ in your chosen language the tag would be:
<txp:text item="search" />You can get a idea of the items you can target with this tag by looking through the specific language file within the textpattern → lang directory which was created as part of your installation. You would probably not use this tag very often unless you were designing a multi-language site as it adds needlessly to the amount of PHP database calls (that is also true for other tags such as <txp:site_name />) – it’s included here purely as an example of what the tag is for.
Copy/paste over the existing form of the same name that was part of the standard Textpattern install. This form displays the search results, if any exist.
This page template is utilised when viewing a list of articles.
Copy/paste over the existing page of the same name that was part of the standard Textpattern install.
This page template is utilised as the standard page layout.
Copy/paste over the existing page of the same name that was part of the standard Textpattern install.
This page template is utilised when viewing a page error (such as a 404 page not found).
Copy/paste over the existing page of the same name that was part of the standard Textpattern install
This is a reference file you can use when authoring themes, it contains many of the valid HTML5 tags (and their equivalent Textile format where available) that should be accounted for in your designs. Paste this code directly into a Textpattern article (please note that some HTML5 tags are not fully supported by browsers yet).
Sass version of the CSS file, users familiar with the Sass language can utilise these optional source files for rapid development of their own themes.
These snippets of code are purely optional and allow you to extend the functionality of the original theme. You can find further information within the directory.