Jump to content

About Standard Theme Processwire: where is html file?

Recommended Posts

Hi, I know the the templates in processwire are html files.
I search it into foleder "site" of standard installation of processwire standard theme (blanck and that blue) but I don't find any html file to modify it by html code.
So, I must modify it only by php code?
Can I traduct php pages templates in html page?

Link to comment
Share on other sites


I know the the templates in processwire are html files.

They are not, the templates are PHP files.


I search it into foleder "site" of standard installation of processwire standard theme

You need to look in /site/templates/


must modify it only by php code?


But if you use the wireRender pattern, then you can create pure html views, still .php files, but those can be placed into a $content variable for delayed output.

Link to comment
Share on other sites

Hello @franciccio-ITALIANO,

you could start by renaming the HTML files inside your templates folder from .html to .php and add them as templates. But those template files would be still static HTML. So you would have to define some fields for your dynamic content and add them to your templates. Next step would be to output those fields with PHP between the HTML. But this has been already explained more better here:

https://www.smashingmagazine.com/2016/07/the-aesthetic-of-non-opinionated-content-management-a-beginners-guide-to-processwire/ (Must read)

Regards, Andreas

  • Like 3
Link to comment
Share on other sites

6 hours ago, franciccio-ITALIANO said:

Must I traduct html files in php code by... what? Exist a program or application that do this work?

I would just say, it's no small thing – adapting a CSS theme to be used in processwire requires a decent knowledge of how to use the API, as well as some fairly good experience with HTML and PHP.

I can get a basic HTML 'theme' into a simple PW site in around 3-5 hrs, depending on the complexity, and that is using a lot of helper modules and functions that I developed over the years. It depends on the content of the site, how many templates you have and the types of fields you are using. For a 1 page site, it should be pretty simple, you just need to replace the contents of the _main.php file with the content of the html file and then update all of the paths to the assets, using for example a call to the $config variable for the templates folder (e.g. $config->urls->templates . "styles/my-style.css";)

  • Like 2
Link to comment
Share on other sites

Many of us have used "classical" systems with "system rules" to make websites before using Processwire. Processwire is a decoupled system without any rules. So with Processwire you handle html by: 1. writing your own html code in your processwire template files, 2. including inc files that hold your html code using php include, 3. generating dynamic html code with the processwire api combined with php, 4. etc. etc. etc. So if you see a nice free html template somewhere on the internet that you want to use to make a website, you would have to strip its html code and bring it inside processwire.

  • Like 2
Link to comment
Share on other sites

9 hours ago, Macrura said:

-...and then update all of the paths to the assets, using for example a call to the $config variable for the templates folder (e.g. $config->urls->templates . "styles/my-style.css";)


Thank to all!

But I don't understand this up.

The .php templates files have to put in "site -> templates". Ok.

The css. file in  "site -> templates -> styles". Right?

The images of the templates in "site -> templates -> styles -> images". Well.

So, WHAT must I put in  "site -> assets"
Must I don't touch it?

Then, in packets that I download by  http://www.free-css.com/, we find .js files and .scss file.

Now, in processwire into which folder must we put it?

Macrura, I don't undierstand where and why I must write php code that you suggest me!









Link to comment
Share on other sites

Once you are in the site->template folder you can structure your files/directories as you like, as long as you link them correctly inside your template folders.

And yes, leave site->assets alone ;)

You can contact me on skype (my nick is : The3fingers), I'm italian too.

  • Like 2
Link to comment
Share on other sites

3 hours ago, franciccio-ITALIANO said:

Macrura, I don't undierstand where and why I must write php code that you suggest me!

you would be writing php code to communicate with the PW api, to get your dynamic content from the CMS.

