add: single news

css/theme-styles.css

@@ -1603,4 +1603,17 @@ header.entry-header {
 
 .desc-block p {
   margin-left: 0!important;
+}
+
+
+.article-cover-image {
+  margin-bottom: 45px;
+}
+
+.article-cover-image img{
+  width: 100%;
+}
+
+.article {
+  margin-bottom: 45px;
 }

inc/acf-json/group_642b681749965.json

@@ -7,7 +7,7 @@
             "label": "News Date",
             "name": "news_date",
             "aria-label": "",
-            "type": "date_time_picker",
+            "type": "date_picker",
             "instructions": "For the date picker, click on the input field.",
             "required": 0,
             "conditional_logic": 0,
@@ -16,9 +16,9 @@
                 "class": "",
                 "id": ""
             },
-            "display_format": "F j, Y g:i a",
-            "return_format": "F j, Y g:i a",
-            "first_day": 0
+            "display_format": "F j, Y",
+            "return_format": "F j, Y",
+            "first_day": 1
         }
     ],
     "location": [
@@ -39,5 +39,5 @@
     "active": true,
     "description": "",
     "show_in_rest": 0,
-    "modified": 1680619602
+    "modified": 1680662291
 }

inc/custom-post-type.php

@@ -349,7 +349,7 @@ function uiu_cpt_news()
         'label'                 => 'News',
         'description'           => 'News of Department of CSE',
         'labels'                => $labels,
-        'supports'              => array('title', 'editor', 'thumbnail', 'revisions'),
+        'supports'              => array('title', 'editor', 'thumbnail', 'author', 'excerpt', 'revisions'),
         // 'taxonomies'            => array('category', 'post_tag'),
         'hierarchical'          => false,
         'public'                => true,

js/theme-settings.js

@@ -134,55 +134,59 @@ function closeNav() {
   document.getElementById("myNav").style.height = "0%";
 }
 
+
 //profile
 
-window.addEventListener("resize", showSidebarOptions);
+window.addEventListener("resize", showSidebarOptions)
+
+const biosTitle = document.querySelectorAll('h2.m-text')
+const list = document.querySelector('ul.profile-choices')
+const bios = document.querySelectorAll('.desc-block')
 
-const biosTitle = document.querySelectorAll("h2.m-text");
-const list = document.querySelector("ul.profile-choices");
-const bios = document.querySelectorAll(".desc-block");
 
-if (window.innerWidth < 600) {
-  bios.forEach((el) => el.classList.remove(".desc-block-hidden"));
-} else {
+if(window.innerWidth < 600) {
+  bios.forEach( el => el.classList.remove('.desc-block-hidden'))
+}
+else {
   biosTitle.forEach((el, index) => {
-    console.log(el.textContent);
-    let text =
-      '<li onclick="displaydetails(' +
-      index +
-      ')"><a >' +
-      el.textContent +
-      "</a></li>";
-    list.insertAdjacentHTML("beforeend", text);
-  });
+    console.log(el.textContent)
+    let text = '<li onclick="displaydetails('+ index +')"><a >' + el.textContent + '</a></li>'
+    list.insertAdjacentHTML("beforeend", text )
+  })
+
+  bios.forEach(el => el.classList.add('desc-block-hidden'))
+  bios[0].classList.remove('desc-block-hidden')
 
-  bios.forEach((el) => el.classList.add("desc-block-hidden"));
-  bios[0].classList.remove("desc-block-hidden");
+  let listItem = document.querySelectorAll('ul.profile-choices>li')
+  listItem[0].classList.add('desc-active')
 
-  let listItem = document.querySelectorAll("ul.profile-choices>li");
-  listItem[0].classList.add("desc-active");
 }
 
