Jump to content

Learn & Launch project

MilenKo

By MilenKo,
in Getting Started

 Share

Recommended Posts

MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

I started reading this morning about the comments and how can that be implemented as in the theme I not only have the comments, however, they are even nested. My personal preference goes to non-nested comments as I like to follow up the chronology and with the nesting sometimes it goes a bit blurry or off the wagon, however, trying to stick to the theme would squeeze a bit more fun. From what I understood so far, I need to have a mod for the comments field as that is not a part of the core. Let me see what I can find and see what issues I might stumble across with that. To implement the comments seemed well described and should be achieved easily, however it was not much clear how to apply my personal styles to the comments as well as to the comment form. So this is where I expect the things to go cloudy but will work on it and see ;)

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Alright. As far as the reading and approach thinking still goes, I have noticed a small need of correction in the FAQ page where in the theme there are two blocks - Pre Sale and Customer FAQ. The change was not a big one, but as far as I used a static text for the title of the block, I decided to make even that dynamic.

To do that, I simply added two new fields to the FAQ template (faq_top_title & faq_bottom_title) and assigned them to the faq template. After that, I just added the values of the text I needed to appear on the page and replaced the existing text in the faq.php (template file) with a call to the vars: $page->faq_top_title as well as $page->faq_bottom_title calls.

After doing that, I am able to easily change the Title of the page (FAQ presently), the Headline text (A good descriptive SEO optimized text would be nice there), the top FAQ part title and the bottom FAQ part.

Once the theme is finished, as planned I will do my best to kick out most (if not all) of the theme settings to a new page and make the vars to appear from there. I don't know yet how good idea is that, however it looks to me more neat and easy to apply changes in 2-5 years from now on :)

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Hey everyone. Thanks to the cold Montreal weather I felt like being stuck at home so what could I do best in my spare time than to get back and learn something and work on my theme further.

Like the weather in Canada, I am changing my mind often sometimes, so I left the reading about the comments in ProcessWire to settle a bit and decided to work on the main page. I just had a word with the team last week and advised that very soon I will be ready to present my rough work for some team feedback.

As I expected, I had no big issues in presenting the Articles "categories" and their children (actual howtos) in the content block. What I had to do was to delete the repeating blocks and leave just one to play with. At first I was able replace the title of every block showing the child name in Articles page. After, I was able to add the link to view all the articles in the category. What was left was to pull up and print the names of the children of the "category pages". This got me a bit confused as it was my first foreach inside a foreach. I had to do a few trials and errors, however at the end I got a satisfying result. As of now, I have all (4 for now) child pages of Articles (categories) listed with the number of child pages in each one and a list of 4 pages from each category pointing to the howto-inner page. View all button points to a listing of all pages in the parent.

So far so good, however I noticed a little issue with the styling of the html where I have four blocks in the main content block where they are grouped by a div 2 by 2 in a row. So calling the code for one block 4 times made 3 of them to appear properly and the 4th to be out of the bottom row. As far as I set the Article template order to manuall dragging, moving the 4th one as first fixed the issue and now they appear normally. What I am in doubt is how come if I move the problematic block to appear first, it lines up with the rest of the blocks but if I move it as last - it goes out of the order. I am attaching the code so far and a screenshot of the images, so if anyone can enlight me would be perfect. In the future I might need to add a few more Article child pages (as categories) so if I don't do it properly, only god knows what is going to happen.

Here is the code for the home page:

Spoiler 

