0

I'm working on creating a simple single-page web app for an art project. This is mostly a lot of JavaScript, and a custom UI. I was told early on that the organisation commissioning the piece will provide web hosting on their site. Now I've found out that their site uses Wordpress, and it looks like I'll have to kind of hack the framework to deploy a single HTML file and associated resources.

From reading around it seems the simplest solution would be to create a new theme, a new page, and apply that theme to that one page. My question is - if that is the best route - what is the minimum I would need to do to get that working?

I've read that the minimum requirements for a Wordpress theme are a style.css with a header comment, and an index.php. I'm wondering, could I simply save my HTML file as index.php, without it containing any actual PHP code, and deploy it that way? Or perhaps I need to save it as page.php and leave the index.php as the default minimal code? Are there any requirements beyond having those two files?

Also, since I have been given full admin access to their site, and my first priority is not to mess with it in any way, is there anything I should bear in mind to ensure my theme doesn't interfere with the rest of the site?

  • 1
    If your work doesn't need to utilise the theme that they already have in use on WordPress, I would imagine this could probably be done by using a subfolder or subdomain? It really depends on what you've specifically been asked to provide... – Mat Apr 14 '18 at 23:51
  • @Mat That would be ideal. Do you mean bypass the Wordpress CMS altogether and add a subfolder on the server manually? The problem is that the hosting is through wpengine which appears to be so tightly coupled to Wordpress that I'm not sure how it might allow me to simply create my own folder or assign a subdomain. Can you suggest a way to do that using the Wordpress CMS? – Igid Apr 14 '18 at 23:56
  • I'm not too familiar with WPEngine. However you should still be able to create a subfolder via FTP. Then just create a .htaccess file with the RewriteBase / rule. – Mat Apr 15 '18 at 0:46
  • Ok I will look into that. If I could do this it'd definitely save a lot of faff. Googling, I see .htaccess is an Apache configuration file. Can I assume their server runs Apache? How safe is it to use? (Outwith the remit of Wordpress entirely I know, but I appreciate your help.) – Igid Apr 15 '18 at 0:59
0

Developing a theme is pretty safe. You won't wreck anything. The minimum you need is style.css with the following header:

/*
Theme Name: example
*/

Then save your html file as index.php and add that too. If you have an html file and save it as a php file, it'll be fine. If it contains no actual php code, it'll just come out exactly the same. Then activate the theme, and the website will simply serve your index.php page every time. Not exactly what wordpress was designed to do, but no reason why that wouldn't work.

That said, my recommendation would be to invest a little time learning some of the working parts with WordPress and, even perhaps in time, leveraging some of its actual potential. It's a really, really great platform for a web developer to work from.

Edit:

Based on discussion in the comments, I think the actual solution to this will be to use a child theme along with one of two options for creating a template for a specific page.

First, a comment on child themes: The reason for this is so that you don't have to make edits to the theme currently running. This will allow it to receive updates without deleting the changes you make. More on child themes here and here. Then, you can use either a globally accessible page template, discussed here, or (and this is the one I would recommend) a page template applied to just one page, as discussed here.

Make your child theme by making a new theme directory called whatever you want, containing an empty file called functions.php (You don't have to use it, just have it here) and style.css with a header like this one:

/*
Theme Name: Example Child Theme
Template: existing-theme-directory-name
*/

Activate your child theme, and at this point nothing should change.

Then make a page in Wordpress which you can leave blank, just publish it to get your URL. (take note of the page's slug. If you miss it, an easy way to find it is click "quick edit" from the screen that shows all the pages) Then rename your HTML file page-my-page-slug.php (obviously using the page slug you collected earlier) and add it to your child theme directory. That file will now be served every time your page's URL is requested.

  • Great news. Just to double check though: if I create a page (in order to set its URL) and assign my theme to it, when navigating to that page will it pull up index.php or page.php? – Igid Apr 14 '18 at 23:59
  • If page.php exists, it'll use that. If not, it'll default to index.php. And you can even get more specific than page.php. Run a Google search for WordPress template hierarchy – Myles Apr 15 '18 at 0:00
  • It's worth noting that you can't exactly assign a theme to just one page. The theme is active for the whole site or not at all. If you just want to add one page to an existing site, you should make a child theme and use page-$slug.php where $slug is the page's slug that you intend to call with your permalink url – Myles Apr 15 '18 at 0:04
  • Ah ok, then the plot thickens. I think I misinterpreted this page as suggesting that in Page Attributes I could select my theme under Template. I do need to keep the rest of the site as-is and apply the theme to just my page. Would you mind updating your answer to explain the child theme solution? If I am essentially editing their theme (if only by adding to it) then I feel that's interfering and I would need to ask their consent to that. – Igid Apr 15 '18 at 0:14
  • @Igid Done. Give that a try. That'll let you not edit the existing theme at all – Myles Apr 15 '18 at 0:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.