Steps to create simple blog site for beginner

[pixsie03]

How to step by step create a simple blog site in processwire ?  I am new to using this CMS . Is there any tutorial available that can guide me stepwise to be able to create a simple blog ?

[Beluga]

Did you go through these: http://wiki.processwire.com/index.php/Category:Long_Tutorials

Note that they are just one way out of many to do these things.

[pwired]

Maybe this can help

http://modules.processwire.com/modules/blog-profile/

https://github.com/jsanglier/Pw-News

or this

http://pivotx.net/

http://www.onlyfreescripts.com/script.php?ScriptID=613

[pixsie03]

Thanks!

I tried doing the basic website and planets tutorials on wikipedia but i m new in php and using this cms so i m very confused as to how to proceed through the same 

http://wiki.processwire.com/index.php/Basic_Website_Tutorial

http://wiki.processwire.com/index.php/Small_Project_Walkthrough

I tried using this links and understood that so far. 

[pwired]

With processwire you can make your own blog but you have to know well it's api

A fast solution would be pivotx http://pivotx.net

[pixsie03]

Thanks ... I wil try out !

[diogo]

The latest hot thing is ghost, tumblr is also great, of course.

But you should stick with PW, it's much more fun

[Joss]

But you should stick with PW, it's much more fun

Yep

One of the really good things about PW is that it is also a pretty good way of learning PHP!

If you follow the various tutorials people have put up, copying and pasting the code where you need to, you will soon start grasping some of the more commonly used parts of PHP in websites and get a better idea of what you need to research for those bits you don't know

Good luck

[JasonS]

I'm just like her, I know PHP to some extent but i'm having a hard time learning how to use the API within templates.

I've been through almost all the tutorials but for some reason, i'm still having trouble learning PW. 

If anyone can point me in the right direction i would gladly continue working on it. But i'm honestly tired of working with Drupal (too frustrating) and i love the simplicity of PW from what i see so far.

[Joss]

Hi Jason - I am currently writing a loooooonggggg tutorial for people like you, but it is a long way from being finished.

However, to get you started:

Your template file (as opposed to a template) is just html with some bits shoved in it. So the best way to get started is to create a template file called something.php and make sure it is inside the site/templates/ directory.

For the moment, dont worry about headers or footers, but just write a bit of very ordinary html.

Now, to get around you really need some navigation, but to get you started we will even forget about that.

In admin, go to setup > templates and create new. You will see your something.php listed. Click on it and save it.

Now, go to Pages, click on Home and click on new.

Call your new page, My Page (why not?) and select the template that you have created. Save it, then publish it.

Now, to to the front end of your website and in the address bar type yoursite.com/my-page/

And your page will come up - completely blank.

But it is a start!

Most of this you already know, but there is a good reason for reminding you - when you are lost, it is easier to start with the basics.

Now, open your template file something.php in your editor.

Somewhere in the body you need to tell the template file to use the fields that are in the associated template in the backend.

At the moment, you only have one field: title.

So, open a php statement:

<?php

and we then need to echo out the title:

$page - that says we want a field directly related to this page

-> tells the system that we are going to define something

title - that is the name of the field (not the label, but the actual name)

so ....

echo $page->title; 

and end the php with 

?>

The final thing can be written in one line

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

Save that and reload the page and you will see the title appear.

From this point on, basically EVERYTHING you do will use this workflow:

Field > Template > Page > Template file.

Now, admittedly it gets a bit more complicated after a while but the principle remains the same - in the template file (or in any file you are including into the template file) you simply retrieve the data you have in  the fields and you echo them out so you can see them.

Now, that is very, very basic - but that principle is core to the way you will work and once you have understood that, everything else is just variations on a theme!

[JasonS]

Thank you so much for the instructions Joss.

Yes the core fundamentals i know from the long tutorial and planet tutorial Ryan did.

I think the main problem right now is understanding how the api differs from standard API and the many way in which you can use it.

Right now i have been studying all morning how to get "markup-simple-navigation" module to work in an existing theme i'm converting from html but that in itself is giving me trouble but strangely enough when i use it in default PW installation in my machine, it works without a hitch. 