<?php include ('./includes/header.php'); ?>

		<div id="features" class="site-hero clearfix">
			<div class="container">

				<div class="features row">

				<?php foreach ($page->features as $featured):?>
					<div class="col-sm-4">
						<div class="banner-wrapper text-center">
							<span class="fa-stack fa-3x">
								<i class="fa fa-circle fa-stack-2x"></i>
								<i class="fa <?php echo $featured->fa_icon;?> fa-stack-1x fa-inverse"></i>
							</span>
							<h4 class="banner-title h3"><?php echo $featured->title;?></h4>
							<div class="banner-content">
								<p><?php echo $featured->body;?></p>
							</div>
						</div><!-- .banner-wrapper -->
					</div>
				<? endforeach;?>

				</div><!-- .features -->

			</div>
		</div><!-- .site-hero -->
		
		<div id="main" class="site-main clearfix">
			<div class="container">
	
				<div class="content-area">
					<div class="row">

						<div id="content" class="site-content col-md-9">
						
							
							<div class="row">

							<?php if($page->numChildren) {
									$result = $pages->get('/articles/')->children;		
										
									foreach($result as $child): ?>
								
								<div class="col-md-6">
									<section class="box-categories">
										<h1 class="section-title h4 clearfix">
											<i class="fa fa-folder-open-o fa-fw text-muted"></i>
											<small class="pull-right"><i class="fa fa-hdd-o fa-fw"></i> <?php echo $child->numChildren(); ?></small>
											<?php echo $child->title;?>
										</h1>
										<ul class="fa-ul">
											
										<?php foreach ($child->children("limit=4") as $howto): ?>

											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="<?php echo $howto->url; ?>"><?php echo $howto->title; ?></a></h3>
											</li>

										<?php endforeach; ?>

										</ul>
										<p class="more-link text-center"><a href="<?php echo $child->url; ?>" class="btn btn-custom btn-xs">View All</a></p>
									</section>
								</div>
							
									<?php endforeach;
								};?>
								
							</div>

							<section class="section">
								<div class="banner-wrapper banner-horizontal clearfix">
									<h4 class="banner-title h3">Need more support?</h4>
									<div class="banner-content">
										<p>If you did not found an answer, contact us for further help.</p>
									</div>
									<p><a href="#" class="btn btn-custom">Contact Now</a></p>
								</div>
							</section>

							<div class="row">

								<div class="col-md-6">
									<section id="section-lastest-responses" class="section">
										<h2 class="section-title h4 clearfix">Latest Responses</h2>
										<ul class="fa-ul">
											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">How Do I Download The Andoird App?</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 9 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Mobile Apps</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Can I Change My Username?</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 5 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Account Settings</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-picture-o fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Using Images</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 8 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Customization</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Using Javascript</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 8 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Customization</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-film fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Using Video</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 8 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Customization</a></span>
												</small>
											</li>
										</ul>
									</section><!-- #section-lastest-responses -->
								</div>

								<div class="col-md-6">
									<section id="section-lastest-articles" class="section">
										<h2 class="section-title h4 clearfix">Latest Articles</h2>
										<ul class="fa-ul">
											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Using Javascript</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 9 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Customization</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-picture-o fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Using Images</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 9 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Customization</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-film fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Using Video</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 9 hours ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Customization</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">Can I Change My Username?</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 2 days ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Account Settings</a></span>
												</small>
											</li>
											<li>
												<i class="fa-li fa fa-list-alt fa-fw text-muted"></i>
												<h3 class="h5"><a href="#">How Do I Download The Andoird App?</a></h3>
												<small class="meta text-muted">
													<span class="time"><i class="fa fa-clock-o fa-fw"></i> about 5 days ago</span>
													<span class="category"><i class="fa fa-folder-open-o fa-fw"></i> <a href="#">Mobile Apps</a></span>
												</small>
											</li>
										</ul>
									</section><!-- #section-lastest-articles -->
								</div>

							</div>
						</div><!-- #content -->

<?php include ('./includes/sidebar.php');?>

					</div>
				</div><!-- .content-area -->
	
			</div>
		</div><!-- #main -->
		
<?php include ('./includes/footer.php'); ?>

 

The first screenshot is the proper view.

CISCO-category-as-first.jpg

 

This one is with the same page just changing the order to last (4th)

CISCO-category-as-last.jpg

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

OK, playing a bit with the settings, if I decide to lower the limit of the child pages in every category to 1, then the blocks are aligned properly. Seems like it might be something related to the fact that some titles are longer than one line (45 characters) and that is pushing the next block away. That does not explain, however, why when I move the same category (Cisco) as first - it works fine with the same names and the limit of 4 as per the original styling.

Any ideas?

P.S. I decided to print the Child ID's and saw that the Software category was the first one I added. Having it moved to the top causes the blocks to move away. Any other combination works. At first I thought that it could be a special character somehow got into the title so thought to have the titles stripped however manually changing the titles of all 4 pages in Software did not help either. Something else is happening however not sure what.

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Tried to erase the whole Software category and recreate it. As of now, moving software around does not change the appearance and it is properly showing, however moving Networking started causing the same issue. It feels like if I set a limit of the title of the page, that would fix the things, however it might not be such a good idea to limit the title less than the SEO recommended max. limit.

As always, any shared knowledge is welcome.

Link to comment
Share on other sites
fbg13 Sr. Member

fbg13

Posted
Posted

It's because the cisco block has a smaller height than the software one, so the hardware block floats all the way to the left, followed by the networking block.

In the second case the software block in higher than the hardware and it prevents the networking block from floating all the way to the left and it gets stuck there leaving no space for the cisco block.

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

@fbg13 Thanks. This is what I thought too, however I am looking for ways to work this out. I was looking for some information regarding the best Title length approach and I found this:

Quote
Optimal Length for Search Engines

