Jump to content

How can i integrate HTML Kickstarter with processwire?


Recommended Posts


First of all, is there a way to enhance the html experience in the body of the pages? It seems that it doesnt render html code as it is supposed. 

Second, HTML Kickstarter is a nice way to get html snippets, but i dont know how to implement it in PW. If anyone knows let me know :D

Link to comment
Share on other sites

I think there are several obstacles here, and none of this is intended to cause offense, so please don't take it as such:

  1. It sounds like you are a bit confused as to the page's body field and template files themselves. Are you trying to put your HTML inside the body field on a page? Your actual site template files are in the /site/templates folder - head.inc and foot.inc contain header and footer HTML for the dfefault template, and the other files in there are for the various page templates and relate to the templates in the ProcessWire admin area itself. You don't have to use the head or foot files (they're for code that's on every page) but this tutorial will definitely help you out: http://wiki.processwire.com/index.php/Small_Project_Walkthrough
  2. See above with regards to implementing elements of HTML Kickstarter into your templates - the tutorial will help you understand the layout of template files and how to output ProcessWire data in your templates.
  3. You should have some knowledge of HTML, related tags and how it works and preferably a little of PHP before continuing - PHP knowledge is less essential in theory as things like the tutorials can help you get started there.

I think in short you need to step back from what you're trying to do and follow one of the tutorials to see how things work first. Once you know that, you'll see the endless possibilities, but I think you need to get a clearer picture of how it all fits together first.

Sorry, didn't mean to mention tutorials so much there - they aren't always the easiest to find as the following page doesn't show up in search results (oddly), but here's another page with some useful links: http://processwire.com/tutorials/

Hope that helps :)

  • Like 1
Link to comment
Share on other sites

Thanks a lot! Im new here and eventhough i have a simple knowledge of html and php i still need to figure out how it is implemented in PW. I hope i dont annoy people in the forum, but im sure other people that come to PW will have similar doubts :D

  • Like 1
Link to comment
Share on other sites

To start, get a fresh copy of ProcessWire and install it (with the included basic profile). Then get a fresh copy of HTML Kickstart and unzip it. You'll want to take these dirs/files from HTML Kickstart (below), and move them to the root of your ProcessWire installation (where ProcessWire's /index.php file is located): 

  • /css/
  • /js/
  • /style.css

I've taken the example.html that comes with KickStart and converted it into starter ProcessWire templates for you:


Unzip the attached file to replace the files in your ProcessWire's /site/templates/ directory. This includes these files:

  • head.inc
  • foot.inc
  • basic-page.php
  • home.php

Now view your site. You should see HTML Kickstart's example.html file powering your ProcessWire site. Navigation should be using HTML Kickstart's horizontal menu and both bodycopy and sidebar should populate. I've left several static elements from the HTML Kickstart example.html as well, so you've got more to experiment with here. 

Let me know how it goes and if it makes sense. 

This thread is also related. 

  • Like 12
Link to comment
Share on other sites

Thanks for the instructions! They are very complete! I hope you get to fit the HTML Kickstarter theme on PW, it would be nice! 

i got to play around with the code you gave me and it was great, eventhough i could not achieve what i wanted. Doesnt matter, im a newbe here though and im experimenting with the possibilities here in PW. 

i got to create this blog:http://ktspr.com/blog/ , its basically the default blog profile. But i love the feeling it has, i dont know if it makes sense. Here is where i wanted to add a featured articles tab or slideshow in the homepage... could not achieve this for now... :/

The other project i have is a small food delivery service which im working on the dummy. Here i would like to have orders taken from the website so that they can be delivered, here is the demo: http://ktspr.com/elsistemad/ 

here i will be asking for some tips on how to best organize and make possible a checkout and things like that...

thanks for the tips!!!! 

Link to comment
Share on other sites

Joshua, I'd actually like to do a full HTML Kickstart profile for ProcessWire, if that'd be alright with you. Maybe we could collaborate on it sometime?

Awesome idea... something I have been thinking about for a while now too. I'm in. I would love to hear your ideas. I don't think this would take that long. I do it every time I build a website. :P 

@siulynot - Keep up the good work! I am excited to see your projects evolve. 

  • Like 1
Link to comment
Share on other sites


You might want to look at what I have done (er, am doing) with a bootstrap profile


Basically I am creating two - one that has bootstrap installed and then demonstration pages showing how some of the bootstrap elements work in this environment (which is actually straight out of the box, but it is nice to show it anyway)

Then the second is the same things with just about everything removed - almost no fields, only a couple of template files, no content, just ready to go and put together so that more up-to-date bootstrap versions can be just dropped in place. The only extras in there is the standard Bootstrap menu system wired into PW and basic demo carousel and accordion files to save people having to mess around with these.

So, that is the profile that is really useful to people - the first is just a reference.


  • Like 3
Link to comment
Share on other sites

