Web Press Creative GUI Customizable Website: Technical information on developing templates

Technical information on developing templates:

Templates can contain any type of code needed to make the pages. There are various ways to present the CSS and JavaScript for the pages. Since both of those types of code are located in the head of the document it is written into the PHP header script and can be inline or external CSS, or use the database for the CSS and JavaScript.

There are several elements that need to be present for the template to function. One is a PHP script to have the template name data. This page should follow this syntax and must be named 'template_name.php':

<?php

$template_name="Name of the template";

$template_menu_info="/core/system/path to template menu”;

The two variables are '$template_name' which has the template unique name in normal text and '$template_menu_info' that contains the path to the template menu if any. If the is no menu for the template use this path instead:

$template_menu_info="/core/system/".$options[19];

This will sent the user back to the menu in current use if the menu button is clicked.

This script and all other parts to the template must be located in a unique folder at this path:

'/core/system/includes/templates/TEMPLATE FOLDER/'

Template elements themselves and images must be placed into folders at this path below and with these exact folder names and file names:

User pages:

'/core/system/includes/templates/TEMPLATE FOLDER/'images/'

'/core/system/includes/templates/TEMPLATE FOLDER/index_html_inc/inc_index_header.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_html_inc/inc_index_footer.php'

Administration pages:

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/inc_menu_header.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/inc_menu_footer.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/inc_admin_main_menu_header.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/inc_admin_main_menu_footer.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/inc_admin_documentation_header.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/inc_admin_documentation_footer.php'

'/core/system/includes/templates/TEMPLATE FOLDER/index_menu_inc/images/'

Other elements that are needed are a preview image and security index.html files to block viewing of directory contents. The preview image must be named 'preview.jpg' and be located at:

'/core/system/includes/templates/TEMPLATE FOLDER/preview.jpg'

The size of this image must be 300x229 px and is a screen shot of the template for previewing.

Security index.html files need to be located in all folders of the new template and have this HTML code in them:

Here is a sample of the PHP code for the header and footer for the user pages:

inc_index_header.php

<?php

// main header

$data_name=$options[4]."_".$template;

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_css=$db_wpc_core_out_decoded;

$data_name=str_replace('pg.', 'pgd.', $templ_data);

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_desc=$db_wpc_core_out_decoded;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if lt IE 9]>

<![endif]-->

<?php echo $page_css; ?>

<!--

if( self == top ) {

document.documentElement.style.display = 'block' ;

} else {

top.location = self.location ;

}

//-->

</script>

<?php echo $tracking_code; ?>

</head>

<body>

</div>

<tr>

</tr>

<tr>

inc_index_footer.php

<?php

// main footer

</td>

</tr>

<tr>

</div></td>

</tr>

</table>

</div>

</body>

</html>

A breakdown of the code starting with the header:

$data_name=$options[4]."_".$template;

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_css=$db_wpc_core_out_decoded;

This bit of code calls to use a script located in includes that accesses the database and retrieves data from location name '$data_name' and returns decoded data '$db_wpc_core_out_decoded'. The location of this page CSS is '$options[4]'. Unless a new variable with new CSS location data is added to the core it should always be found from this variable.

$data_name=str_replace('pg.', 'pgd.', $templ_data);

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_desc=$db_wpc_core_out_decoded;

This bit of code should always remain unchanged and returns the page title and page name in variable '$page_desc'. Other variables used within the header is highlighted above.

HTML data for the body of the page is located in the database and is inserted between the header and footer so the HTML open and close tags should be in their proper places taking in account that the user can change the body of the page HTML code any way they choose to, so header and footer code should take this in account and be written to not be affected by this.

Database data must follow this syntax for the core to use that data to create the page. For the CSS the database page name can be anything but must be all lower case and not have any spacing or other characters besides alpha numeric. Spaces should be replace by an under score. This database page name must begin with the index extension 'css', the css will be added to the page itself ie: (css.any_name), it is not external CSS and must have the proper open and close tags, JavaScript can also be added with the CSS with the proper open and close tags as well. This needs to be edited in the CODE editor only, using the HTML editor all open and close tags will be removed.

For the page title and page name only change the index extension to 'pgd' ie; (pgd.any_name_template_name). The only editor that can be used for this page data is the CODE editor. The HTML editor will add paragraph tags causing the HTML code to become invalid. It is mandatory the database page name remain exactly the same as the HTML database page name except the index extension.

Keep in mind the actual page will be located on the root directory so images and links will need to take that path in account.

Developing new menu templates:

