single-news.php 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263
  1. <?php
  2. /**
  3. * The template for displaying all single news posts
  4. *
  5. * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
  6. *
  7. * @package UIU_CSE
  8. */
  9. get_header(); ?>
  10. <?php while (have_posts()) : the_post(); ?>
  11. <main id="main" class="site-main" role="main">
  12. <div class="sections">
  13. <section id="news-single-header" class="container">
  14. <h5 class="page-title">News</h5>
  15. <!-- breadcrumb -->
  16. <nav class="breadcrumb" aria-label="breadcrumb">
  17. <ul>
  18. <li><a href="/">Home</a></li>
  19. <li><a href="/news/">News</a></li>
  20. </ul>
  21. </nav>
  22. <h1><?php echo get_the_title(); ?></h1>
  23. <span class="news-date single"><?php the_field('news_date'); ?></span>
  24. <hr>
  25. <div class="news-socials">
  26. <div>
  27. SHARE:
  28. <a href="#" class="social-icons"><i class="fa-brands fa-facebook-f"></i></a>
  29. <a href="#" class="social-icons"><i class="fa-brands fa-twitter"></i></a>
  30. <a href="#" class="social-icons"><i class="fa-brands fa-linkedin-in"></i></a>
  31. </div>
  32. </div>
  33. </section>
  34. <section id="news-single-header" class="container">
  35. <div class="news-single-body">
  36. <span class="author"> By <?php echo get_the_author_meta('display_name'); ?></span>
  37. <div class="article-cover-image">
  38. <img src="<?php echo get_the_post_thumbnail_url(); ?>" alt="">
  39. <span class="img-caption"> </span>
  40. </div>
  41. <div class="article">
  42. <?php echo get_the_content(); ?>
  43. </div>
  44. <hr>
  45. </div>
  46. </section>
  47. <section id="more-news" class="container">
  48. <h2>In Other News</h2>
  49. <div class="parent-grid">
  50. <?php
  51. $args = array(
  52. 'post_type' => 'news',
  53. 'posts_per_page' => 6,
  54. 'post__not_in' => array(get_the_ID()),
  55. 'orderby' => 'date',
  56. 'order' => 'DESC',
  57. );
  58. $query = new WP_Query($args);
  59. if ($query->have_posts()) :
  60. while ($query->have_posts()) :
  61. $query->the_post(); ?>
  62. <div class="stub grid-sub-item">
  63. <div class="stub-img-holder">
  64. <img class="stub-img" src="<?php echo get_the_post_thumbnail_url() ?>" alt="">
  65. </div>
  66. <span class="news-date"><?php the_field('news_date'); ?></span>
  67. <a href="<?php echo get_permalink(); ?>">
  68. <h3><?php echo get_the_title(); ?></h3>
  69. </a>
  70. </div>
  71. <?php
  72. endwhile;
  73. else :
  74. echo '<div class="no-post-found">No related news has found! </div>';
  75. endif; ?>
  76. </div>
  77. </section>
  78. </div>
  79. </main>
  80. <?php endwhile; ?>
  81. <style>
  82. #news-single-header h5 {
  83. margin-top: 30px;
  84. font-size: 30px;
  85. }
  86. #news-single-header h1 {
  87. color: #000 !important;
  88. font-family: "DM Serif Text", serif;
  89. }
  90. #news-single-header h5 {
  91. color: #2F4858;
  92. font-size: 34px;
  93. }
  94. #news-single-header .subtext {
  95. font-size: 22px !important;
  96. color: #2F4858 !important;
  97. }
  98. #news-single-header .news-date {
  99. display: block;
  100. color: #485680;
  101. font-weight: 800;
  102. font-size: 14px;
  103. }
  104. .news-socials {
  105. margin: 20px 20px !important;
  106. font-size: 26x;
  107. }
  108. .news-socials a {
  109. margin: 0px 15px;
  110. }
  111. .social-icons {
  112. color: #2F4858;
  113. }
  114. .news-single-body {
  115. max-width: 900px !important;
  116. margin: 30px auto !important;
  117. }
  118. .news-single-body p {
  119. font-size: 18px;
  120. color: #2F4858 !important;
  121. }
  122. .news-single-body h3 {
  123. font-family: "DM Serif Text", serif;
  124. font-size: 26px;
  125. color: #2F4858;
  126. }
  127. .news-single-body .author {
  128. display: block;
  129. color: rgba(0, 0, 0, 0.6431372549);
  130. margin: 20px auto !important;
  131. }
  132. .img-caption {
  133. font-size: 14px;
  134. color: #475481 !important;
  135. line-height: 14px;
  136. }
  137. #more-news {
  138. display: flex;
  139. flex-direction: column;
  140. }
  141. #more-news h2 {
  142. color: #000 !important;
  143. width: 100%;
  144. text-align: center;
  145. }
  146. #more-news .stub {
  147. margin: 30px auto;
  148. }
  149. #more-news .stub-img-holder {
  150. height: 300px;
  151. overflow: hidden;
  152. }
  153. #more-news .stub-img-holder img {
  154. height: 100%;
  155. width: 100%;
  156. -o-object-fit: cover;
  157. object-fit: cover;
  158. -o-object-position: center;
  159. object-position: center;
  160. }
  161. #more-news .news-date {
  162. display: block;
  163. color: #485680;
  164. font-weight: 800;
  165. font-size: 14px;
  166. margin: 10px 0px !important;
  167. }
  168. #more-news h3 {
  169. height: 50px;
  170. font-size: 18px;
  171. line-height: 22px;
  172. font-family: "Open Sans", sans-serif;
  173. color: #2F4858 !important;
  174. margin: 20px auto;
  175. }
  176. /*# sourceMappingURL=single-news.css.map */
  177. #news-single-header h5 {
  178. margin-top: 30px;
  179. margin-bottom: unset;
  180. font-size: 30px;
  181. }
  182. #news-single-header .breadcrumb {
  183. margin-top: 0 !important;
  184. margin-bottom: 1rem;
  185. }
  186. #news-single-header .breadcrumb li {
  187. padding-top: 10px;
  188. padding-bottom: 10px;
  189. font-size: 0.8rem;
  190. font-weight: 600;
  191. }
  192. #news-single-header h1 {
  193. color: #000 !important;
  194. font-family: "DM Serif Text", serif;
  195. margin-bottom: 1.5rem;
  196. }
  197. #news-single-header h5 {
  198. color: #2F4858;
  199. font-size: 34px;
  200. }
  201. #news-single-header .subtext {
  202. font-size: 22px !important;
  203. color: #2F4858 !important;
  204. }
  205. #news-single-header .news-date {
  206. display: block;
  207. color: #485680;
  208. font-weight: 800;
  209. font-size: 14px;
  210. }
  211. </style>
  212. <?php get_footer(); ?>