Jump to content

How to use own html in PW?


Recommended Posts

I have created my static html front page for my website. a pretty basic one.

How do I use it on PW?

Do I delete files from site/templates directory?

and replace it with the html/css files of my basic website?

Tried to delete fields and pages in admin which comes with the default installation of PW.

But I cant delete them, it says template/field cannot be deleted.

Anyway, I really need to know the steps to use my own static html?

Thanks for the help

Link to comment
Share on other sites

How to use own html in PW?

Use your own html in header.inc and footer.inc or any .inc you want for your own html

that is going to show up on all your website pages.

For your individual html that shows up only in certain pages,

use it directly in any template file. In fact you can use php echo to output any html

at any place in your website. Does that make sense ?

I have to go to work now, so I have no time left to find posts in the forum where

this is shown with examples. Will see how this thread is going when I am at work.

Otherwise will post back. Stick around here.

  • Like 1
Link to comment
Share on other sites

is there any other approach other than seperating it wint .inc's?

I do get it, but it is much simplier and easier for me to understand if I put everything in index.php

very similar how I do it in modx revo, I have an index.html copy the code in modx where everything in front page is in there and create template variables and call those template variables on area's or div's  I want to put them.

i just want a index.php file where eveything I need to show in my front page is in there. (I'll put code in index.php with the code in my static index.html)

then from index.php there I will call the fields '<?=$page->field_name?>'.

Link to comment
Share on other sites

It might seem simpler and easier but is is neither efficient nor very wise :-). Of course, you can do it this way but your will repeating yourself over and over and over and over....in each template file that uses the same markup :-) But you can certainly do it that way - you do not have to use includes or split your template files. ProcessWire itself doesn't know or really care  :P  :lol: .....Yes, the fields would be your MODx TVs....As for index.php, no need to call your template file that (at least to avoid confusion with PW's index.php - although I am not sure it would cause any problems). So, call it home.php, or whatever. Again, PW doesn't mind much since you will not see home.php in the URL anyway!

Edited by kongondo
  • Like 1
Link to comment
Share on other sites

@dupalski: for the record, you might want to check out the "beginner site profile" Ryan has posted here.

Just to be very clear: include files (.inc, .php, whatever) are definitely not a requirement.. and on very simple sites they just make things more complicated. On larger and more complex sites that situation changes drastically.

  • Like 2
Link to comment
Share on other sites

Hi Dupalski

Take a look at this:


It is a little out of date, but work through it and you will learn all you need.

Ignore index,php - Everything you need to do is in /site/templates - just think of that as the root of your site.

For instance, the home.php file is the template for the home page.

Do this as an experiment.

Make sure in your admin you have the "home" page and it is using the "home" template. It is there by default.

Open your home.php file and delete EVERYTHING.

Now type:

"This is the home file"

Go to the front end of you website = mywebsite.com

It will display This is the home file - with no mark up obviously!

Now, edit the file again and add below the line:


echo $page->title;


Reload the page and it will now display

This is the home file Home

It has added the title of the home page.

Now, go and add proper html mark up - <html>, <head> and the rest. In the body put:

<h1><?php echo $page->title; ?></h1>

Reload and you will have a proper web page with the title as H1.

And that is how ProcessWire works!

As you add more fields to the template in the admin, so add them to your template file. For instance:

<?php echo $page->body; ?>

