Learn & Launch project

[MilenKo]

Greetings to all of you gorgeous people here. I have stumbled across ProcessWire while looking for functionality info on MODx Revo and I felt in love with it. As far as I am not a programmer and have enough books to read and learn throughout my IT job, I was looking for something to be easy (for starting) and that can let me have fun and learn something extra.

To make the learning memorable, I am always diving into the matter so following my habit in PW too, I decided to pick up a more complex HTML theme and make it dynamic using PW.

Am I a programmer - well, I can read and eventually modify some code, but to write it from scratch - not anywhere close. Am I an HTML guru - not exactly, and that is why I decided to grab a theme I like and play with it. My only requirement was to have a well written and fully validated responsive theme. So I found THIS ONE and plan to work with it (already purchased to support the developer).

I am planning to share my approaches and the progress so would appreciate any shared thoughts, advice, and even some criticism if you see me getting into a wrong direction. Having done most of the project under ModX it should not be that difficult for me to have all the bits and pieces in place. Where I am not sure yet how that would be done are the pull up of the latest posts/comments, the categories with listings, search, and some other stuff. What I found great in PW was the fact that it already has a fully working theme that I can dissect, read through a zooming glass and take some code from there. 

My first question is - which way should I go for the repetitive pieces of code (chunks) - should I create an include folder in site/templates and put all my pieces as XXXX.inc or I should just add those in the database as templates with no file assigned to them and set as not searchable etc. I would appreciate if you share your best experience and give some info why that is the better option so that I can understand the approach and turn it into a proper habit.

Once I have this cleared out, I would start documenting the process so any corrections or better approaches can be suggested.

Wish me luck on that journey and let's make it happen together. Shall we?

[alxndre]

Welcome to the ProcessWire community, and good luck.

[fbg13]

1 hour ago, MilenKo said:

Where I am not sure yet how that would be done are the pull up of the latest posts/comments, the categories with listings, search, and some other stuff.

https://processwire.com/api/selectors/

http://processwire.com/api/fieldtypes/comments/

For categories see here 

 

1 hour ago, MilenKo said:

My first question is - which way should I go for the repetitive pieces of code

 

 

 

[blynx]

Welcome @MilenKo!

A small question: Where did you actually find/get that theme? It looks really comprehensive and interesting!

I'd also recommend looking into: https://processwire.com/blog/posts/processwire-3.0.7-expands-field-rendering-page-path-history-and-more/
"Field rendering with template files"

good luck!

[MilenKo]

Hello Blynx. Thanks for the info. I will definitely have a look at the link you shared. Regarding the theme, I really liked the markup, styling and the pure use of Bootstrap.

Here is the link to the theme market. I just hope the devs would not be against the fact that I am planning to direct the code and make it a PW theme. For sure everyone who likes it and want to use it for a personal projects should pay the fair price and support the efforts.

So how about your themes guys, should I start putting chunks as files or on the database (to me the DB option is more secure but being a newbie...)

[blynx]

Hm, why would chunks in the database be more secure?

Usually I am trying to use the $page->render() method as often as possible. You will have reusable components in the tempaltes/fields/ folder then - image galleries, navigations, etc ... also I am using the delayed output method: https://processwire.com/docs/tutorials/how-to-structure-your-template-files/page4 

Right now I am beginning to build my own "renderComponent()" function similar to $page->render which handles this, and also automatically includes css and js files which are placed like

/templates/components/navigation/navigation.php
/templates/components/navigation/navigation.css
/templates/components/navigation/navigation.js

... and later it shall also handle require.js automatically. ... And I am dreaming about a "require.css" thingy. ... and then put it into a module ... or so.

But it is pretty much up to you, processwire is very open in that respect - you should just start and see where it will lead you. You will better understand the pros and cons when you relly have tried and felt them
Also, I think you will get into PHP very quickly by using processwire - just like in my case ...

 

[MilenKo]