Google typically displays the first 50-60 characters of a title tag, or as many characters as will fit into a 512-pixel display. If you keep your titles under 55 characters, you can expect at least 95% of your titles to display properly. Keep in mind that search engines may choose to display a different title than what you provide in your HTML. Titles in search results may be rewritten to match your brand, the user query, or other considerations.

 

1

So as far as in my case 45 characters is sort of the recommended max, it might not be a bad idea to limit the title and avoid a super heavy URL sort of:

http://FQDN/articles/super-duper-heavy-long-title-to-describe-how-the-long-terminology-appear-in-text

For sure, nothing wrong with it, however as per the text above, Google would list the initial 60 chars max or what could fit in the 512-pixel display. So what would be the best approach if you were on my spot?

Link to comment
Share on other sites
fbg13 Sr. Member

fbg13

Posted
Posted

You could use masonry or make sure the titles don't take more than a row. You can do the later with css 

.title-container {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

As for google you can have longer titles, they will just not be displayed fully in search results. You can look at other sites and see how they handle it.

  • Like 1
Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Thanks for spotting the issue @fbg13 and for the advice. Masonry seems pretty cool to try for another project, however, I don't feel strong enough yet to implement it into the existing theme.

I tested the style you proposed by putting it inline at first place:

<style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><?php echo $child->numChildren(); ?></style>

but that hid the whole title. Then I started thinking that I can simply limit the output to 45 letters and then add ... at the end of the line if the title would be longer than the maximum characters so the case would be solved.

I remembered that for the news.php template I used a word limited to limit the body content (act as excerpt text) and I could have used that, however, if the title contains a long word, it might look ugly. So I decided to go with a simple substring function and strip out the text to 45 letters with adding at the end the ... Right now it looks and works just fine no matter where I move any block. I decided, however, that will add a title to the href in order to show the full title on mouse over. Doing so I get the best of two worlds and the case is simply solved.

Link to comment
Share on other sites
fbg13 Sr. Member

fbg13

Posted
Posted
26 minutes ago, MilenKo said:

<style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><?php echo $child->numChildren(); ?></style>

<div style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;"><?php echo $child->title; ?></div>

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

@fbg13 I tried that too, however, the blocks start to move around in very awkward order, so I went to a simpler (for me) solution that works fine so far. Thanks again for the sharing and efforts to help. I figure I can get back to the theme devs too, and ask for support but so far the styles are applied, if a title is longer than 45 characters, get cut with ... and the full title text is shown on mouse over, so it is easy to read. Moving forward now.

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

As far as I had the solution for the blocks moving around, I decided to make the category appearance dynamic as well. It was super easy now when I already had all the needed calls working. I am attaching the code of my home.php with the changes and the blocks title "fix" as well as the sidebar.php that contains the categories.

My goal now would be to finish the home page besides showing the latest comments. What is left is to add the fields for the support box (title/body text) and show them in the right spot as well as to pull up the latest X-news from the News.

Where I might have some issues would be the top tags, however, let's first finish with the rest and will deal with it too.

Home.php

Spoiler 

						<div id="sidebar" class="site-sidebar col-md-3">
							<div class="widget-area">
							
								<section id="section-banner" class="section">
									<div class="banner-wrapper text-center clearfix">
										<h3 class="banner-title text-danger h4">Support Policy</h3>
										<div class="banner-content">
											<p>Praesent neque nibh, vulputate id bibendum et, lacinia vel mi. Ut elementum nisi et congue facilisis. Praesent suscipit nulla eu lorem dictum, a ultricies orci pretium. </p>
										</div>
									</div>
								</section><!-- #section-banner -->

								<section id="section-categories" class="section">
									<h2 class="section-title h4 clearfix">Categories</h2>
									<ul class="nav nav-pills nav-stacked nav-categories">
									
									<?php if($page->numChildren) {
									$result = $pages->get('/articles/')->children;	//Array of the results - 1,2,3,4,5 etc.	
										
									foreach($result as $category): ?>									
									
									
										<li><a href="<?php echo $category->url;?>"><span class="badge pull-right"><?php echo $category->numChildren;?></span><?php echo $category->title;?></a></li>
									
									<?php endforeach;
									};?>
									
									</ul>
								</section><!-- #section-categories -->

								<section id="section-tags" class="section">
									<h2 class="section-title h4 clearfix">Tags</h2>
									<div class="tagcloud">
										<a href="#" class="btn btn-tag btn-xs">basic</a>
										<a href="#" class="btn btn-tag btn-xs">beginner</a>
										<a href="#" class="btn btn-tag btn-xs">blogging</a>
										<a href="#" class="btn btn-tag btn-xs">colour</a>
										<a href="#" class="btn btn-tag btn-xs">css</a>
										<a href="#" class="btn btn-tag btn-xs">date</a>
										<a href="#" class="btn btn-tag btn-xs">design</a>
										<a href="#" class="btn btn-tag btn-xs">files</a>
										<a href="#" class="btn btn-tag btn-xs">format</a>
										<a href="#" class="btn btn-tag btn-xs">header</a>
										<a href="#" class="btn btn-tag btn-xs">images</a>
										<a href="#" class="btn btn-tag btn-xs">plugins</a>
										<a href="#" class="btn btn-tag btn-xs">setting</a>
										<a href="#" class="btn btn-tag btn-xs">templates</a>
										<a href="#" class="btn btn-tag btn-xs">theme</a>
										<a href="#" class="btn btn-tag btn-xs">time</a>
										<a href="#" class="btn btn-tag btn-xs">videos</a>
										<a href="#" class="btn btn-tag btn-xs">website</a>
										<a href="#" class="btn btn-tag btn-xs">wordpress</a>
									</div>
								</section><!-- #section-tags -->

							</div>
						</div><!-- #sidebar -->

 

 
 

and sidebar.php

Spoiler 

						<div id="sidebar" class="site-sidebar col-md-3">
							<div class="widget-area">
							
								<section id="section-banner" class="section">
									<div class="banner-wrapper text-center clearfix">
										<h3 class="banner-title text-danger h4">Support Policy</h3>
										<div class="banner-content">
											<p>Praesent neque nibh, vulputate id bibendum et, lacinia vel mi. Ut elementum nisi et congue facilisis. Praesent suscipit nulla eu lorem dictum, a ultricies orci pretium. </p>
										</div>
									</div>
								</section><!-- #section-banner -->

								<section id="section-categories" class="section">
									<h2 class="section-title h4 clearfix">Categories</h2>
									<ul class="nav nav-pills nav-stacked nav-categories">
									
									<?php if($page->numChildren) {
									$result = $pages->get('/articles/')->children;	//Array of the results - 1,2,3,4,5 etc.	
										
									foreach($result as $category): ?>									
									
									
										<li><a href="<?php echo $category->url;?>"><span class="badge pull-right"><?php echo $category->numChildren;?></span><?php echo $category->title . $category->id;?></a></li>
									
									<?php endforeach;
									};?>
									
									</ul>
								</section><!-- #section-categories -->

								<section id="section-tags" class="section">
									<h2 class="section-title h4 clearfix">Tags</h2>
									<div class="tagcloud">
										<a href="#" class="btn btn-tag btn-xs">basic</a>
										<a href="#" class="btn btn-tag btn-xs">beginner</a>
										<a href="#" class="btn btn-tag btn-xs">blogging</a>
										<a href="#" class="btn btn-tag btn-xs">colour</a>
										<a href="#" class="btn btn-tag btn-xs">css</a>
										<a href="#" class="btn btn-tag btn-xs">date</a>
										<a href="#" class="btn btn-tag btn-xs">design</a>
										<a href="#" class="btn btn-tag btn-xs">files</a>
										<a href="#" class="btn btn-tag btn-xs">format</a>
										<a href="#" class="btn btn-tag btn-xs">header</a>
										<a href="#" class="btn btn-tag btn-xs">images</a>
										<a href="#" class="btn btn-tag btn-xs">plugins</a>
										<a href="#" class="btn btn-tag btn-xs">setting</a>
										<a href="#" class="btn btn-tag btn-xs">templates</a>
										<a href="#" class="btn btn-tag btn-xs">theme</a>
										<a href="#" class="btn btn-tag btn-xs">time</a>
										<a href="#" class="btn btn-tag btn-xs">videos</a>
										<a href="#" class="btn btn-tag btn-xs">website</a>
										<a href="#" class="btn btn-tag btn-xs">wordpress</a>
									</div>
								</section><!-- #section-tags -->

							</div>
						</div><!-- #sidebar -->

 

 
 

 

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Having a bit more time, I just added two additional fields to provide the Support block in the sidebar with a changeable title and text (sidebar_support_title & sidebar_support_text). Simply put, for the moment I assigned them to the home page template at the bottom in order Title & text.

In the sidebar.php added the code to call the two variables, assigned the text for both in the homepage and voila:

Spoiler 

						<div id="sidebar" class="site-sidebar col-md-3">
							<div class="widget-area">
							
								<section id="section-banner" class="section">
									<div class="banner-wrapper text-center clearfix">
										<h3 class="banner-title text-danger h4"><?php echo $pages->get('/')->sidebar_support_title; ?></h3>
										<div class="banner-content">
											<p><?php echo $pages->get('/')->sidebar_support_text; ?></p>
										</div>
									</div>
								</section><!-- #section-banner -->

								<section id="section-categories" class="section">
									<h2 class="section-title h4 clearfix">Categories</h2>
									<ul class="nav nav-pills nav-stacked nav-categories">
									
									<?php if($page->numChildren) {
									$result = $pages->get('/articles/')->children;	//Array of the results - 1,2,3,4,5 etc.	
										
									foreach($result as $category): ?>									
									
									
										<li><a href="<?php echo $category->url;?>"><span class="badge pull-right"><?php echo $category->numChildren;?></span><?php echo $category->title;?></a></li>
									
									<?php endforeach;
									};?>
									
									</ul>
								</section><!-- #section-categories -->

								<section id="section-tags" class="section">
									<h2 class="section-title h4 clearfix">Tags</h2>
									<div class="tagcloud">
										<a href="#" class="btn btn-tag btn-xs">basic</a>
										<a href="#" class="btn btn-tag btn-xs">beginner</a>
										<a href="#" class="btn btn-tag btn-xs">blogging</a>
										<a href="#" class="btn btn-tag btn-xs">colour</a>
										<a href="#" class="btn btn-tag btn-xs">css</a>
										<a href="#" class="btn btn-tag btn-xs">date</a>
										<a href="#" class="btn btn-tag btn-xs">design</a>
										<a href="#" class="btn btn-tag btn-xs">files</a>
										<a href="#" class="btn btn-tag btn-xs">format</a>
										<a href="#" class="btn btn-tag btn-xs">header</a>
										<a href="#" class="btn btn-tag btn-xs">images</a>
										<a href="#" class="btn btn-tag btn-xs">plugins</a>
										<a href="#" class="btn btn-tag btn-xs">setting</a>
										<a href="#" class="btn btn-tag btn-xs">templates</a>
										<a href="#" class="btn btn-tag btn-xs">theme</a>
										<a href="#" class="btn btn-tag btn-xs">time</a>
										<a href="#" class="btn btn-tag btn-xs">videos</a>
										<a href="#" class="btn btn-tag btn-xs">website</a>
										<a href="#" class="btn btn-tag btn-xs">wordpress</a>
									</div>
								</section><!-- #section-tags -->

							</div>
						</div><!-- #sidebar -->

 

 
 
 

What is left to finish the sidebar is the Keywords block that I might start checking in. To have it working I guess I should add another field: keywords and assign it to the appropriate templates (articles-inner, news-inner) and then somehow call the top used articles that would be hyperlinked to the search results or else. This would be the end of the today development as I have some other work related priorities and need to take care of them first.

P.S. I just noticed that I had an error in the sidebar.php as I was using a call $page->sidebar_support_text instead of getting the info from the home page. The file is corrected with the proper syntax: $pages->get('/')->sidebar_support_title; and $pages->get('/')->sidebar_support_text; Now any browsed page will show the title and content properly.

Link to comment
Share on other sites
AndZyk Hero Member

AndZyk

Posted
Posted

Hello @MilenKo,

I am glad you are making progress. Haven't read everything in this thread, but a here a few notes:

  • In HTML5 there is an aside element available, especially for sidebars like yours.
  • Using delayed output you could prepend for example a _init.php file in your site config containing often used variables. In the default site profile there is for example a variable for the homepage, so you can use this instead of $pages->get('/').
  • You could make your tags dynamic using a page field and store the tags in a dedicated page tree.

Regards, Andreas

  • Like 2
Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

@AndZyk , my friend, at work today I realized that I already had a variable defined in _init.php for $pages->get('/') and actually came back to here to update the code as I applied the changes already with some small fixes of the category block working from the home but not from the inner pages.

The Category listing (Articles->Child) is showing fine in Articles, Articles-inner, News, News-Inner php files, however, on FAQ it just shows the Categories title and no listings in the block. The strange thing is that every template file has an insert of the ./includes/sidebar.php so there should not be any difference. I opened the Articles compared all the settings with FAQ and see no difference that would restrict the page to properly show the categories.

I am attaching the FAQ code, maybe someone can spot the issue as I looked over it and seems like no clue so far.

faq.php

Spoiler 

<?php include('./includes/header.php');?>
		
<?php include ('./includes/breadcrumbs.php');?>
		
		<div id="main" class="site-main clearfix">
			<div class="container">
	
				<div class="content-area">
					<div class="row">

						<div id="content" class="site-content col-md-9">
						
							<article class="hentry">
								<header class="entry-header">
									<h1 class="entry-title"><?php echo $page->title;?></h1>
								</header><!-- .entry-header -->
								
								<div class="entry-content clearfix">
									<p class="lead"><?php echo $page->headline;?></p>

									<h3 class="text-danger"><?php echo $page->faq_top_title; ?></h3>
									<div id="accordion-1" class="panel-group accordion">
										
										<?php foreach ($page->faq_top as $topfaq): ?>
											<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 $topfaq->id; ?>"><?php echo $topfaq->title;?></a>
													</h4>
												</div><!-- .panel-heading -->
												<div id="accordion-1-<?php echo $topfaq->id; ?>" class="panel-collapse collapse">
													<div class="panel-body">
														<p><?php echo $topfaq->body;?></p>
													</div><!-- .panel-body -->
												</div>
											</div><!-- .panel -->
										<?php endforeach; ?>

									</div><!-- .accordion -->
									
									<h3 class="text-danger"><?php echo $page->faq_bottom_title; ?></h3>
									<div id="accordion-2" class="panel-group accordion">
										
										<?php foreach ($page->faq_bottom as $bottomfaq): ?>
											<div class="panel">
												<div class="panel-heading">
													<h4 class="panel-title">
														<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion-2" href="#accordion-2-<?php echo $bottomfaq->id; ?>"><?php echo $bottomfaq->title;?></a>
													</h4>
												</div><!-- .panel-heading -->
												<div id="accordion-2-<?php echo $bottomfaq->id; ?>" class="panel-collapse collapse">
													<div class="panel-body">
														<p><?php echo $bottomfaq->body;?></p>
													</div><!-- .panel-body -->
												</div>
											</div><!-- .panel -->
										<?php endforeach; ?>
										
								</div><!-- .entry-content -->
							</article><!-- .hentry -->
					
						</div><!-- #content -->

<?php include ('./includes/sidebar.php');?>

					</div>
				</div><!-- .content-area -->
	
			</div>
		</div><!-- #main -->
		
<?php include ('./includes/footer.php');?>

 

 

and here is the latest sidebar.php:

Spoiler 

						<div id="sidebar" class="site-sidebar col-md-3">
							<div class="widget-area">
							
								<section id="section-banner" class="section">
									<div class="banner-wrapper text-center clearfix">
										<h3 class="banner-title text-danger h4"><?php echo $pages->get('/')->sidebar_support_title; ?></h3>
										<div class="banner-content">
											<p><?php echo $home->sidebar_support_text; ?></p>
										</div>
									</div>
								</section><!-- #section-banner -->

								<section id="section-categories" class="section">
									<h2 class="section-title h4 clearfix">Categories</h2>
									<ul class="nav nav-pills nav-stacked nav-categories">
									
									<?php if($page->numChildren) {
									$result = $pages->get('/articles/')->children;	//Array of the results - 1,2,3,4,5 etc.	
										
									foreach($result as $category): ?>									
									
									
										<li><a href="<?php echo $category->url;?>"><span class="badge pull-right"><?php echo $category->numChildren;?></span><?php echo $category->title;?></a></li>
									
									<?php endforeach;
									};?>
									
									</ul>
								</section><!-- #section-categories -->

								<section id="section-tags" class="section">
									<h2 class="section-title h4 clearfix">Tags</h2>
									<div class="tagcloud">
										<a href="#" class="btn btn-tag btn-xs">basic</a>
										<a href="#" class="btn btn-tag btn-xs">beginner</a>
										<a href="#" class="btn btn-tag btn-xs">blogging</a>
										<a href="#" class="btn btn-tag btn-xs">colour</a>
										<a href="#" class="btn btn-tag btn-xs">css</a>
										<a href="#" class="btn btn-tag btn-xs">date</a>
										<a href="#" class="btn btn-tag btn-xs">design</a>
										<a href="#" class="btn btn-tag btn-xs">files</a>
										<a href="#" class="btn btn-tag btn-xs">format</a>
										<a href="#" class="btn btn-tag btn-xs">header</a>
										<a href="#" class="btn btn-tag btn-xs">images</a>
										<a href="#" class="btn btn-tag btn-xs">plugins</a>
										<a href="#" class="btn btn-tag btn-xs">setting</a>
										<a href="#" class="btn btn-tag btn-xs">templates</a>
										<a href="#" class="btn btn-tag btn-xs">theme</a>
										<a href="#" class="btn btn-tag btn-xs">time</a>
										<a href="#" class="btn btn-tag btn-xs">videos</a>
										<a href="#" class="btn btn-tag btn-xs">website</a>
										<a href="#" class="btn btn-tag btn-xs">wordpress</a>
									</div>
								</section><!-- #section-tags -->

							</div>
						</div><!-- #sidebar -->

 

 

The only thing I am questioning as a reason is the fact that the FAQ template is using Repeater to add/show the short FAQ instructions. Could that be the reason?

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Alright, found the issue with the sidebar.php - I was doing a check to $page->children where the FAQ had no children so the condition returned 0 and the categories were not showing. I should stop doing multiple things at the same time. I fixed the FAQ by changing the condition and now it is applied to all pages in the theme. Maybe I should improve that too at the end, but for the moment it works as intended.

Here is the file:

Spoiler 

						<div id="sidebar" class="site-sidebar col-md-3">
							<div class="widget-area">
							
								<section id="section-banner" class="section">
									<div class="banner-wrapper text-center clearfix">
										<h3 class="banner-title text-danger h4"><?php echo $pages->get('/')->sidebar_support_title; ?></h3>
										<div class="banner-content">
											<p><?php echo $home->sidebar_support_text; ?></p>
										</div>
									</div>
								</section><!-- #section-banner -->

								<section id="section-categories" class="section">
									<h2 class="section-title h4 clearfix">Categories</h2>
									<ul class="nav nav-pills nav-stacked nav-categories">
									
									<?php if($pages->get('/articles/')->numChildren) {
									$result = $pages->get('/articles/')->children;	//Array of the results - 1,2,3,4,5 etc.	
										
									foreach($result as $category): ?>									
									
									
										<li><a href="<?php echo $category->url;?>"><span class="badge pull-right"><?php echo $category->numChildren;?></span><?php echo $category->title;?></a></li>
									
									<?php endforeach;
									};?>
									
									</ul>
								</section><!-- #section-categories -->

								<section id="section-tags" class="section">
									<h2 class="section-title h4 clearfix">Tags</h2>
									<div class="tagcloud">
										<a href="#" class="btn btn-tag btn-xs">basic</a>
										<a href="#" class="btn btn-tag btn-xs">beginner</a>
										<a href="#" class="btn btn-tag btn-xs">blogging</a>
										<a href="#" class="btn btn-tag btn-xs">colour</a>
										<a href="#" class="btn btn-tag btn-xs">css</a>
										<a href="#" class="btn btn-tag btn-xs">date</a>
										<a href="#" class="btn btn-tag btn-xs">design</a>
										<a href="#" class="btn btn-tag btn-xs">files</a>
										<a href="#" class="btn btn-tag btn-xs">format</a>
										<a href="#" class="btn btn-tag btn-xs">header</a>
										<a href="#" class="btn btn-tag btn-xs">images</a>
										<a href="#" class="btn btn-tag btn-xs">plugins</a>
										<a href="#" class="btn btn-tag btn-xs">setting</a>
										<a href="#" class="btn btn-tag btn-xs">templates</a>
										<a href="#" class="btn btn-tag btn-xs">theme</a>
										<a href="#" class="btn btn-tag btn-xs">time</a>
										<a href="#" class="btn btn-tag btn-xs">videos</a>
										<a href="#" class="btn btn-tag btn-xs">website</a>
										<a href="#" class="btn btn-tag btn-xs">wordpress</a>
									</div>
								</section><!-- #section-tags -->

							</div>
						</div><!-- #sidebar -->

 

 

I think the next step would be to do the latest news block in the footer as that seems to be easy and straight forward. Once done will move to the tags block where I read today that is pretty elegant and organized through Pages type. Will have to review the blog profile and some posts I marked for reading and see how would that go. Also, I am still reading about the comments as I will need to style the reply form as well as the appearance showing the nested comments eventually if I am able to.

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

OK, Before going to bed I decided to take my ProcessWire pill and finished doing the Latest News block in the footer. So far I did not bother with the order as there will be tons of fine tunings etc. when the basic functionality is achieved but the block works as it should, so the rest would be to get to the admin and change the template sort options.

Here is the footer code responsible for the block:

Spoiler 

					<div class="col-md-4">
						<div class="widget-area">
							<section id="section-latest-news" class="section">
								<h2 class="section-title h4 clearfix">Latest News</h2>
								<ul class="media-list">

								<?php if($pages->get('/articles/')->numChildren) {
									$result = $pages->get('/news/')->children("limit=3");
									foreach($result as $news): 
									$thumb = $news->image->first->size(50,50);?>
								
									<li class="media">
										<a class="pull-left" href="<?php echo $news->url;?>"><img src="<?=$thumb->url;?>" alt="<?=$news->image->first->description;?>" width="50" height="50" class="media-object" /></a>
										<div class="media-body">
											<h4 class="media-heading h5"><a href="<?php echo $news->url;?>"><?php echo $news->title;?></a></h4>
											<small class="text-muted"><i class="fa fa-calendar-o fa-fw"></i> October 22, 2013</small>
										</div>
									</li>
								
									<?php endforeach;
								};?>

 

 

Again, if you spot something strange, or that can be improved, speak freely and you will be heard ;) That is it from me for today as I have to start dealing with job-related stuff early in the morning and there is no better advisor than the good old fashioned long hours sleep :)

Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Hey, everyone.