Awesome idea... something I have been thinking about for a while now too. I'm in. I would love to hear your ideas. I don't think this would take that long. I do it every time I build a website.

I was originally thinking it would be something fairly simple where you could just swap out the files from the default profile with new files, and have it ready to go. And that would be plenty useful. But it would probably be better to go further and try to account for most of the elements. At least, I think this would be more useful to people that want to literally use it to build a site from. So it would be nice to have more than what's currently with the default profile... like a template that uses the slideshow (or ability for any template to use it), a contact form, ability to use the various list styles and menus/button bars, tables, captions with images, icons, etc. (we'll need Soma's expertise with configuring TinyMCE for some of this). All the while keeping the layout and look simple and generic enough that someone could also easily build from it as a base.

How about you handle the front end and I'll handle the back end? Let me know if that's of interest, or if you have other ideas? Perhaps some of this overlaps with your plans for HTML KickStart too? If we were to collaborate on this, it seems like it would be not just another profile but more likely one to replace the default profile included with ProcessWire (which is in need of replacement). Though I do think it's important that the next default profile be a little more mobile-friendly than the current one is. Anything that takes the default profile further also means we should include a second "blank" profile with PW (which we don't currently do, but I think we should).

I was also excited to hear about your plans for HTML KickStart. Thanks for the shoutout too. :)

  • Like 5
Link to comment
Share on other sites

  • 2 weeks later...

Okay, just knocking together the very beginnings of the Kickwire profile.

It will be very rough round the edges!

At the moment, I have bashed around the menu Soma did for me for Bootstrap, so that works (but will need cleaning up a bit more), and I have a gallery function working.


About it so far


  • Like 4
Link to comment
Share on other sites

Well, its part done, but Joshua is currently working through some major updates with Kickstart, so I am waiting to see what he comes up with.

I have currently done a sort of proof of concept, but I have changed a couple of his JQuery utilities - changing fancybox1 for colorbox and bxslider for flexslider and his tabs script - so that it is compatible with JQuery 1.9.1 - But I think he is trying to address some of those issues anyway, so I dont want to get too far ahead of him.

The approach I am taking with this (and I am redoing my bootstrap in the same way) is a function file with some of the main components demo'd using basic fields.

That means to get them working you can just do <?php loadKickwireTabs(); ?> in your template file and you will have tabs, assuming you have done your fields the same way.

Most people will then edit it like crazy to put their own fields into play, but at least they have the basic markup done rather than have to start from scratch.

Obviously, that is only for a few things like carousel, the rest will be up to the user!


Link to comment
Share on other sites

New HTML KickStart Updates. Joss take a look. Slimmer. Using Font awesome now. :)

I want to change out the light box. Working on finding a great modal replacement that I can use for more than just light box. Getting close. Experimenting. Anyhow, take a look at the update. 

  • Like 2
Link to comment
Share on other sites

On my testbed version I have got flexslider working in three modes - slide show, carousel strip on its own, gallery with fade-slideshow and carousel synced together. Just with different css classes.

Works quite sweetly.

Link to comment
Share on other sites

New HTML KickStart Updates. Joss take a look. Slimmer. Using Font awesome now. :)

I want to change out the light box. Working on finding a great modal replacement that I can use for more than just light box. Getting close. Experimenting. Anyhow, take a look at the update. 

Your copyright notice at the bottom is a bit far into the future ;)

Link to comment
Share on other sites

  • 1 month later...

Has anyone used Ryan's converted example.html (http://processwire.com/talk/topic/2731-how-can-i-integrate-html-kickstarter-with-processwire/?p=26612)? I thought I'd give kickstart a go for a new project, but none of the new responsive goodness works properly.

I'll have a play and sort it out, but thought if someone else might have already sorted this out :)

Link to comment
Share on other sites

The best way is to just go and get Kickstart from the kickstart website


Then just add it to your templates folder as if you were doing a normal static site.

I think he has now updated it to run with JQuery 1.9.1 - though I am not too sure.

I was messing around with it and I changed a couple of things for myself - I replaced bxslider with flexslider and use Jack Moore's colorbox and a couple of other things. But I need to spend some time to see what Joshua has been up to really.

It is on my growing todo list!

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 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 hellomoto
      I can't tell what's wrong; my local development version appears just fine, but I copy over the site files and db online and the homepage content is not being contained. This is what it should look like (same site in the same browser, running on my localhost): http://imgur.com/UFZFzrd
      What could be the problem here? Sorry to bring up something so irrelevant to PW here, I just know that you all are a valiant and helpful group, and no one on StackExchange seems to even know what I'm talking about.
      Thanks a lot.
    • By CareerTeam GmbH
      Hi there,
      We are an executive search agency based in Germany looking for a freelancer (2-5 days per week) supporting us with the development and design of our websites. The position will be located in Hamburg, Germany and it would be great if you are on short call. German language knowledge is mandatory. 
      You can reach me via email jobs@careerteam.de.
      Thank you!
  • Create New...