Adding New Page Templates & PHP Classes

I have some javascript, PHP, and CSS files I’d like to incorporate into my site. I would like this to load on certain pages and to make a new page template I can select when I want to set it up on the specific pages. Below are my questions.

  1. Is this possible without breaking X?
  2. Which directories do I need to import these files?
  3. Will I need to merge any files?
  4. What is the best way to backup my current configuration before trying this?

Hi there,

Thanks for posting in.

it’s a bit of tricky and your question is a bit general since there is no specific customization that you wish to implement. I suggest that you contact a developer that can help you with this implementation. But in general answer, it’s doable by duplicating template parts and modify them. The same standard when creating Wordpress templates, but in X, just different name and folders.

Thanks!

what names and folders differ in X?
I will write a detailed post, I can manage to do this myself I just need the proper general guide.

I’m trying to add the files in the screenshots and in addition I have a index.php file that I would like to know how to merge or add properly under another file name… below is the index.php contents.

<?php require_once('includes/tile.class.php'); require_once('includes/ui.class.php'); $ui = new UI(); $ui->setTitle('MelonHTML5 - Metro Framework'); $tiles = array( array( 'name' => 'MelonHTML5', 'thumbnail' => 'images/melonhtml5.png', 'content' => '', 'url' => 'tiles/blank.php', 'size' => '4x2', 'theme' => 'orange', 'link' => '' ), array( 'name' => 'tile001', 'thumbnail' => 'images/widget_scroll.png', 'content' => 'tile001', 'url' => 'tiles/blank.php', 'size' => '4x2', 'theme' => 'red', 'link' => '' ), array( 'name' => 'tile002', 'thumbnail' => 'images/widget_notification.png', 'content' => 'tile002', 'url' => 'tiles/tile002.php', 'size' => '2x2', 'theme' => 'darkblue', 'link' => '' ), array( 'name' => 'tile003', 'thumbnail' => 'images/widget_dialog.png', 'content' => 'tile003', 'url' => 'tiles/blank.php', 'size' => '2x2', 'theme' => 'blue', 'link' => '' ), array( 'name' => 'tile004', 'thumbnail' => 'images/widget_gallery.png', 'content' => 'tile004', 'url' => 'tiles/tile004.php', 'size' => '4x2', 'theme' => 'darkgreen', 'link' => '' ), array( 'name' => 'typography', 'thumbnail' => 'images/widget_editable.png', 'content' => 'typography', 'url' => 'tiles/typography.php', 'size' => '2x2', 'theme' => 'darkred', 'link' => '' ), array( 'name' => 'tile006', 'thumbnail' => 'images/widget_tooltip.png', 'content' => 'tile006', 'url' => 'tiles/tile006.php', 'size' => '2x2', 'theme' => 'green', 'link' => '' ), array( 'name' => 'tile007', 'thumbnail' => 'images/widget_map.png', 'content' => 'tile007', 'url' => 'tiles/blank.php', 'size' => '2x2', 'theme' => 'blue', 'link' => '' ), array( 'name' => 'tile008', 'thumbnail' => 'images/widget_file.png', 'content' => 'tile008', 'url' => 'tiles/blank.php', 'size' => '2x2', 'theme' => 'darkblue', 'link' => '' ), array( 'name' => 'tile009', 'thumbnail' => 'images/widget_tag.png', 'content' => 'tile009', 'url' => 'tiles/blank.php', 'size' => '2x2', 'theme' => 'blue', 'link' => '' ), array( 'name' => 'tile010', 'thumbnail' => 'images/widget_chart.png', 'content' => 'tile010', 'url' => 'tiles/blank.php', 'size' => '2x2', 'theme' => 'darkblue', 'link' => '' ), array( 'name' => 'tile011', 'thumbnail' => 'images/widget_tab.png', 'content' => 'tile011', 'url' => 'tiles/blank.php', 'size' => '4x2', 'theme' => 'orange', 'link' => '' ), array( 'name' => 'iframe', 'thumbnail' => '', 'content' => 'iframe', 'url' => 'tiles/iframe.php', 'size' => '2x2', 'theme' => 'purple', 'link' => '' ), array( 'name' => 'Facebook', 'thumbnail' => 'images/facebook.png', 'content' => '', 'url' => '', 'size' => '1x1', 'theme' => 'yellow', 'colour' => '#3B5B99', 'link' => 'http://facebook.com/MelonHTML5' ), array( 'name' => 'Twitter', 'thumbnail' => 'images/twitter.png', 'content' => '', 'url' => '', 'size' => '1x1', 'theme' => 'yellow', 'colour' => '#00ACED', 'link' => 'http://twitter.com/MelonHTML5' ), array( 'name' => 'CodeCanyon', 'thumbnail' => 'images/linkedin.png', 'content' => '', 'url' => '', 'size' => '1x1', 'theme' => 'yellow', 'colour' => '#232323', 'link' => 'http://codecanyon.net/user/MelonHTML5/portfolio' ), array( 'name' => 'Feed', 'thumbnail' => 'images/feed.png', 'content' => '', 'url' => '', 'size' => '1x1', 'theme' => 'yellow', 'link' => 'http://twitter.com/MelonHTML5' ) ); function makeRandomTile($id, $size = '2x2') { $tile = array( 'name' => 'widget_000' . $id, 'thumbnail' => '', 'content' => '', 'url' => 'tiles/blank.php', 'size' => $size, 'theme' => 'grey', 'link' => '' ); return $tile; } $blog_tile = array( 'name' => 'Blog', 'thumbnail' => 'images/widget_blog.png', 'content' => 'Blog', 'url' => 'tiles/blog.php', 'size' => '2x2', 'theme' => 'orange', 'link' => '' ); $aboutme_tile = array( 'name' => 'About', 'thumbnail' => 'images/widget_aboutme.png', 'content' => 'About Us', 'url' => 'tiles/about.php', 'size' => '2x2', 'theme' => 'darkred', 'link' => '' ); $tile_container1 = array( 'size' => 'full', 'theme' => '', 'tiles' => $tiles ); $tile_container2 = array( 'size' => 'half', 'theme' => '', 'tiles' => array($blog_tile, $aboutme_tile, makeRandomTile(24), makeRandomTile(25), makeRandomTile(26), makeRandomTile(27)) ); $tile_container3 = array( 'size' => 'half', 'theme' => '', 'tiles' => array(makeRandomTile(31), makeRandomTile(32), makeRandomTile(33), makeRandomTile(34), makeRandomTile(35), makeRandomTile(36)) ); $ui->addTileContainer($tile_container1); $ui->addTileContainer($tile_container2); $ui->addTileContainer($tile_container3); $ui->printHeader(); $ui->printTiles(); $ui->printFooter(); ?>

Hi There,

These are the templates available on the root folder X theme: \wp-content\themes\x

Each of those templates are calling templates parts depending on the stack that is on the view folder here: \wp-content\themes\x\framework\views{stack}

As stated, aside from different folders or how it call template parts, other aspect is the same: https://developer.wordpress.org/themes/template-files-section/page-template-files/

Make sure you have setup a child theme first..
This might help too: https://theme.co/apex/forum/t/customizations-best-practices/205