As far as NowKnow project is about to be finished soon and presented to the team, I decided that it would be great to invite my 12 years old daughter to work with me on another theme which I found and am willing to share the transitioning from pure mobile friendly HTML to PW theme. This time I chose a theme that has a few different contents in it but should be pretty simple once the bits and pieces of NowKnow are in place. Once you try to do a theme, the rest is easy and you are actually starting to improve the code -> enjoy the work.

As far as my daughter have some basic HTML & Jquery coding skills, it is not yet clear who will be the student ;) What is more important is to provide both of us some creative time and to be able to share the result (even if it might need some polishing etc.)

As a theme, I selected a theme from ShapeBootstrap.net called Corlate. The source is absolutely free so feel free to grab it if needed and assist in the development with what you can.

Unfortunately, I can't tell exactly when will we be starting as I still need to implement tags/keywords, comments and eventually add a possibility to upload files other than images as it would be beneficial for the team to be able to attach any already premade files into the new site. As far as my important job tasks are almost complete and I will have some more spare time after work, we should start soon.

Should you think that there is a more interesting theme to work on (with more advanced features etc.) that is free to use and share with the rest, feel free to let me know and we will see what can be done ;)

  • Like 2
Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

@szabesz by separate tutorial you mean to launch a new topic to distinguish from Launch&Learn? If you think this is a better idea, I don't have issues with that ;)