I'm seriously wondering if to start from "Blog Profile Module" and edit as i go long but there is so much i don't understand in the code of this profile. So i'm terrified to change a "dot". lol 

But i find the output i get from API is different. In some cases I use the foreach function and it works but in cases where i don't know the output or how to place the output into an array....I'm not sure how to manipulate the data i received from PW to allow me to have predictable output.

I probably talk all over my face just now, but i hope i didn't lose you in my journey.

[apeisa]

Jason -  just post your actual code examples, with results what you are excepting and what you are getting instead. I am sure you will understand and get forward after a little guidance from community.

Oh, and blog profile is very advanced, not a starter profile for sure.

[Joss]

Okay, not sure if this helps, but PW is sort of built on top of arrays - called wirearray

For your purposes, just about anything can end up in an array unless you tell it not to.

So, if you shove the children of a page into a variable:

$myarray = $page->children;

Then you have created an array - you can foreach through it to your hearts content!

If you have an images field, if you have set the max number of images to be anything other than "1" then you will have an array - when you set it to 1, you can treat it as if it is not.

When you go find() anything, you will end up with an array, even if you only have one thing in it.

apeisa is right - the blog profile is pretty advanced, mostly because Ryan neatens everything down to as short as possibly which makes it hard to follow.

If you have done my basic website tutorial on the wiki, and then moved onto the simple news system, however, that is pretty blog-like (if rather basic) and has lots of looping in it!

[JasonS]

Ok this is what i have so far ....

<!-- Navigation starts
  ================================================== -->
<nav id="nav-wrap" class="nav-wrap1 twelve columns">
	<div id="search-form">
					<form action="<?php echo $config->urls->root?>search/" method="get">
						<input type="text" class="search-text-box" id="search-box">
					</form>
				</div>
        <ul id="nav">
<?php
 
// load MarkupSimpleNavigation module
$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module

//Setting options for menu
$option = array( 
'show_root'  => true
);

// Render Menu
echo $treeMenu->render($options);
 
?>
 
 

     </ul>
      </nav>
      <!-- /nav-wrap -->

<!-- Navigation ends
  ================================================== -->

This is just the basic method to show "somerthing" but in my website, nothing shows for the menu, but if i use a default PW installation it works. I suspect it has to do with the li, ul list elements and order of classes which prevents it from showing up, for example if I remove id="nav", it shows up in the site(admittedly...badly) atleast i can see it to manipulate it. But when i put it back to make use of the CSS i was given it doesn't show anymore.

Here is the order of the html code structure from a static website i am trying to duplicate in PW using this module:

