We form a page of one work in the portfolio - a lesson 29

by Nikolaenko Maxim · Published September 5, 2015 · Updated August 8, 2018

Today we'll talk about, how to make a separate page for one of the works in the portfolio, as the work may have a description. Besides, you can always use the template created in this lesson for further refinement.

To begin with, we need to slightly modify our grid and allow the user to switch to displaying the full view of the work.. Go to file archive-my_works.php and add the link code:

<a href=”‘.get_permalink($item->ID).’” class=”text-title”>’.$item->post_title.'</a>

Hollow code listing:

											<div class="portfolio '.$dataCat.'" data-cat="'.$dataCat.'">
												<div class="portfolio-wrapper">
												'.$thymbUrlThumbnail.' 
													<div class="label">
														<div class="label-text">
															<a href="'.get_permalink($item->ID).'" class="text-title">'.$item->post_title.'</a>
															<span class="text-category">'.$dataCatComma.'</span>
														</div>
														<div class="label-bg"></div>
													</div>
												</div>
											</div>

'.$thymbUrlThumbnail.'

<a href="'.get_permalink($item->ID).'" class="text-title">'.$item->post_title.'</a>

<span class="text-category">'.$dataCatComma.'</span>

</div>

</div>

Function get_permalink($item->ID) inserted a link to a separate portfolio type post with ID, which is substituted in the record output loop. Here is what the link looks like:

Ссылка на отдельную работу в портфолио

To design the page of one work, we need to create a new file for the template and name it single-my_works.php. I made my template based on the previous template tmp-twocolumn.php. File single-my_works.php I rebuilt it quite thoroughly and organized it into one column. I offer you download my file, the changes that were made in the file we have already gone through before, so I suggest just copying the code from my template single-my_works.php в yours for further study.

It is important to see how the thumbnail image output is organized in full size.

<?php if ( has_post_thumbnail() ) { ?>  
													<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );
													$url = $thumb['0']; ?>
													<img src="<?php echo $url; ?>" alt="" /> 
										<? }  ?>

<?php if ( has_post_thumbnail() ) { ?>

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' );

$url = $thumb['0']; ?>

<? } ?>

I did some more styling in the css/style.css file to make our template look passable.. Let's add a new class.

.portfolio-single-img{
	float: left;
	margin-right: 20px;
	margin-bottom: 20px;
	border: 1px #8F8F8F solid;
	padding: 3px;
}

.portfolio-single-img{

float: left;

margin-right: 20px;

margin-bottom: 20px;

border: 1px #8F8F8F solid;

padding: 3px;

}

Theme files for this lesson

Online tutoring services. List of courses I teach

Basic web design course;
Site layout;
General course on CMS WordPress and continuation of the course on template development;
Website development in PHP.