This morning I read about the tags and am already aware how to do it using PageAutocomplet so it is just a matter of time to put the code in. I find the idea behind tags added as child pages to allow all the freedom of usage via API (and the simplicity for a newbie to finish the job). It is true that this would  require an additional core module to be installed, however, knowing the developers If the functionality, I have no issues using it :) Let's see how would that goes as after the tags comes the turn to the comments. The only thing to play with would be to put the tag cloud on the main page containing X-amount of tags. I guess, that it can be done through the page sorting, but will see about that...

  • Like 1
Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted
2 minutes ago, MilenKo said:

by separate tutorial you mean to launch a new topic to distinguish from Launch&Learn?

Yes and no :P Maybe this time you could keep it a bit more organized like this 4 part tutorial: http://blog.mauriziobonani.com/processwire-basic-website-workflow-part-1/ as opposed to the journal style of this thread. If you take notes first and later on write the parts of a series one-by-one, then it can be more "tutorial like".

  • Like 3
Link to comment
Share on other sites
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

For sure. This time the theme development was mixed with "stolen 5 minutes spare time" and the excitement of being able to achieve it but I will be concentrating more on the technical part next time especially after I have done the "long version" and will be having some support that would need more guidance at the beginning.

P.S. Mauriziobonami workflow is really cool so I would give it a try and see some additional ideas and eventually improve the my coding.

  • Like 1