This is not necessary for all new templates, but if the developer wants to add these theme elements to the new templates or develop these separately these guidelines will need to be followed.

Header and footer PHP code:

inc_menu_header.php

<?php

// Menu Header

$data_name=$options[4]."_".$template;

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_css=$db_wpc_core_out_decoded;

$data_name=str_replace('pg.', 'pgd.', $templ_data.'_'.$page_desc_loc);

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_desc=$db_wpc_core_out_decoded;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if lt IE 9]>

<![endif]-->

<?php echo $page_css; ?>

<?php echo $menu_page_css; ?>

<!--

if( self == top ) {

document.documentElement.style.display = 'block' ;

} else {

top.location = self.location ;

}

//-->

</script>

<?php echo $tracking_code; ?>

</head>

<body>

</div>

<tr>

</tr>

<tr>

inc_menu_footer.php

<?php

// Menu Footer

</td>

</tr>

<tr>

</tr>

</table>

</div>

</body>

</html>

inc_admin_main_menu_header.php

<?php

// Admin main menu header

$doc_root=$_SERVER['DOCUMENT_ROOT'];

include_once ($doc_root.'/core/system/config/config.php');

$data_name="css.admin_menu_".$options[10]."_".$template;

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_css=$db_wpc_core_out_decoded;

$data_name=str_replace('pg.', 'pgd.', $templ_data.'_'.$page_desc_loc);

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_desc=$db_wpc_core_out_decoded;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if lt IE 9]>

<![endif]-->

<?php echo $page_css; ?>

<!--

if( self == top ) {

document.documentElement.style.display = 'block' ;

} else {

top.location = self.location ;

}

//-->

</script>

<?php echo $tracking_code; ?>

</head>

<body>

</div>

<div class="bluebar"><?php echo $admin_title; ?> Administration Main Menu List of Options</div>

<tr>

</tr>

<tr>

<tr>

<td align="right"><form id="logout" name="logout" method="post" action="http://<?php echo $domain_name; ?>/core/system/admin/logout.php">

</form></td>

</tr>

</table>

inc_admin_main_menu_footer.php

<?php

// Admin main menu footer

</td>

</tr>

<tr>

</div></td>

</tr>

</table>

</div>

</body>

</html>

inc_admin_documentation_header.php

<?php

// Admin documentation header

$doc_root=$_SERVER['DOCUMENT_ROOT'];

include_once ($doc_root.'/core/system/config/config.php');

$data_name="css.admin_docs_".$options[10]."_".$template;

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_css=$db_wpc_core_out_decoded;

$data_name=str_replace('pg.', 'pgd.', $templ_data.'_'.$page_desc_loc);

include ($doc_root.'/core/system/includes/db_wpc_core.php');

$page_desc=$db_wpc_core_out_decoded;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<!--[if lt IE 9]>

<![endif]-->

<?php echo $page_css; ?>

<!--

if( self == top ) {

document.documentElement.style.display = 'block' ;

} else {

top.location = self.location ;

}

//-->

</script>

<?php echo $tracking_code; ?>

</head>

<body>

</div>

<tr>

</tr>

<tr>

inc_admin_documentation_footer.php

<?php

// Admin documentation footer

</td>

</tr>

<tr>

</div></td>

</tr>

</table>

</div>

</body>

</html>

The syntax for the database names are the same as the user pages except for the addition of two added charater sets, 'secure' and 'docs' are used here.

The body HTML code database page name can also be anything and follow the same syntax as the above except the index extension must be 'pg' and the character set 'secure' and 'docs' can not be included in the database page name. These are used with secure pages and documents only. The HTML editor may be used for this HTML code and the CODE editor as well. Some HTML may be altered or removed by the HTML editor, in those cases the CODE editor must be used. The template name does not need to be added to the database page name as in this example: pg.secure_any_name. Also the character set 'secure' must be added to the database page name so this data can not be viewed by unauthorized users, ie; (pg.secure_any_name). HTML database name may end with a location identifier but is not mandatory and is defendant upon how the PHP is written for the menu template.

For the page title and page name only change the index extension to 'pgd' ie; (pgd.secure_any_name). The only editor that can be used for this page data is the CODE editor. The HTML editor will add paragraph tags causing the HTML code to become invalid. It is mandatory the database page name remain exactly the same as the HTML database page name except the index extension.

For secured documents the database page name would be: pg.secure_docs_any_name. Documents that are not secured: pg.docs_any_name. All the above syntax would also apply.

Web Press Creative GUI Customizable Website

Tuesday, December 10, 2013

Technical information on developing templates

No comments:

Post a Comment

About Me