-function displaydetails(i) {
-  bios.forEach((el) => el.classList.add("desc-block-hidden"));
-  bios[i].classList.remove("desc-block-hidden");
 
-  let listItem = document.querySelectorAll("ul.profile-choices>li");
-  listItem.forEach((el) => el.classList.remove("desc-active"));
-  listItem[i].classList.add("desc-active");
+function displaydetails (i) {
+  bios.forEach( el => el.classList.add('desc-block-hidden'))
+  bios[i].classList.remove('desc-block-hidden')
+
+  let listItem = document.querySelectorAll('ul.profile-choices>li')
+  listItem.forEach( el => el.classList.remove('desc-active'))
+  listItem[i].classList.add('desc-active')
 }
 
-function showSidebarOptions() {
-  console.log(window.innerWidth);
-  let windowX = window.matchMedia("(max-width: 600px)");
-  if (windowX.matches) {
-    bios.forEach((el) => el.classList.remove(".desc-block-hidden"));
-  } else {
-    bios.forEach((el) => el.classList.add("desc-block-hidden"));
-    bios[0].classList.remove("desc-block-hidden");
+function showSidebarOptions(){
+  console.log(window.innerWidth)
+  let windowX = window.matchMedia("(max-width: 600px)")
+  if(windowX.matches) {
+    bios.forEach( el => el.classList.remove('.desc-block-hidden'))
+  }
+  else {
+    bios.forEach(el => el.classList.add('desc-block-hidden'))
+    bios[0].classList.remove('desc-block-hidden')
+
+
   }
 }
 
+
 // Simple example, see optional options for more configuration.
 const pickr = Pickr.create({
   el: ".color-picker",

single-faculty.php

@@ -1,9 +1,9 @@
 <?php
 
 /**
- * Template Name: Single Project
+ * The template for displaying all single faculty posts
  *
- * @package 502MEDIA
+ * @package UIU_CSE
  */
 get_header(); ?>
 

single-news.php

@@ -0,0 +1,292 @@
+<?php
+
+/**
+ * The template for displaying all single news posts
+ *
+ * @link https://developer.wordpress.org/themes/basics/template-hierarchy/#single-post
+ *
+ * @package UIU_CSE
+ */
+
+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>News</h5>
+				<h1><?php echo get_the_title(); ?></h1>
+				<p class="subtext">
+					<?php echo get_the_excerpt(); ?>
+				</p>
+				<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="grid">
+					<div class="stub">
+
+						<div class="stub-img-holder">
+							<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_05.jpg" alt="">
+						</div>
+						<span class="news-date">January 1, 2023</span>
+
+						<a href="#">
+							<h3>Learning to make a museum more accessible</h3>
+						</a>
+
+
+					</div>
+
+					<div class="stub">
+						<div class="stub-img-holder">
+							<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_02.jpg" alt="">
+						</div>
+						<span class="news-date">January 1, 2023</span>
+
+
+
+						<a href="#">
+							<h3>New blood test to identify infections could reduce global antibiotic overuse</h3>
+						</a>
+
+
+					</div>
+
+					<div class="stub">
+						<div class="stub-img-holder">
+							<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/gettybacktoschool.webp" alt="">
+						</div>
+						<span class="news-date">January 5, 2023</span>
+
+
+
+						<a href="#">
+							<h3>New center at addresses the forces shaping early childhood</h3>
+						</a>
+
+					</div>
+
+
+				</div>
+
+				<div class="grid">
+					<div class="stub">
+
+						<div class="stub-img-holder">
+							<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_05.jpg" alt="">
+						</div>
+						<span class="news-date">January 1, 2023</span>
+
+						<a href="#">
+							<h3>Learning to make a museum more accessible</h3>
+						</a>
+
+
+					</div>
+
+					<div class="stub">
+						<div class="stub-img-holder">
+							<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/campus_02.jpg" alt="">
+						</div>
+						<span class="news-date">January 1, 2023</span>
+
+
+						<a href="#">
+							<h3>New blood test to identify infections could reduce global antibiotic overuse</h3>
+						</a>
+
+
+					</div>
+
+					<div class="stub">
+						<div class="stub-img-holder">
+							<img class="stub-img" src="<?php echo (get_template_directory_uri()) ?>/img/gettybacktoschool.webp" alt="">
+						</div>
+						<span class="news-date">January 5, 2023</span>
+
+
+
+						<a href="#">
+							<h3>New center at addresses the forces shaping early childhood</h3>
+						</a>
+
+					</div>
+
+
+				</div>
+
+			</section>
+
+		</div>
+
+
+
+	</main>
+
+
+
+
+<?php endwhile; ?>
+<style>
+	p {
+		max-width: 100% !important;
+	}
+
+	header {
+		height: 100px !important;
+	}
+
+	#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 */
+</style>
+<?php get_footer(); ?>