Featured Post List Code Genesis Child Part 6 - Genesis Framework

Through 5 tutorials you have a blog using Genesis Child Themes created by yourself. It's amazing, isn't it, news blog is light, optimizes code, loads extremely fast.
Want your website to be more beautiful and beautiful like news sites? This article is for you. Show featured posts Featured Post you want with the layouts you create.

Featured Posts

Featured Post List On Home

In this article we will guide and show you the code to display the featured article with a grid layout. You need skills css to create as many layouts as you want.
To start creating your own functionality, go to your Child themes Folder and create the Floder “ lib "Is horizontal to the file Function.php. In the Folder " lib "Create file named featured-posts.php That's it for the preparation stage, next follow the steps below.

Function.php file

Copy & pate the code below into the file function.php Let the child theme call featured-posts.php file

 // Add Featured Posts List. include_once( get_stylesheet_directory() . '/lib/featured-posts.php' ); 

Featured-posts.php file

Copy & pate the code below into the file featured-posts.php to create the Featured Featured Post List and include it in your blog's homepage.

 
the_post(); 				$categories = get_the_category(); 				?>	
 						
 						
name );?>
 						
 						
 						
 					
 				 					
 			
 '' 	); 	$ol_flash = '';  /* Functions */ function posts_options_page() { 	global $ol_flash, $posts_settings, $_POST, $wp_rewrite; 	if (isset($_POST('posts_id'))) { 		$posts_settings('posts_id') = $_POST('posts_id'); 		update_option('posts_settings',$posts_settings); 		$ol_flash = __('Your Featured List has been saved.', 'genesis-child'); 	} 	if ($ol_flash != '') echo '
' . $ol_flash . '
'; 	?>  	
 		
 		
 			
 			
 				 			
 		
 	
 	 
Style.css file
 
In this article we give you css sample, this css is not responsive. You need css skills to create responsive and create many other layouts. Copy & pate the code below into file style.css
 
 /* Featured Post List */  .featured-posts {     float: left; 	box-shadow: inset 0 0 0 1500px #2222225e;     -webkit-filter: initial;     filter: initial;     -webkit-transform: initial;     -khtml-transform: initial;     -moz-transform: initial;     -ms-transform: initial;     -o-transform: initial;     transform: initial;     -webkit-transition: all 0.2000s linear;     transition: all 0.2000s linear; 	position: relative;     background-position: 50% 50%; 	background-size: cover; }  .featured-posts:hover {     -webkit-filter: initial;     filter: initial;     -webkit-transform: initial;     -khtml-transform: initial;     -moz-transform: initial;     -ms-transform: initial;     -o-transform: initial;     transform: initial;     -webkit-transition: all 0.2000s linear;     transition: all 0.2000s linear; 	box-shadow:inset 0 0 0 2000px #2222222e; }  .featured-posts.list-0 {     width: 50%; 	height: 462px; 	border-right: 5px solid #fff; }  .featured-posts.list-1 {     width: 50%;     height: 231px; 	border-bottom: 5px solid #fff; }  .featured-posts.list-2 {     border-right: 5px solid #fff; }  .featured-posts.list-2, .featured-posts.list-3 {     width: 25%;     height: 231px; }  .featured-posts.list-0 .featured-posts.list-2, .featured-posts.list-3 { 	margin-bottom: 40px; }  .featured-posts-content {     position: absolute;     top: 20px;     left: 25px;     right: 25px;     max-height: 95px;     z-index: 1;     font-size: 14px; }  .featured-posts-cat a {     background-color: #fe2e2e;     color: #fff;     font-size: 10px;     font-size: 1rem;     font-weight: 300;     padding: 5px 10px;     text-transform: uppercase;     border-radius: 3px; }  .featured-posts h2 a, .featured-posts-time {     color: #fff; 	text-transform: capitalize;     font-family: "Roboto",Arial,sans-serif; 	text-shadow: 1px 1px 3px rgba(0,0,0,.2); }  .featured-posts h2 a:hover, .featured-posts-time:hover {     color: #fff;     padding-left: 10px;     border-left: 5px solid red }  .featured-posts h2 a {     font-size: 16px; }  .list-0 h2 a, .list-1 h2 a {     font-size: 24px;     line-height: 30px; } 
 
Use
 
After the steps are completed you can install the articles shown in Option Featured Post List. Note You need to get 4 ID of 4 posts with this sample layout.
 
 
Featured Posts Option
 
Epilogue
 
That's it then, you have a beautiful news blog, no plugins, no fussy, optimal code. If you take a look at the other tutorials on this website, you'll find many other tutorials you can make for your blog.
 
I hope you find this guide helpful. If so, consider sharing it with your audience!
 

 		
 ->