Link to comment
Share on other sites
  • 2 weeks later...
MilenKo Sr. Member

MilenKo

Posted
  • Author
Posted

Hello, again fellas.

I was away for some time to concentrate on personal stuff, so here I am back. Today I was able to add the keywords/tags functionality using pages and it works like a charm to show them on every page they are added now. What I am looking now is to show a small list of top used tags. So does anyone of you have an idea how that can be accomplished as I searched the Internet, the forums here and a few demo profiles but am still unable to figure that out?

Link to comment
Share on other sites
szabesz Hero Member

szabesz

Posted
Posted (edited)
4 hours ago, MilenKo said:

top used tags

of what subject matter? Words/expressions used as tags depend on the context in which they are used, that is why normally none of them is provided by default and it is the author(s) of the articles who is responsible to come up with useful ones. And this is the hardest part of tagging, because doing it right requires thinking carefully ahead of time as much as possible.

Sites are mainly organized into topics/categories via the menu system and normally one should not use a topic for tags which is already used as part of any of the menus. One needs to figure out the most important topics first, then articles can be grouped by those tags. Say we have a school's website, tags can be: competitions, charity, summer camps, state, regional, city, etc... It all depends what one normally writes about.

I hope I understood your question correctly :) 

Edited by szabesz
As it turns out, I did not understand it. Sorry for the off topic reply...
  • Like 1
Link to comment
Share on other sites
Robin S Hero Member

Robin S

Posted
Posted
4 hours ago, MilenKo said:

Today I was able to add the keywords/tags functionality using pages and it works like a charm to show them on every page they are added now. What I am looking now is to show a small list of top used tags.

There is no built-in method to do this efficiently in PW - to use normal selector queries you would need to iterate over all tag pages, for each tag counting the pages that have that tag selected, then sorting by count.

This is one of the things that prompted the Connect Page Fields module :)

 

  • 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
 Share
Go to topic listing
×
×
  • Create New...