Hey blynx, that looks like a nice idea of yours. It seems easy for me to just do a chunk and add it to /include/head.inc so call it with php include where needed. I am not just sure if that is considered safe. As far as you have seen the theme, I am not going to have tons of inc files and basically would cut in head, header, body/content, sidebar, footer. As far as the sidebar would not be changing for now based on the page it appears, it would be considered static with the head, header and footer. I will read the delayed output and try to apply that to the theme, however not sure would I understand it quickly. As I mentioned earlier, I am more to the see/touch and learn rather than just read and try, but hey, there is always a place for changes and learning

So what about the others in here - should I aim at using delayed output as best practice or go another way? I really love the freedom to develop your web page the way you like it with no restrictions or rules, however being new to PW makes some confusion for me to choose the proper/best approach. I checked a few videos in Internet and saw the devs applying different approaches so that adds a bit.

[MilenKo]

OK. After reading the whole document of how to structure your theme I think I got the answer where I should be aiming and it is as Blynx already advised - the delayed output. I have no plans for the future of the final theme other than just learning the API and having fun creating something, but might need to add more to the final theme of the time and turn it to a more scalable. Considering the pros and cons of the static file includes I am not going to pick up the easy way and will learn to think and do it in perspective.

So delayed output it is (or should I say "main.inc strategy" ), now just need to come with a plan of action.

Btw, is there a way to check under the hood of the PW demo site as I really liked the filters and they might come handy to be able to filter quicker the results of my project if several categories and criteria are added?

[AndZyk]

Welcome @MilenKo,

great that you want to give ProcessWire a shot. I think you won't regret it. 

Delayed output would be a better choice for more complex sites, but that is up to you, as PW doesn't dictate you how to structure your templates. I for example started with direct output and just switched to delayed output a few months ago. But for single pages I still use direct output. Whatever is most convenient for the project.

You can look at the default site profile included in the PW installation to have a look at delayed output.

3 hours ago, MilenKo said:

Btw, is there a way to check under the hood of the PW demo site as I really liked the filters and they might come handy to be able to filter quicker the results of my project if several categories and criteria are added?

You can find the complete site profile of the PW skyscraper demo on GitHub. There is also an corresponding blog post. Ryan used in the new skyscraper demo the new region function, which is also explained in the blog post. This is an more advanced site profile, so the default site profile is maybe easier to start with.

Best way to learn PW in my opinion is to get your hands on and learn by doing. Happy coding. 

Regards, Andreas

[blynx]

Oh, and just a little addition / inspiration for the delayed output:

I also have a /templates/layouts/ folder were I have different "main.inc"s in case the resulting layout has fundamental differences.

/layouts/layout-basic.php
/layouts/layout-home.php

most of the time thats enough ...

[MilenKo]

Ok. I am already set on the real host, so decided to use the Dev release. On top of that, I just installed Reno theme which is kind of more convenient for me and looks neat.

I still need to clear out one thing though before starting to describe the process of the theme building using delayed output.

So far from what I understood reading howto's and tutorials kindly shared by the community and not only, the idea behind the delayed output is to generate the variables output in a single file (let's call it _init.php). This would mean that I will have to add the fields I think are needed mostly for all the pages/templates of the project and define most of the useful ones in the _init.php.

Once that is done, I will create the main theme file _main.php and add the HTML structure calling/echoing in the proper spots the variables defined in the _init.php already. That part is clear. What I also understood is that any "chunk" of ModX is a template in PW. So if I want to have a sidebar, I will have a template with the content of that and then define a call in the init file.