As for includes - there are various tactics for including other info. The most obvious one is splitting up the head, body and foot of the site as these tend to be common to all pages. But there are loads of different ways of doing this - ProcessWire has no set way, it is up to you how to do it. The only thing that is mandatory is that it MUST be in the templates folder and normally home.php would be your root template. To be honest, there is no reason to change that.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Similar Content

    • By Chris Bennett
      Hi all, have just upgraded to 3.0.184, a little late to the party.
      Not sure about a few things and would love to understand better.

      It seems to me like there is now an increased over-reliance on inline style width declarations on Inputfields.
      To me, they seem like extra bits of unnecessarily specific css that impede easily customisable CSS.
      I can't wrap my head around why they are needed.
      Surely CSS and flexbox can do this better, easier, with much greater flexibility, less javascript, less thread work, less bytes and less layout shifts?
      In previous versions, data-colwidth on everything with a width worked just fine.
      Was very easy to target li[data-colwidth] and use calc to add a margin if desired and use flexbox to flex like a champion, taking up available space.
      Lovely, simple, flexible and lightweight. 

      Now it seems some wrappers have a style="width: ..." where once they had data-colwidth and some Inputfields have data-original-width. 
      Each can technically be over-ridden using ...sigh... a multitude of repetitive !important declarations, but that is not ideal.
      Is there something I am missing? Is there a reason the inline width styles were needed?
      Is there a benefit I am unaware of? Can I help provide possible alternate solutions to whatever use case necessitated it?
      In a similar vein, I also got to see maxColHeightSpacer for the first time.
      Can't say it was a pleasure for it to appear.
      Similar to the use of inline style="width:..." on Inputfields, in the age of flexbox I don't understand why a spacer div with inline height is needed.
      Is there a need for it I just don't get? 
      Hadn't seen it before but found some info from a few years ago here:

      Anyway, I would honestly love any insight on any of this.
      Would love to understand the 'why' and, if possible, help. 
    • By Joachim
      Long time user and huge fan of PW, but this time I can't find an answer to my question this time:
      For my social media buttons, I have a Repeater field called var_link_web with two fields: one is for the URL, and the other is an Images field containing two images that are used as a background-image for a <div>, of which the second is the ':hover' version (although activated through JavaScript here). 
      There are four instances of this Repeater, of which two are 'turned off'.
      I use the following PHP in my _main.php to call them, wrapped in <p><?php == ?></p>:
      $s_m_button = $variables->var_link_web; foreach($s_m_button as $button){ $button_image = $button->var_link_image->first->height(80); $button_image2 = $button->var_link_image->eq(1)->height(80); echo " <a href='$button->var_link_url'> <div class='image_link' style='background-image:url({$button_image->url})' onMouseOver='this.style.backgroundImage=url({$button_image2->url})' onMouseOut='this.style.backgroundImage=url({$button_image->url})'> </div> </a>"; }; ($variables leads to an unpublished page with several fields I want to have easy access to, and is defined in _init.php.)
      However, this gives me the following result:

      I have no idea where the extra <p>'s come from. The URL field has the 'HTML Entity Encoder' turned on. What's even weirder is that the HTML source file seemingly renders correctly:
      <p> <a href='https://www.facebook.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1045/icons-facebook-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1045/icons-facebook-square.0x80.png)"'> </div> </a> <a href='https://www.instagram.com/'> <div class='image_link' style='background-image:url(/site/assets/files/1046/icons-instagram-square.0x80.png)' onMouseOver='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square2.0x80.png)"' onMouseOut='this.style.backgroundImage="url(/site/assets/files/1046/icons-instagram-square.0x80.png)"'> </div> </a> </p> Removing the JavaScript has no effect. I'm probably missing something obvious, but am at a loss here.
      Thank you in advance!
    • By franciccio-ITALIANO
      Hi, I have created over twenty different templates for the same site.
      In all of them, the same long piece of html code appears. 
      Could someone suggest me the php code I need to write in the template files to link that piece of html code, which is always the same everywhere?
      What strategies could I use to link it?
      The problem is that this long piece of code that is identical everywhere, MAY change IN TIME. So, when I fix it, I would have to change it in all twenty template files.... 
    • By theExo
      Hey folks,
      im pretty new to Processwire. A client of mine asked me to migrate his old (v2.5) Processwire Website. On his server its running on PHP 5.3 and i want to upgrade + migrate the site at the same time. I Downloaded the Site from his server to set it up locally, replaced the /wire directory, index.php and .htaccess with the files of the latest version. After that i changed the DB Connection details in the config.php, swapped to PHP 7.4 and now, when i open up the site on my localhost i get this error:
      compile(\ProcessWire\wire("config")->paths->root . "site/templates/includes/head.inc.php",array('includes'=>true,'namespace'=>true,'modules'=>true,'skipIfNamespace'=>true)))?> compile(\ProcessWire\wire("config")->paths->root . "site/templates/includes/header.inc.php",array('includes'=>true,'namespace'=>true,'modules'=>true,'skipIfNamespace'=>true)))?> compile(\ProcessWire\wire("config")->paths->root . "site/templates/includes/start_content.inc.php",array('includes'=>true,'namespace'=>true,'modules'=>true,'skipIfNamespace'=>true)))?> compile(\ProcessWire\wire("config")->paths->root . "site/templates/includes/footer.inc.php",array('includes'=>true,'namespace'=>true,'modules'=>true,'skipIfNamespace'=>true)))?> The page itself doesnt load, just a white space with this stuff on it
      I checked if the files exist, they do.
      I hope anyone can help me with that 🙂 Thanks in advance!
    • By OrinTerry
      Hello everyone. I am running a small technology blog, which is in WordPress. The main problem with my blog is that it does not open on any Windows 7 computer normally. I know Windows 7 has lost official support from Microsoft but still, there are plenty of users who still use Windows 7. The blog site is already 'HTTPS' protected but after opening in any browser, it shows 'not protected' next to the URL box. So, if I migrate all the site data to 'ProcessWare', will I get the same problem here too? Any kind of feedback would be greatly appreciated.
  • Create New...