Custom Layouts

There are a number of hooks available for creating a custom layouts of news stories. These include:

• ucf_news_display_layoutslug_before
• ucf_news_display_layoutslug_title
• ucf_news_display_layoutslug
• ucf_news_display_layoutslug_after

Each hook is dynamically called depending on the slug of the layout. So the 'classic' layout hooks would all start with ucf_news_display_classic.

ucf_news_display_layoutslug_before

This hook is responsible for the markup immediately before the title. It is recommended that any wrapper divs or content that needs to be above the title be placed here.

Parameters

$items: Array | $title: String | $display_type: String

Example

if ( ! function_exists( 'ucf_news_display_classic_before' ) ) {
	function ucf_news_display_classic_before( $items, $title, $display_type ) {
		ob_start();
	?>
		<div class="ucf-news classic">
	<?php
		echo ob_get_clean();
	}

	add_action( 'ucf_news_display_classic_before', 'ucf_news_display_classic_before', 10, 3 );
}

---

ucf_news_display_layoutslug_title

This hook is responsible for displaying the title. Logic for displaying the title differently (e.g. using the pre-formatted widget title) should be handled here.

Parameters

$items: Array | $title: String | $display_type: String

Example

if ( ! function_exists( 'ucf_news_display_classic_title' ) ) {
	function ucf_news_display_classic_title( $item, $title, $display_type) {
		$formatted_title = $title;

		switch( $display_type ) {
			case 'widget':
				break;
			case 'default':
			default:
				$formatted_title = '<h2 class="ucf-news-title">' . $title . '</h2>';
				break;
		}

		echo $formatted_title;
	}

	add_action( 'ucf_news_display_classic_title', 'ucf_news_display_classic_title', 10, 3 );
}

---

ucf_news_display_layoutslug

This function is responsible for displaying the news items themselves. This is where the primary display loop should happen.

Parameters

$items: Array | $title: String | $display_type: String

Example

if ( ! function_exists( 'ucf_news_display_classic' ) ) {
	function ucf_news_display_classic( $items, $title, $display_type ) {
		$fallback_image = UCF_News_Common::get_fallback_image();
		ob_start();
	?>
		<div class="ucf-news-items">
	<?php
		foreach( $items as $item ) :
	?>
			<div class="ucf-news-item">
			<?php if ( $item->featured_media !== 0 || $fallback_image ) :
				if ( $item->featured_media == 0 ) {
					$image_url = $fallback_image;
				}  else {
					$image = $item->_embedded->{'wp:featuredmedia'}[0];
					$image_url = $image->media_details->sizes->thumbnail->source_url;
				}

				if ( empty( $image_url ) ) {
					$image_url = $fallback_image;
				}
			?>
				<div class="ucf-news-thumbnail">
					<img class="ucf-news-thumbnail-image" src="<?php echo $image_url; ?>">
				</div>
			<?php endif; ?>
				<div class="ucf-news-item-title">
					<a href="<?php echo $item->link; ?>">
						<?php echo $item->title->rendered; ?>
					</a>
				</div>
			</div>
	<?php
		endforeach;

		echo ob_get_clean();
	}

	add_action( 'ucf_news_display_classic', 'ucf_news_display_classic', 10, 3 );
}

---

ucf_news_display_layoutslug_after

This hook is responsible for displaying any markup after the news stories. Use this to close out divs opened up in the ucf_news_display_layoutslug_before function.

Parameters

$items: Array | $title: String | $display_type: String

Example

if ( ! function_exists( 'ucf_news_display_classic_after' ) ) {
	function ucf_news_display_classic_after( $items, $title, $display_type ) {
		ob_start();
	?>
		</div>
	<?php
		echo ob_get_clean();
	}

	add_action( 'ucf_news_display_classic_after', 'ucf_news_display_classic_after', 10, 3 );
}

ucf_news_get_layouts

This hook is responsible for adding the layout to the array of registered layouts. This array is used to populate the dropdown list in the widget.

Parameters

$layouts: Array

Example

if ( ! function_exists( 'add_classic_layout' ) ) {
	function add_classic_layout( $layouts ) {
		$layouts['classic'] = 'Classic Layout';
		return $layouts;
	}

	add_action( 'ucf_news_get_layouts', 'add_classic_layout', 10, 1 );
}