<ul id="nav">
          <li class="current"><a href="index.html">Home</a>
            <ul>
              <li class="current"><a href="index.html">Home 1 -  Index</a></li>
              <li><a href="home2.html">Home 2 - Classic</a></li>
              <li><a href="home3.html">Home 3 - Parallax</a></li>
			  <li><a href="home4.html">Home 4 - Video-bg</a></li>
              <li class="submenu"><a href="#">Headers</a>
                <ul>
                  <li><a href="topbar.html">Header + Topbar</a></li>
				  <li><a href="header2.html">Header 2</a></li>
                  <li><a href="header3.html">Header 3</a></li>
                  <li><a href="header4.html">Header 4</a></li>
                  <li><a href="header5.html">Header 5</a></li>
				  <li><a href="header6-menu-icon.html">Header 6 - Menu Icon</a></li>
				  <li><a href="header7.html">Header 7</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="#">Pages</a>
            <ul>
              <li><a href="services.html">Services</a></li>
              <li><a href="about.html">About us</a></li>
			  <li><a href="about-extended.html">About us - Extended</a></li>
			  <li><a href="about-me.html">About me</a></li>
			  <li><a href="process.html">Process</a></li>
              <li><a href="ourteam.html">Our team</a></li>
              <li><a href="sidebar-right.html">Right Side-Bar</a></li>
              <li><a href="sidebar-left.html">Left Side-Bar</a></li>
              <li><a href="faq.html">FAQ</a></li>
              <li><a href="contact.html">Contact</a></li>
              <li><a href="404.html">404 Not Found</a></li>
            </ul>
          </li>
          <li><a href="#">Features</a>
            <ul>
              <li class="submenu"><a href="#">Shop</a>
                <ul>
                  <li><a href="shop.html">Shop 1</a></li>
                  <li><a href="shop2.html">Shop 2</a></li>
                  <li><a href="product-item.html">Product</a></li>
                </ul>
              </li>
			  <li><a href="elements.html">Elements</a></li>
              <li><a href="icon-boxes.html">Icons Boxes</a></li>
			  <li><a href="icons.html">Icons</a></li>
              <li><a href="pricing.html">Pricing Tables</a></li>
			  <li><a href="gallery.html">Image Gallery</a></li>
              <li><a href="columns.html">Columns</a></li>
              <li><a href="timeline1.html">Timeline</a></li>
              <li><a href="left-nav-page.html">Left Navigation</a></li>
              <li class="submenu"><a href="#">Sub Menu</a>
                <ul>
                  <li><a href="#">Menu Item 01</a></li>
                  <li><a href="#">Menu Item 02</a></li>
                  <li><a href="#">Menu Item 03</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li><a href="blog.html">Blog</a>
            <ul>
              <li><a href="blog.html">Blog 1</a></li>
              <li><a href="blog-leftsidebar.html">Blog 1 - Left Sidebar</a></li>
              <li><a href="blog2.html">Blog 2</a></li>
              <li><a href="blog2-leftsidebar.html">Blog 2 - Left Sidebar</a></li>
              <li><a href="blog-bothsidebar.html">Blog - Both Sidebar</a></li>
              <li><a href="timeline1.html">Blog - Timeline</a></li>
              <li><a href="blog-single.html">Blog - Single Post</a></li>
            </ul>
          </li>
          <li><a href="portfolio.html">Work</a>
            <ul>
              <li><a href="portfolio.html">Portfolio</a></li>
              <li><a href="portfolio-pin.html">Portfolio Pinterest</a></li>
              <li><a href="timeline2.html">Portfolio Timeline</a></li>
              <li><a href="portfolio-item.html">Portfolio Item (Single)</a></li>
            </ul>
          </li>
		  <li><a href="blog.html">Mega menu</a>
					<ul class="mega">
					<div class="one_third">
						<h4 class="subtitle">Contact Form</h4>
						<form action="#" method="post" class="frmContact">
						<input name="txtName" type="text" class="txbx" value="Name">
						<input name="txtEmail" type="text" class="txbx" value="Email">
						<input name="txtSubject" type="text" class="txbx" value="Subject">
						<textarea name="txtText" class="txbx era"></textarea>
						<button name="" type="button" class="sendbtn btnSend">Send Message</button>
	
						</form>	</div>
					<div class="one_third">
						<h4 class="subtitle">Image and Text</h4>
						<img src="images/hpic1.jpg" alt=""><br>
						<h6><strong>Phasellus bibendum</strong></h6>
						<p>In non porttitor tortor. Donec vel egestas Morlem adipiscing mauris ultricies.</p>
						</div>
					<div class="one_third">
						<h4 class="subtitle">Icon Links</h4>
						<li><a href="#"><i class="icomoon-dashboard"></i> Proin porta molestie</a></li>
						<li><a href="#"><i class="icomoon-marker-2"></i> Praesent adipiscing</a></li>
						<li><a href="#"><i class="icomoon-cube4"></i> Faucibus euismod</a></li>
						<li><a href="#"><i class="icomoon-screen"></i> Integer nec ligula</a></li>
						<li><a href="#"><i class="icomoon-laptop"></i> Adipiscing timeline</a></li>
						<li><a href="#"><i class="icomoon-earth"></i> Bliquam erat Post</a></li>
						</div>
					</ul>
					</li>
        </ul>

However i suspect i need to manipulate using the more parameters in the $options variable to get the right li and ul placements.

and for the record, i'm not very good at CSS and designing my strong suit is functionality (probably why i was using Drupal before the hell of theming in it) .

CSS, HTML and javascripts i got from a theme i brought from ThemeForest which comes in handy and has the look and feel i am looking for (which is very important to end-users).

And Yes Joss, I noticed Ryan's code is pretty advance, i trust some day when i reach that level in PW I can make supermom sites, but right now i need a baby to mature...any help is welcomed...

Update:

I should add that the class="current" needs to move to the active item of the menu. And class="submenu" for those items in the menu which has children.

Basically if a "child" has "children", "child" should have class="submenu". In the past when i use 'has_children' parameter, i was not outputting the "submenu" in the render page, which confused me so of course i took it out and starting from the beginning again. ( which is why i have such basic code above)

[apeisa]

Your treemenu->render() should render whole pagetree. You do have published and not hidden pages on your site? If you think they could be hidden by css or js, check the actual markup of your page (ctrl + u, at least on firefox and chrome).

If you already have a markup that you want to implement one to one, then try this:

1. Create folder "markup" inside your site/templates/. Create file index.php inside that and copypaste the markup you have bought there.
2. Copy all css and js files of your design to /site/templates/styles/ and /site/templates/scripts/
3. Edit the /site/templates/markup/index.php and changes urls to your css and js. Ie. <link rel="stylesheet" type="text/css" href="<?= $config->urls->templates ?>styles/style.css" />
4. Edit your template files (say, basic-page.php and home.php for starters) and leave there only this:
   

   <?php
   // this will load your actual markup
   include($config->paths->templates . "markup/index.php");
   

5. Edit your /site/templates/markup/index.php and replace the body content with <?= $page->body ?> and page title with <?= $page->title ?>.. well you know this part already

Now you have nice clean html page with very little code in there. Of course you can start adding logic (like navigation) there, but if you follow my steps, then you will start from "final design" and then bring it live step by step.

[JasonS]

Yes apeisa, I've already replaced the URLs in CSS and HTML to match that which i am using. The Page is also Published Status. I can see the pages and the I've also changed the position and taken the time to go through all the CSS to ensure consistency.

The main road stopper i am having right now is the Navigation.

If i use this code i created to manually get pages:

<!-- Navigation starts
  ================================================== -->
<nav id="nav-wrap" class="nav-wrap1 twelve columns">
	<div id="search-form">
					<form action="<?php echo $config->urls->root?>search/" method="get">
						<input type="text" class="search-text-box" id="search-box">
					</form>
				</div>
        <ul id="nav">
          <li class="current"><a href="<?php echo $config->urls->root; ?>">Home</a>
	 	  <?php $homepage = $pages->get("/"); 
				$children = $homepage->children;
				$children->prepend($homepage); 
           foreach($homepage->children as $child){
				echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
				
                  //Commented out the below ( not sure if i'm doing this part right)
			//	foreach($child->children as $child){
				
			//	echo "<li><a href='{$child->url}'>{$child->title}</a></li>";
				
			//	}
				} 
       
	     ?>

1. It one pulls all the pages in the pagetree and output in the menu.

2. Also classes don't change dynamically ( thinking i have to use if statements to get this to work properly)

3. No dropdown menu for any submenus  

[JasonS]

If i use this code for the Navigation using the "Markup Simple Navigation" module:

        <ul id="nav">
<?php
 
// load MarkupSimpleNavigation module
$treeMenu = $modules->get("MarkupSimpleNavigation"); // load the module

//Setting options for menu
$option = array( 
'show_root'  => true,
'current_class' => 'current',
'has_children_class' => 'submenu',
'inner_tpl' => '<li>||</li>',
'collapsed' => true

);

// Render Menu
echo $treeMenu->render($options);
 
?>
 
 

     </ul>

 This is the output i get from the browser:

        <ul id="nav">
<ul><li class="current"><a href="/TheGentleManClub/about/">About</a></li><li class="has_children"><a href="/TheGentleManClub/grooming/">Grooming</a><ul><li><a href="/TheGentleManClub/grooming/haircut/">Haircut</a></li></ul></li><li><a href="/TheGentleManClub/contact/">Contact</a></li></ul> 
 

     </ul>

In this example, My current page is "About" page so the class shows correctly.

My entry with children, doesn't show class="submenu",  instead shows "has_children".

Oh and it is still not showing...not sure what i'm doing wrong in this...

[apeisa]

You have typing mistake, $option vs. $options

[JasonS]

Wow, amazing...simple little things really do make a difference. That worked and Menu Showed up Apeisa.

Now to figure out why the dropdown menu isn't showing... *long night ahead*