WordPress Plugin: Page Columnist (en)
|WordPress Version:||WordPress 2.7 or higher|
|PHP Version:||PHP 4.4.2 or higher|
|tested Browser:||IE7 | FireFox 22.214.171.124 | Opera 9.27 | Safari (Windows) 3.1.2 | Google Chrome|
|not supported Browser:||none known yet|
As a WordPress user asked me about writing WordPress Pages with columns as easy as possible, because he does’t have any experiences in HTML and CSS, the idea was born to write a plugin that deal with this issue.
Mainly this plugin is for users want to write the page content with TinyMCE as before but get the text presented at columns. Also the HTML editor should be supported but this group of people may not use it excessiv.
new extension: Since version 1.6.0 of this plugin it’s not longer limit to static pages. It now works well with single post pages too if you need it.
Extended Usage of Page Breaks
The presentation of the page content as columns based layout uses the original option in WordPress, that any page with the <!– Nextpage –> tag inside will be split into sub-pages. But no one says that a page break have to be always a page break.
The page breaks can also be handled as column separation, but we must care about, that WordPress outputs now sub pages as columns instead of next page pages. However, a global re-interpretation would be counterproductive, because not all WordPress pages may/should be presented at column style.
Under this concept a page break separates a page into 2 columns, two breaks in 3 columns, shortly said: N breaks generate normal N + 1 columns. The columns should automatically distribute the space available among themselves and all get the same width. A gap between the columns is useful, so they do not appear stuck together. The plugin calculates the column widths on the percentage level and additional all columns except the first one get a leftist decency of each 3%. The plugin ensures that the sum up of all the columns + distances again reaches 100%.
selectable Page Break Behavoir per Page
As you may see at the intro image, it is possible to define at a per page base how the page breaks will behave. In total you have now 6 different modes of page break behavoir:
- WordPress - Next Page (default)
- Ordinary Plain Page
- Every Sub Page as Column
- First Sub Page as Header
- Last Sub Page as Footer
- Interior as Columns
Each of this modes interpretes the page breaks in its own way. How this will behave i will show you at the sections mode by mode and step by step with demo shots.
WordPress - Next Page (default)
This is the default behavoir of WordPress buildin, if a page contains some page break tags. The plugin didn’t do anything with pages, that have been configured this way. All page creation will be handled by WordPress.
This is also the mode which is assigned automatical to all existing pages at database, if this plugin will be activated.
If a page doesn’t contain any page breaks, WordPress shows up as known a simple single page. In case of contained page breaks, the pagination selector will occure (also build-in functionality).
Ordinary Plain Page
If a page running this mode is containing some page breaks, the plugin changes the behavoir of HTML creation. All page breaks will be removed and the entired page will be forced to show up as a single page without any page breaks or pagination.
In other words: all sub pages will be joined.
To make it again absolutely clear for all audience, this plugin doesn’t change the database page text content, it only changes how the resulting HTML code will be produced out of this still unchanged data.
Every Sub Page as Column
If this mode has been selected, all sub pages will be shown as columns with the same width. The column spacing (as introduced above) will be hardly defined by the plugin with each 3% of available total width. Doing so you will get an absolutely uniform layout of columns and you need not care about the correct width calculations.
In future versions i will provide a backend configuration for those values. But currently you have to change it at plugins code (margin member), if it is too small or to wide for your needs.
First Sub Page as Header
Choosing this mode the plugin handles the 1st sub page different. This first sub page will be shown at the full available total width and look similar to a header row. All remainig sub pages will be shown as columns below this header row. This gives you the chance to have something like a lead story and the remaining content as columns.
The column layout presented sub pages get again an absolutely equal width and will be arranged across the total available width. This is a layout you may know from several magazin theme styles and can be easily produced using this plugin.
Last Sub Page as Footer
This kind of appearance is the opposite to above descibed one. Now the last sub page will be shown at total available full width at the end of produced HTML page. This looks similar to a footer row. All sub page prior to the last one will appeare as columns above the footer row. Also for those columns again the equal sized column width will be keeped.
Using this mode you have the chance to present a conclusion area at the end of page, that will again use the full available width.
Interior as Columns
This mixture of header and footer based layout may be most similar to ordinary HTML page displayment. The first and last sub page treat as header and footer row while the remaining sub pages between will be arrange at column layout.
Again the plugin ensures that all column based sub pages will get the equal width and appropriated spacing between to show up in most complex layout. It is always (also the other modes) your choise, how many columns you will be get. If you force more page breaks, the width of columns may be get very small sized, be careful with the count of sub pages.
Configuration of Page Mode
For an easy way of configuration this plugin extends the Admin GUI with a new box, which appears at New Page and also at WordPress Admin page editor page. It will be first introduced at the sidebar and can be dragged to a place you prefere.
At this box you can select the mode you want this page to be shown, nothing more to do. The plugin handles the remaining action now for you. Also the pages overview admin page for already existing pages get a new table column, which shows the current mode of each WordPress Blog page.
But to get columns in your HTML delivered as visitor page you have to insert page breaks into your content. The plugin ensures, that the page break button appears at the visual editor (TinyMCE) and also at the HTML editor, if they are not contained by default.
If you did split your content into more sections as needed for the layout, you can choose, what should happen with this overflow section. As default all overflow sections will be hidden and you get a single solid page with your layout. But you can also choose the virtual paging, where and overflow section threat as a new sub page. If you have not enough sections defined, the output will show you this using the red text “content missing”. Please write more sections to fit the sub page or just insert enough nextpage separations.
For those of you searching the new box in the sidebar after installation, please scroll down. WordPress sometime appends the new box at the end of all right sidebar boxes. You can use the drag ‘n drop functionality of sidebar to move the Page Columnist box up to the top of sidebar.
Assistance at Page Preview
You can switch on the Preview Assistent which gives you extended customization capabilities. You now are able to change the page specific spacing of columns. But as newly introduced feature you can also change the distribution of columns just by drag ‘n drop the spacer by mouse. If you found your prefered layout, save your results and this page will be shown at your arranged customization. This is a per page feature, you can define it for each page different if needed.
This is also Theme switching resistent. If you change your Theme, the plugin takes care about, that the relation of columns will fit the sizes of your new one prefered or tested Theme.
How can this be styled additional by CSS if i need it?
The generated code contains several id and class names, that can be used.
available Element Id’s
available Class Names
There are not so many words to write about installation. This plugin needs WordPress version 2.7 and higher, lower versions will not be supported yet.In urgent cases or on massive request i will think about backporting, but i’m afraid, this may include only 2.6 trunk but never below that.
After downloading the plugin decompress it and upload the contained folder at your wp-content/plugins/ folder. Now the plugin can be activated and will be ready for use immediately without any further configuration.
Plugin Version: page-columnist-v1.7.3.zip (6363 downloads)