What I would like to know is the following: if I have a specific HTML code that is not a part of the header.inc and footer.inc, how would I proceed to have it added to the template (let's say I have an HTML code for the sidebar). Should I just go and define a field Sidebar and use the text field where I can add the HTML code I need or there is something else that I am still missing in the whole picture? For sure I can have an inclusion of sidebar.inc and again define it in _init.php , however, I am just checking up what other options are there.

The other thing not clear yet is the fact that my _main.php would contain the code for the main page. So what about the rest of the pages (about, contact etc.) that might be of a completely different structure. Would they be called _about.php etc. and would the _init.php be called for those as well automatically once added in the config.php?

I am thinking that once those are clear for me, I am ready to start the journey. I was playing last night of creating the theme by creating a file for all my pages and inserting the code and I should say that for a non-programmer and former ModX user, I can clearly say that PW is quite ahead. The fact that I have never played much with PHP and for a few hours of inserting API code I was able to get the habit to not miss semicolon, troubleshoot some basic errors that are showing if I miss or misspell something in the code - makes me happy. It feels like learning a CMF/CMS and PHP. 3-in-1 is a huge bonus for me and I should say a HUGE THANK YOU to anyone involved in the beauty of the code under the hood.

I was surprised that well-known e-learning companies like Lynda and the rest have not thrown yet some extensive (and expensive too  ) courses regarding PW. There aren't many theme styling videos as well. I guess that is caused by the freedom to structure your site the way you like it as far as the code is within the API and PHP compliance. 

Anyway, using built in PHP features for the web while having the API covering your back strongly - how can you not stick with PW...

[MilenKo]

BTW, Blynx, I found in YouTube some cool series of starting with ProcessWire in German and now I regret a bit that I did not pay much attention to my German classes. For sure watching it might worth it but it would have been so much easier to have it "predigested" to a well known language. Especially concerning the technical part of the coding etc.

[blynx]

4 minutes ago, MilenKo said:

What I would like to know is the following: if I have a specific HTML code that is not a part of the header.inc and footer.inc, how would I proceed to have it added to the template (let's say I have an HTML code for the sidebar). Should I just go and define a field Sidebar and use the text field where I can add the HTML code I need or there is something else that I am still missing in the whole picture? For sure I can have an inclusion of sidebar.inc and again define it in _init.php , however, I am just checking up what other options are there.

Do you mean to put HTML code into a field in the admin backend?
Don't do it. It is probably 'bad design'. Anything in your fields / pages should be just content.

Anything markup should probably be some php file under your templates folder. A common approach is a "partials" folder where one could store snippets of markup which can be placed here and there.

Have a look at these methods:

http://processwire.com/api/ref/files/render/
http://processwire.com/api/ref/page/render-field/
http://processwire.com/api/ref/page/render-value/
http://processwire.com/api/ref/files/include/

They all have the purpose to render some .php file in one way or the other - or html markup.

Quick example:

// templates/template-file.php

<?php namespace ProcessWire;
$output = $files->render('snippets/sidebar.php', ['hello' => 'hello world!']);
include('./layouts/layout.php') // delayed output
?>

// /templates/snippets/sidebar.php

<div id="sidebar">
  <?= $hello ?>
</div>

// /templates/layouts/layout.php

<html>
  <body>
    <?= $output ?>
  </body>
</html>

Sometimes it is good to not worry too much about the theoretical "right way" - I also often do. But often it just prevents me from actually learning right away  

Maybe post an example of the sidebar HTML you want to include - We / I could give you a better advice if we see the actual code because it is more clear what you are up to.

cheers!

[MilenKo]

Oh, I am sucking up any info I can get my hands on. Thanx again Blynx. Will have a look on those too and come up with the final plan. The sidebar is the one in the HTML theme I mentioned will be used for the purpose.

Btw, I have another question/idea - I would like to create a page which would hold the default site setup options, eg. social media links, page colors/styles, logo, google map coordinates etc. and any other information that would be set only once and would appear on all pages the same way. Think of it like a main theme administration page with all the above listed.

So far I can create the necessary fields and assign them to a template (called Site settings for example). So I will also create a page with the same name and would hide it from the search etc. The question is how would I show those fields on all other pages (let's say I want to show social media sharing icons on main, news, archives etc.)

[blynx]

Try it out!  There is no definite solution ...
Just remeber to keep markup always in .php files -

I often put side-wide options into the home template. But if they are not relevant for the editor it is probably better to put them into the .php files.

For example you could add options to the $config variable in init.php

<?php

$config->my_site_options = array();

$config->my_site_options['nice-color'] = '#123456';

 

[MilenKo]

Blynx, I am trying to build a settings page so that I don't have to edit any code at some given time but just to change text fields, images, styles etc. I think it should be OK to create a Setup template, hide it from the search and populate the variables where they are needed. After all PW can for sure take the data from a specific page so it would be the solution of my idea (I think)

[blynx]

Yep, sounds legit. : )

[MilenKo]

Ok. I started setting up the front page of the theme and so far it is OK. For the 3 featured blocks, I will create a few child pages and show latest 3 from there. For the main howto blocks, I plan to create a page under Home naming it HowTo and in there to add all the child as subpages.

So here is the planned structure:

Home

      HowTos

            Networking

                   How-to1, Howto2, etc.

             Windows

                    Windows1, Windows2, etc.

Now the question is how can I pull the latest N-sub-child pages from all child ones (Networking, Windows)

So far I can call the lists by using the following:

<?php foreach ($pages->find('template=XXXXXXX,limit=3') as $client):?>

......

<? endforeach; ?>

But what if I rename the template name - will this code still work or I should change the template and add the new one in the query above.

Also, there have to be a more elegant way to say: Grab any child pages of HowTos and limit the appearance by 3. By achieving this, I can use the template for 1 column from the theme and repeat it N-times as needed.

 

[MilenKo]

        I guess I will be hunting for ideas from the demo site and see the organization there.

[MilenKo]

Ok. The work have started to move from diagram mindset to code.

A quick question regarding the insert of images as URL (I am setting up the logo field now).

So I put in _init.php the code for the logo:

$logo = $page->logo->url . $page->logo;

And then where needed in the header I just echo $logo. It is working fine, however I am not sure if there is a simpler way of doing that that I am missing so far

For the moment the 3 featured blocks are already theme driven using the Repeator. For the moment I do not plan to have them as a different template and post more than those 3 in the featured block. So the blocks would be used for some short Topic related info and no Read More buttons.

Once I finish with the homepage, will share the steps and what was done to make it dynamic.

[MilenKo]

OK, I am moving forward and I think I learned the way the settings page can be accomplished. It was right under my nose, but I guess I did not read/understand it properly.

So the trick would be to create a Settings page with no template file attached. Hide it from search etc. and assign any desired fields to it that needs to be entered by user.

When all the fields are set, the easy way to obtain them is to use 'pages':

$logo = $pages->get("/settings")->logo->url (of course the settings can be replaced by any page name and the ->logo can be any field.) Unless the url is not needed, you can simply remove it.

So in my case of having the settings page created and the template settings assigned to it with all the fields, I can easily add the variables that I plan to use through the entire site in the _init.php and call them later by their variable.

Now to cut back to the point, I spent an hour today and am totally finished with the FAQ page where I created two groups of FAQ questions (Presales and Customers) and using the Repeater module allowed the users to add as many FAQ's as they want. For sure I could have just used a single field for the repeater, however just wanted to have an example and stick sort of to the theme. 

Where I had a little issue was in the HTML code which shows the answer of the FAQ question:

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#accordion-1-1">Question Text</a>

At first I just applied the fields to #accordion1-pageID but that did not work well as the id=1024 in my case.

Then I came up with the idea of assigning an incremental value to a variable and use it in there. So here is what I did:

<?php foreach ($page->faq_presale as $presalefaq):
	$incr = $incr+1; ?>
	<div class="panel">
		<div class="panel-heading">
			<h4 class="panel-title">
				<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#accordion-1-<?php echo $incr;?>"><?php echo $presalefaq->title;?></a>
			</h4>
		</div><!-- .panel-heading -->
		<div id="accordion-1-<?php echo $incr;?>" class="panel-collapse collapse">
			<div class="panel-body">
				<p><?php echo $presalefaq->body;?></p>
			</div><!-- .panel-body -->
		</div>
	</div><!-- .panel -->
<?php endforeach; ?>

I am not really sure are there any quicker and better ways of resolving the issue and having a leaner code, however, that works just fine, so unless one of a more skilled gents and ladies here shares an idea, I am just going to stick with that.

On the FAQ page, there is nothing really to explain much other than installing the Repeater module (I eager to try the latest version of Ryan that just read about this morning and it will be very exciting to play with), set two fields and assign repeater type to them (faq_presale and faq_customers). As with every repeater, I assigned to them the following fields: title and body.

Later on, created the template for FAQ and inserted in it the following fields: title (used for the title of the page), headline (used for the subtitle under the title)

faq_presales and faq_customers. Added the desired info in both and called them in the theme as it is shown above.

I am not providing all the details so far as the theme dynamics might get some changes before they reach the final stage, so once I am done fully, will go over and provide all the details. On top of that, so far I did not bother adding any SEO fields to the equation but it is definitely a must for the good health of the project.

Now knowing how can I move all my project settings to an isolated page, will proceed now and move them in. I am still wondering how come I did not hear earlier of ProcessWire and was jumping around form CMS to CMS in the hope of finding a way to just make it work...

[Robin S]

1 hour ago, MilenKo said:

At first I just applied the fields to #accordion1-pageID but that did not work well as the id=1024 in my case.

I think this should work...

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-1" href="#accordion-1-<?php echo $presalefaq->id; ?>"><?php echo $presalefaq->title;?></a>
...
<div id="accordion-1-<?php echo $presalefaq->id; ?>" class="panel-collapse collapse">

...but your solution is fine also.

[MilenKo]

Hello Robin S.

I knew it has to be something easy however I did not just realize that I can request an id from any resource and that is why I had to improvise. What I like more in your approach is the elegance of the code with no additional variables added to the equation.

Thank you very much for the simple but important reminder how superb is the PW API.

[MilenKo]

OK, today I was playing with the breadcrumb as it was right about the time, so a simple and elegant piece of code did the trick. All I had to do was to check up the way it is done in the default site and apply it to the theme styling. All worked like a charm with a little issue I had with News and Articles where the link to the Home page was changed and instead of being nowknow.pw was like nowknow.pw/about#. As far as the Home link worked properly on FAQ, I checked the other two files and surprisingly found that I forgot to add the code there.

Because of the repetitive chunks of code in all templates, I decided to add a few pieces in the include folder so I ended up having:

header.inc (header), footer.inc (obviously- footer), breadcrumbs.inc (breadcrumbs code) and sidebar.inc (so far the HTML appearance of the sidebar). To make the pieces appear where needed I included the files in their proper places around the HTML files.

Once all the dynamics are finished I will see a way to add them all back in one piece but for the moment I feel better if they are separated.

Here is the final code I used for breadcrumbs:

<div class="site-hero clearfix">
	<div class="container">
		<ol class="breadcrumb breadcrumb-custom">
			<li class="text">You are here: </li>
			
			<?php foreach($page->parents as $parent) {
			// Echoing the parrent title with link (1st line) and present page with no link (2nd line)
			echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>";	
			}
			echo "<li class='active'>{$page->title}</li>"; ?>
			
		</ol>
	</div>
</div><!-- .site-hero -->

My next target is the menu builder. As far as the menu itself is not going to be multilevel etc. by default I could easily get along with the pure HTML and links to the proper pages. However, as the topic says Launch and Learn, I am planning to try the amazing Menu Builder module. So far I installed the module and inserted the code as per the instruction here, however as a result I got tons of errors of not existing menu. I checked the menu name and it was properly typed so something might be wrong with the module install or else. But that will be my play for tomorrow as it is late here now and I learned that coding asleep is like messing the things up. Once I finish with the menu, I will move to the dynamic content of the main page, Article, News and Contact us.

Btw, because of the poor Internet connection today I worked on my local server at home so now, I will have to learn to export the templates and DB to the online hosting and make sure everything works. Any ideas or suggestions for easy "export" and "import" are more than welcome

[Robin S]

10 minutes ago, MilenKo said:

Here is the final code I used for breadcrumbs:

<div class="site-hero clearfix">
  <div class="container">
    <ol class="breadcrumb breadcrumb-custom">
      <li class="text">You are here: </li>

      <?php foreach($page->parents as $parent) {
          // Echoing the parrent title with link (1st line) and present page with no link (2nd line)
          echo "<li><a href='{$parent->url}'>{$parent->title}</a></li>";	
          echo "<li class='active'>{$page->title}</li>";
      } ?>
      
    </ol>
  </div>
</div><!-- .site-hero -->

 

Spotted a couple of things here.

I think you want the last breadcrumb item outside of the foreach loop - otherwise when there are multiple parents you will get multiple copies of the 'active' item.

And folks argue over what is the semantically correct markup for breadcrumbs, but when using an ordered list I think the "You are here" text should be outside the list as it doesn't represent a page in the site hierarchy.