In reference to the $config->urls->templates, you can take a look at the default _main.php to see how that is being used to reference the themes folder, when you reference an asset (css or js file) that is stored within your templates folder.

  • Like 1
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 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 Marvin
      Hello, excuse me
      I'm new at processwire, i want to ask about a master detail system (Inheritance system) using a processwire. Can we create a Inheritance table using a processwire, and how we create it? Thank you for the help
    • By Zendex
      I am trying to make a site for a studio, and I wanted to set a specific hover effect for my text. I want the background of the text to be lit up in the full height of the nav bar but it doesn't do it. I showed the expected result in the png in the attached files. I will also set the code here below, the top part is a css reset.
      <!doctype html>
      <meta charset="UTF-8">
          <link href="style.css" rel="stylesheet" type="text/css">
          <link rel="preconnect" href="https://fonts.gstatic.com"> 
      <link href="https://fonts.googleapis.com/css2?family=Offside&display=swap" rel="stylesheet">
          <div id="nav_bar">
              <div id="Zendex">ZENDEX</div>
          <a href="contact.html"><li>CONTACT</li></a>
          <a href="films.html"><li>FILMS</li></a>
          <a href="about.html"><li>ABOUT</li></a>
          <a href="home.html"><li>HOME</li></a>
          <div class="main"></div>
      @charset "UTF-8";
      /* CSS Document */
      html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed, 
      figure, figcaption, footer, header, hgroup, 
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
          margin: 0;
          padding: 0;
          border: 0;
          font-size: 100%;
          font: inherit;
          vertical-align: baseline;
      article, aside, details, figcaption, figure, 
      footer, header, hgroup, menu, nav, section {
          display: block;
      body {
          line-height: 1;
          background-color: #6A6969;
      ol, ul {
          list-style: none;
      blockquote, q {
          quotes: none;
      blockquote:before, blockquote:after,
      q:before, q:after {
          content: '';
          content: none;
      table {
          border-collapse: collapse;
          border-spacing: 0;
          overflow: hidden;
          position: fixed;
          top: 0;
          width: 100vw;
          height: 125px;
          background-color: #484848;
          border: solid 1px black;
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: right;
          margin: 45px 50px 0px 0px;
          height: 125px;
          font-size: 24px;
          text-shadow: 1px 1px 100px white;
          font-family: 'Offside', cursive;
          float: left;
          margin: 45px 0px 0px 100px;
          color: azure;
          margin: 0px 50px 0px 0px;
          color: azure;
          height: 125px;
          color: white;
          height: 125px;
          background-color: #6A6969;
          color: white;

    • By Marvin
      I'm still new at processwire, i want to ask, i was create a website with sign in system, but i want to add a access roles/permission for each user at my website. For now, i just can create a login user without any permission and the user data became as a pages in my processwire.
      Here i attach my code for login
      <?php $note = $note2 = $hidden =""; if($input->get->id == "logout") { $session->remove('login_id'); } if($input->post->submit) { $email = $sanitizer->email($input->post->email); $pass = $sanitizer->text($input->post->pass); $result = $pages->find("email=$email, text_1=$pass"); if(!$email || !$pass) { $note = "Data belum lengkap"; } else { if($result->count > 0) { $session->login_id = "$result"; $hidden = "style = 'diplay:none'"; $url=$pages->get("/files/")->httpUrl; header("Location:$url"); die(); } else { $note = "Akun tidak ditemukan"; } } } ?> And this code for login form
      <div class="frow-container"> <div class="frow centered mt-50"> <div class="col-md-1-3"> <div class="box p-40 shadow-light"> <h2 class="mb-20 text-center" <?=$hidden?>>Database Partitur<br>GII HIT</h2> <form method="post" <?=$hidden?>> <label>Username <input type="text" name="email"></label> <label>Password <input type="password" name="pass"></label> <input type="submit" name="submit" value="Masuk"> </form> <p class="notif"><?=$note;?></p> <div class="text-center"><?=$note2;?></div> </div> </div> </div> </div> Just for remember, my user data now is a pages, and i cannot give any permission to user data.
      Thank you very much for help.
  • Create New...