uiu-sobe/single-news.php

<?php

/**
 * The template for displaying all single news posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
 *
 * @package UIU_DEPARTMENTAL
 */

get_header(); ?>
<?php while (have_posts()) : the_post(); ?>



	<main id="main" class="site-main" role="main">

		<div class="sections">

			<section id="news-single-header" class="container">
				<h5 class="page-title">News</h5>
				<!-- breadcrumb -->
				<nav class="breadcrumb" aria-label="breadcrumb">
					<ul>
						<li><a href="/">Home</a></li>
						<li><a href="/news/">News</a></li>
					</ul>
				</nav>
				<h1><?php echo get_the_title(); ?></h1>
				<span class="news-date single"><?php the_field('news_date'); ?></span>

				<hr>
				<div class="news-socials">
					<div>
						SHARE:
						<a href="#" class="social-icons"><i class="fa-brands fa-facebook-f"></i></a>
						<a href="#" class="social-icons"><i class="fa-brands fa-twitter"></i></a>
						<a href="#" class="social-icons"><i class="fa-brands fa-linkedin-in"></i></a>
					</div>
				</div>
			</section>

			<section id="news-single-header" class="container">
				<div class="news-single-body">
					<span class="author"> By <?php echo get_the_author_meta('display_name'); ?></span>
					<div class="article-cover-image">
						<img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">

						<span class="img-caption"> </span>
					</div>
					<div class="article">
						<?php echo get_the_content(); ?>
					</div>
					<hr>
				</div>

			</section>


			<section id="more-news" class="container">
				<h2>In Other News</h2>
				<div class="parent-grid">


					<?php
					$args = array(
						'post_type'      => 'news',
						'posts_per_page' => 6,
						'post__not_in' => array(get_the_ID()),
						'orderby'        => 'date',
						'order'          => 'DESC',
					);

					$query = new WP_Query($args);

					if ($query->have_posts()) :
						while ($query->have_posts()) :
							$query->the_post(); ?>

							<div class="stub grid-sub-item">
								<div class="stub-img-holder">
									<img class="stub-img" src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
								</div>
								<span class="news-date"><?php the_field('news_date'); ?></span>

								<a href="<?php echo get_permalink(); ?>">
									<h3><?php echo get_the_title(); ?></h3>
								</a>
							</div>


					<?php
						endwhile;
					else :
						echo '<div class="no-post-found">No related news has found! </div>';
					endif; ?>


				</div>
			</section>
		</div>
	</main>

<?php endwhile; ?>
<style>
	#news-single-header h5 {
		margin-top: 30px;
		font-size: 30px;
	}

	#news-single-header h1 {
		color: #000 !important;
		font-family: "DM Serif Text", serif;
	}

	#news-single-header h5 {
		color: #2F4858;
		font-size: 34px;
	}

	#news-single-header .subtext {
		font-size: 22px !important;
		color: #2F4858 !important;
	}

	#news-single-header .news-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
	}

	.news-socials {
		margin: 20px 20px !important;
		font-size: 26x;
	}

	.news-socials a {
		margin: 0px 15px;
	}

	.social-icons {
		color: #2F4858;
	}

	.news-single-body {
		max-width: 900px !important;
		margin: 30px auto !important;
	}

	.news-single-body p {
		font-size: 18px;
		color: #2F4858 !important;
	}

	.news-single-body h3 {
		font-family: "DM Serif Text", serif;
		font-size: 26px;
		color: #2F4858;
	}

	.news-single-body .author {
		display: block;
		color: rgba(0, 0, 0, 0.6431372549);
		margin: 20px auto !important;
	}

	.img-caption {
		font-size: 14px;
		color: #475481 !important;
		line-height: 14px;
	}

	#more-news {
		display: flex;
		flex-direction: column;
	}

	#more-news h2 {
		color: #000 !important;
		width: 100%;
		text-align: center;
	}

	#more-news .stub {
		margin: 30px auto;
	}

	#more-news .stub-img-holder {
		height: 300px;
		overflow: hidden;
	}

	#more-news .stub-img-holder img {
		height: 100%;
		width: 100%;
		-o-object-fit: cover;
		object-fit: cover;
		-o-object-position: center;
		object-position: center;
	}

	#more-news .news-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
		margin: 10px 0px !important;
	}

	#more-news h3 {
		height: 50px;
		font-size: 18px;
		line-height: 22px;
		font-family: "Open Sans", sans-serif;
		color: #2F4858 !important;
		margin: 20px auto;
	}

	/*# sourceMappingURL=single-news.css.map */

	#news-single-header h5 {
		margin-top: 30px;
		margin-bottom: unset;
		font-size: 30px;
	}

	#news-single-header .breadcrumb {
		margin-top: 0 !important;
		margin-bottom: 1rem;
	}

	#news-single-header .breadcrumb li {
		padding-top: 10px;
		padding-bottom: 10px;
		font-size: 0.8rem;
		font-weight: 600;
	}

	#news-single-header h1 {
		color: #000 !important;
		font-family: "DM Serif Text", serif;
		margin-bottom: 1.5rem;
	}

	#news-single-header h5 {
		color: #2F4858;
		font-size: 34px;
	}

	#news-single-header .subtext {
		font-size: 22px !important;
		color: #2F4858 !important;
	}

	#news-single-header .news-date {
		display: block;
		color: #485680;
		font-weight: 800;
		font-size: 14px;
	}
</style>
<?php get_footer(); ?>