DokuWiki

It's better when it's simple

User Tools

Site Tools

Trace:
devel:wp_to_dw_template

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
Both sides next revision
devel:wp_to_dw_template [2015-06-25 22:52]
geekitude [Header] minor internal link correction		devel:wp_to_dw_template [2015-09-26 19:41]
Aleksandr
Line 4: Line 4:
  
  
-===== 1. Start with starter template =====+===== 1. Start with Starter template =====
  
-Follow the first 3 steps on the general template tutorial: [[devel:templates#Getting started]] (i.e. copy the [[template:starter]] template). The rest of this tutorial will explain how to do the 4th step.+Follow the first 3 steps on the general template tutorial: [[devel:templates#Getting started]] (i.e. copy the [[template:Starter]] template). The rest of this tutorial will explain how to do the 4th step.
  
 Commit already to be able to see differences later. Commit already to be able to see differences later.
- 
  
  
Line 16: Line 15:
   * Read about the [[:main window]] to understand words and functionality used in the following.   * Read about the [[:main window]] to understand words and functionality used in the following.
   * Refer to [[devel:templates]] and [[devel:templates:main.php]] to read what every DW function is used for.   * Refer to [[devel:templates]] and [[devel:templates:main.php]] to read what every DW function is used for.
-  * Refer to [[#WP vs DW functions]] for knowing which WP function can be substituted with which DW function.+  * Refer to [[#WP vs. DW functions]] for knowing which WP function can be substituted with which DW function.
  
 ==== Meta elements ==== ==== Meta elements ====
Line 22: Line 21:
 Copy any relevant meta elements (anything between ''%%<head></head>%%'') from WP's ''header.php'' which DokuWiki doesn't already provide into DW's ''main.php''. Copy any relevant meta elements (anything between ''%%<head></head>%%'') from WP's ''header.php'' which DokuWiki doesn't already provide into DW's ''main.php''.
  
-Check if the WP theme adds anything to the body classes via ''add_filter( 'body_class', [...] );''. If yes, add them to the element which includes the ''tpl_classes()''. In case that element is not the ''body'' and the CSS contains any body selectors with such classes (''body.''), you would either need to move the ''tpl_classes()'' into the ''body'' or change the CSS accordingly (e.g. by just removing the ''body.'' in such cases).+Check if the WP theme adds anything to the body classes via ''add_filter( 'body_class', [%%...%%] );''. If yes, add them to the element which includes the ''tpl_classes()''. In case that element is not the ''body'' and the CSS contains any body selectors with such classes (''body.''), you would either need to move the ''tpl_classes()'' into the ''body'' or change the CSS accordingly (e.g. by just removing the ''body.'' in such cases).
  
 ==== Site containers ==== ==== Site containers ====
Line 61: Line 60:
 Because the functionality is different from WP's usual sidebar, most "widgets" will be implemented with plugins rather than in the template. Therefore, most of the widget CSS can be safely deleted. Because the functionality is different from WP's usual sidebar, most "widgets" will be implemented with plugins rather than in the template. Therefore, most of the widget CSS can be safely deleted.
  
-==== WP vs DW functions ====+==== WP vs. DW functions ====
  
 Most of the above will require you to change WP-specific functions to DW-specific functions. These are usually within ''%%<?php ?>%%'' blocks. Most of the above will require you to change WP-specific functions to DW-specific functions. These are usually within ''%%<?php ?>%%'' blocks.
Line 110: Line 109:
 Copy WP's ''style.css'' to DW's ''css/style.less'' (use the ''.less'' extension to take advantage of [[devel:LESS]], a CSS pre-processor) and add it to the ''style.ini''. Copy WP's ''style.css'' to DW's ''css/style.less'' (use the ''.less'' extension to take advantage of [[devel:LESS]], a CSS pre-processor) and add it to the ''style.ini''.
  
-  css/style.less = screen+<code ini> 
 +css/style.less = screen 
 +</code>
  
 If ''style.less'' contains any %%@media%% queries, you need to either change the ''screen'' media type to ''all''. If ''style.less'' contains any %%@media%% queries, you need to either change the ''screen'' media type to ''all''.
  
-  css/style.less = all+<code ini> 
 +css/style.less = all 
 +</code>
  
 Or you can extract the %%@media%% queries into separate CSS files and add them to the ''style.ini'' with the ''all'' media type. Or you can extract the %%@media%% queries into separate CSS files and add them to the ''style.ini'' with the ''all'' media type.
Line 150: Line 153:
 Move the print section from the original ''style.css'' into ''print.less''. Remove the ''@media print {}'' around the styles and add it to ''style.ini'' as well: Move the print section from the original ''style.css'' into ''print.less''. Remove the ''@media print {}'' around the styles and add it to ''style.ini'' as well:
  
-  css/print.less = print+<code ini> 
 +css/print.less = print 
 +</code>
  
 ==== Necessary changes ==== ==== Necessary changes ====
  
 Adjust all paths (to images, fonts, etc) to be relative to the template's root. E.g. if you have images in an "images" folder, your paths should be like ''url(images/foo.png)''. Adjust all paths (to images, fonts, etc) to be relative to the template's root. E.g. if you have images in an "images" folder, your paths should be like ''url(images/foo.png)''.
- 
  
  
Line 178: Line 182:
  
 You have more freedom with the image detail page. You can either move your whole layout into that file (including header and sidebar, etc) or create a different, minimal layout. You have more freedom with the image detail page. You can either move your whole layout into that file (including header and sidebar, etc) or create a different, minimal layout.
- 
  
 ==== Special DW elements ==== ==== Special DW elements ====
Line 193: Line 196:
  
 Concentrate first on the modes most users are likely to see most, i.e. edit, search, login,... Something like the admin section on the other hand doesn't need to be pretty but it should at least be workable. Concentrate first on the modes most users are likely to see most, i.e. edit, search, login,... Something like the admin section on the other hand doesn't need to be pretty but it should at least be workable.
- 
  
  
Line 211: Line 213:
  
 If you have this in your ''style.ini'' If you have this in your ''style.ini''
-  __theme_color__ = "#123456"+<code ini> 
 +__theme_color__ = "#123456" 
 +</code> 
 You need to substitute each ''#123456'' with ''%%@ini_theme_color%%''. You need to substitute each ''#123456'' with ''%%@ini_theme_color%%''.
  
Line 220: Line 225:
 You can have other values than colours as a style.ini placeholder. Anything you'd like to be configurable which has to do with CSS can be driven by this. E.g. set the template width or responsive breakpoints or fonts or font sizes or a background image or drive various sub themes with a variable... You can have other values than colours as a style.ini placeholder. Anything you'd like to be configurable which has to do with CSS can be driven by this. E.g. set the template width or responsive breakpoints or fonts or font sizes or a background image or drive various sub themes with a variable...
  
-==== WP vs DW classes ====+==== WP vs. DW classes ====
  
 There are certain functionalities which both DW and WP have but which are expressed in different class names. There are certain functionalities which both DW and WP have but which are expressed in different class names.
  
-^What ^WordPress ^DokuWiki^ +^ What                            ^ WordPress                                            ^ DokuWiki    ^ 
-|hide something accessibly |screen-reader-text |a11y| +|hide something accessibly        |screen-reader-text                                    |a11y         | 
-|clearing floats |clear |group| +|clearing floats                  |clear                                                 |group        | 
-|align media left |alignleft |medialeft| +|align media left                 |alignleft                                             |medialeft    | 
-|align media right |alignright |mediaright| +|align media right                |alignright                                            |mediaright   | 
-|align media centred |aligncenter |mediacenter| +|align media centred              |aligncenter                                           |mediacenter  | 
-|menu item with children |li.menu-item-has-children |li.node| +|menu item with children          |li.menu-item-has-children                             |li.node      | 
-|selected menu item |li.current_page_item%%|%%current-menu-item|li .curid| +|selected menu item               |li.current_page_item%%|%%current-menu-item            |li .curid    | 
-|parent(s) of selected menu item|li.current_page_ancestor \\ + li.current_page_parent|(//n/a//)|+|parent(s) of selected menu item  |li.current_page_ancestor \\ + li.current_page_parent  |(//n/a//)    |
  
  
Line 244: Line 249:
 When you cannot change the class DW gives you (media alignment and menu classes), let the class from DW inherit the one from WP. This is possible with the power of [[devel:less|LESS]]. When you cannot change the class DW gives you (media alignment and menu classes), let the class from DW inherit the one from WP. This is possible with the power of [[devel:less|LESS]].
  
-<code>+<code css>
 .class-from-dw { .class-from-dw {
     .class-from-wp;     .class-from-wp;
Line 254: Line 259:
 When you don't need to use the DW classes (''a11y'' and ''group''), you can ignore them and keep the WP styles. But if the WP styles are adding anything which the DW styles don't have, you can let the class from WP inherit the one from DW (so, the other way around as the example above). When you don't need to use the DW classes (''a11y'' and ''group''), you can ignore them and keep the WP styles. But if the WP styles are adding anything which the DW styles don't have, you can let the class from WP inherit the one from DW (so, the other way around as the example above).
  
-<code>+<code css>
 .class-from-wp { .class-from-wp {
     .class-from-dw;     .class-from-dw;
Line 264: Line 269:
 You can also just search for all WP classes and replace them with the DW classes in both HTML/PHP and CSS/LESS. You can also just search for all WP classes and replace them with the DW classes in both HTML/PHP and CSS/LESS.
 That might also not work 100% as you might need to fix other selectors (especially in menus). But the amount of possibly necessary fixes will be the same in both ways. That might also not work 100% as you might need to fix other selectors (especially in menus). But the amount of possibly necessary fixes will be the same in both ways.
- 
  
  
Line 270: Line 274:
  
 To avoid [[devel:css#using_ids|conflicts with automatically created IDs]] you should rename all IDs. Best just include ''%%<template-name>__%%'' in front of every ID (inside HTML, CSS and JS). To avoid [[devel:css#using_ids|conflicts with automatically created IDs]] you should rename all IDs. Best just include ''%%<template-name>__%%'' in front of every ID (inside HTML, CSS and JS).
- 
  
  
Line 292: Line 295:
  
 FIXME Add more... FIXME Add more...
- 
  
  
Line 304: Line 306:
   * [[devel:localization#Template Localization]]   * [[devel:localization#Template Localization]]
   * [[devel:configuration#Template Settings]]   * [[devel:configuration#Template Settings]]
 +
devel/wp_to_dw_template.txt · Last modified: 2015-09-26 19:41 by Aleksandr

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki
Imprint

Global DokuWiki Links