Anil Code

 First we create custom post type for programs so go to mu-plugins and open php file for custom post. In university_post_types() copy event post type code and repeat this code inside function and rename the things. In program custom post type code remove excerpt from supports and add icon dashicons-awards After that go to dashboard create Math program with dummy text and publish and also go permalinks and update Now this program single post use single.php but i want create dedicated page for this like single-program.php Now copy code from single-event.php and paste in single-program.php Now change metabox like below code   < a class = "metabox__blog-home-link" href = " <?php echo get_post_type_archive_link ( 'program' ); ? > " >         < i class = "fa fa-home" aria-hidden = "true" ></ i > Programs Home       </ a > and save Now to display program archive we have to create archive-program.php page and ...

 In this post we will create past event page and use custom query and pagination. First go to wordpress dashboard and create new page Past Events and publish without content. Now go to theme folder and create new page name page-past-events.php  Now copy archive-event.php code and paste into page-past-events.php and change title Past Events Now copy custom query from front-page.php and paste in this page-past-events.php. like below ->  $today = date ( 'Ymd' );         $pastEvents = new WP_Query ( array (             'post_type' => 'event' ,             'meta_key' => 'event_date' ,             'orderby' => 'meta_value_num' ,             'order' => 'ASC' ,             'meta_query' => array (                 array (       ...

 First go to archive-event.php page and find list of event code. From copy dynamic display code from front-page.php and past into it.  < span class = "event-summary__month" > <?php             $eventDate = new DateTime ( get_field ( 'event_date' ));           echo $eventDate -> format ( 'M' );           ? > </ span >           < span class = "event-summary__day" > <?php echo $eventDate -> format ( 'd' );   ? >           </ span > and save after that we will order and filter event posts according to event date and hide posts which event passed. So here we can not use custom query because wordpress have default query working here to display events so we will add action and function in function.php file . So write below code in functions .php function university_adjust_queries ($query) {   i...

 So first go to front-page.php and find events section  And add below line in custom query to display events as custom event date fields   'meta_key' => 'event_date' ,             'orderby' => 'meta_value_num' ,             'order' => 'ASC' meta key for custom field name and order by meta_value_num because date is number and meta for that because wordpress treat custom fields as meta value. Order Ascending order mean new first. Now i want hide that event which date passed so follow below code  $today = date ( 'Ymd' ); 'meta_query' => array (                 array (                   'key' => 'event_date' ,                   'compare' => '>=' ,                   'value' => $today,     ...

 Dont use wordpress custom field using support use already available plugins 1- Advance custom field plugin 2- Custom Metaboxes 2 plugin. So go to plugin and install advanced custom fields plugin In advance custom field plugin go to fields groups Give Name Event Date and click Add field. in field type select Date Picker Field Label  Event Date and field name -event_date make required. Make Date deafult selection and for return format make ymd option In location rules select post type event. and save changes. Lets edit any event for see custom filed option. and add new date and update event date. Now i want display custom field in front-page.php and find event . And in Date for month and day add below code ->     < span class = "event-summary__month" > <?php             $eventDate = new DateTime ( get_field ( 'event_date' ));           echo $eventDate -> format ( 'M' );       ...

 First go to blog posts and edit one. Now you will not see here any input to type custom excerpt for this post. In Post menu in right sidebar you will see add excerpt in top. Add dummy excerpt in this post and update. Now go to front-page.php and find blog section where we added 18 words trim function. lets modify here Now change that code with below <?php if ( has_excerpt ()) {               echo get_the_excerpt ();           } else {             echo wp_trim_words ( get_the_content (), 18 );           } ? > and save that. Now add this feature in event posts go to any event and edit one and add excerpt. With edit event post you will not see excerpt option and also there is classic editor. Means we have to tell wordpress to support excerpt feature by code. So go to mu-plugins folder and open custom post type code for event. so add this line in custom post typ...

 Currently event archive uses blog archive page so i want display events archive in different style So we have to create new page in theme folder archive-event.php now go to archive.php file copy all code and paste it into archive-event.php Now change the title to All Events and subtitle for as you wish. Delete while content for display event use front page event style for event. Copy event summry div from front-page.php and paste inside while loop in archive-event.php and save check event archive style changed. Also change event Url for event archive page single-event.php. like below ->   < a class = "metabox__blog-home-link" href = " <?php echo get_post_type_archive_link ( 'event' ); ? > " >         < i class = "fa fa-home" aria-hidden = "true" ></ i > Events Home       </ a > and save.

To display single event for wordpress like post we have to create new page in theme folder  single-event.php Now go to single.php and copy all code and paste in single-event.php and now come to the metabox and remove posted by and date category and add event title like below < span class = "metabox__main" >         <?php the_title ();   ? >       </ span > and save

 First go to front-page.php find event section and write below code    <?php         $homepageEvents = new WP_Query ( array (             'post_type' => 'event' ,             'posts_per_page' => 2 ,         ));         while ($homepageEvents -> have_posts ()) {          $homepageEvents -> the_post (); ? >       < div class = "event-summary" >         < a class = "event-summary__date t-center" href = " <?php the_permalink ();   ? > " >           < span class = "event-summary__month" >Apr</ span >           < span class = "event-summary__day" >02</ span >         </ a >         < div class = "event-summary__content" > ...

 First go to functions.php file and new action with new method like below function university_post_types () {   register_post_type ( 'event' , array (     'public' => true ,     'labels' => array (       'name' => 'Events' ,     ),     'menu_icon' => 'dashicons-calendar' ,   )); } add_action ( 'init' , 'university_post_types' ); and save and check add some dummy event . Now question is if someone change the theme what will happens because custom post type in theme folder function.php function.php not best place to add custom post type code For custom post type best practice is use Must used Plugin. For this we will create new folder inside wp-content name -> mu-plugins this always loaded and activated. Now create file university-post-types.php inside it and paste above custom post types from functions.php and save. updated code of custom post type event  function university_post_types () ...

 So first go to front-page.php and find blog area to display posts and use like below code for display posts   < div class = "full-width-split__inner" >       < h2 class = "headline headline--small-plus t-center" >From Our Blogs</ h2 >       <?php       $homepagePosts = new WP_Query ( array (           'posts_per_page' => 2 ,           ));             while ($homepagePosts -> have_posts ()) {            $homepagePosts -> the_post (); ? >       < div class = "event-summary" >         < a class = "event-summary__date event-summary__date--beige t-center" href = " <?php the_permalink ();   ? > " >           < span class = "event-summary__month" > <?php the_time ( 'M' );   ? > </ spa...

 First create new file archive.php in theme folder. Now copy all code from index.php where all blog post code and paste into archive.php. and for title write below function in title to make automate archive title  < h1 class = "page-banner__title" > <?php the_archive_title (); ? > </ h1 > and save. and for description below paragraph add this code    < div class = "page-banner__intro" >       < p > <?php the_archive_description ();   ? > </ p >     </ div > and save Now go to to user profile add description and check in blog by click author you can see description. And Now go to posts and click category and click category name and add description for that and check category description in Category archive.

 First go to single.php page in theme folder. Now go to page.php and copy banner area html and paste in single.php because page.php display single page and single.php display single post look similar. So remove default the_title and the_content and add banner area html. Now use container class from page.php in single.php to display content so add that div like below < div class = "container container--narrow page-section" > </ div > and in above div we will display content. inside above container div write this content -> < div class = "generic-content" >     <?php the_content ();   ? >   </ div > and save check. Now we add metabox in single  post Copy the metabox code from page.php and paste above content in single.php. And now instead of display blog title i will display author date and category so copy from index.php for that code and paste by replacing title. like below complete code for metabox  < div class ...

 According to posts set post per page from dashboard Setting -> reading option. First go to index.php where all blog post listed before closing last div add php function like below   </ div >   <?php }   echo paginate_links ();   ? > </ div > and save that and check blog page. Now check complete go to dashboard again set per page post to 10.

 For creating blog page and front page we create to new pages from dashboard Home and Blog and publish without content. Now go to setting and click in Reading option and select Home page for static and blog page for blog. Now create new page in theme folder front-page.php and copy all index.php code and paste in it. Now remove all code from index.php and add header and footer using wordpress function. Now copy page-banner section from page.php and add this between header and footer. < div class = "page-banner" >   < div class = "page-banner__bg-image"     style = " background-image: url( <?php echo get_theme_file_uri ( 'images/ocean.jpg' )   ? > )" >   </ div >   < div class = "page-banner__content container container--narrow" >     < h1 class = "page-banner__title" >Welcome to our blog !</ h1 >     < div class = "page-banner__intro" >       < p >Keep up wit...

 Now we will remove dynamic menu and use static menu so remove dynamic menu functionality. So for adding current menu class when active add below code in static menu   < li <?php if ( is_page ( 'about-us' )) echo 'class="current-menu-item"' ? > >< a                 href = " <?php echo site_url ( '/about-us' )   ? > " >About Us</ a >             </ li > and also if we click page link of child page then also highlight parent page so modify above code  < li <?php if ( is_page ( 'about-us' ) || wp_get_post_parent_id ( 0 ) == 15 ) echo 'class="current-menu-item"' ? > >< a                 href = " <?php echo site_url ( '/about-us' )   ? > " >About Us</ a >             </ li > Note wp_get_post_parent_id(0) means check current page parent...

 So first go to admin and check appearance section and there is no menu location so we have to set that from functions.php. so go to functions.php and find university_feature function and add below line in function    register_nav_menu ( 'headerMenuLocation' , 'Header Menu Location' ); and save it. Now go to Appearance Menu and create new My Header Main Menu and select About us and privacy policy in menu and delete other pages. Now go to header.php and comment from ul that menu so display dynamic menu. Now add below code to display new dynamic menu    <?php wp_nav_menu ( array (               'theme_location' => 'headerMenuLocation' ,           ));   ? > and save this. Now same thing do for footer  so update university_features() in functions.php and add line   register_nav_menu ( 'footerLocationOne' , 'Footer Location One' );   register_nav_menu ( 'footerLocationTwo' , '...

 First check responsiveness of theme using inspect. Then add viewport meta for make theme responsive like below -> In head section add below code   < meta name = "viewport" content = "width=device-width, initial-scale=1" > Now add charset in Head section like below  < meta charset = " <?php bloginfo ( 'charset' )   ? > " > and now add language attribute in <html> like below  < html <?php language_attributes (); ? > > and save check the blog in inspect viewport. After add new function in <body> like below  < body <?php body_class ();   ? > > and save.

 So go to page.php and uncomment page links In this feature we will use wp_list_pages() function to get done this. this function return all pages from wordpress. First remove hardcoded li from menu and use function like below -> < ul class = "min-list" >       <?php wp_list_pages ()   ? >       <!-- <li class="current_page_item"><a href="#">Our History</a></li>       <li><a href="#">Our Goals</a></li> -->     </ ul > and save check the page. Now we will customize with argument like below   < ul class = "min-list" >       <?php       if ($theParent) {          $findChildrenOf = $theParent;       } else {          $findChildrenOf = get_the_ID ();       }       wp_list_pages ( array (      ...

 If wordpress function start with get_ that means it will return value and you have to echo and if start with the_ then no need to echo.

 First go to dashboard create to pages Our History and Our Goal with dummy content and also from sidebar menu select Page attribute parent About us for these pages and publish. Now we make breadcrumb box dynamic so follow along I want display current page title in page.php metabox so add below code ->  < p >       < a class = "metabox__blog-home-link" href = "#" >< i class = "fa fa-home" aria-hidden = "true" ></ i > Back to About Us</ a >       < span class = "metabox__main" > <?php the_title ()   ? > </ span >     </ p > and save. Now we want to display breadcrumb in only child pages so follow below code -> for this we use in get_the_ID() function which return the post page Id and wp_get_post_parent_id() which will check get_the_ID() function return id have parent or not if parent have return Parent ID  if not return 0 Now to test lest create another child page...

 First go to header.php and find the logo and add below code like -> < h1 class = "school-logo-text float-left" >         < a href = " <?php echo site_url ()   ? > " >< strong >Fictional</ strong > University</ a >       </ h1 > and save and also do the same in footer menu and footer logo.

 If you want add link in menu manually follow below code -> Go to header.php and add this function in link ->  < li >< a href = " <?php echo site_url ( '/about-us' )   ? > " >About Us</ a ></ li >

 First go to functions.php and add below code -> function university_features () {   add_theme_support ( 'title-tag' ); } add_action ( "after_setup_theme" , "university_features" ); and save and refresh wordpress blog.

 For This first create About Us page and Privacy policy page in admin. Then template file open interior-page.html and copy content from after header and before footer. -> from Page banner to generic content . Go to page.php in theme and paste that copy html inside while loop and remove old content to display new content. After that lets make content dynamic in page first make Page name dynamic so change below ->   < h1 class = "page-banner__title" >Our History</ h1 > to   < h1 class = "page-banner__title" > <?php the_title ();   ? > </ h1 > after make content dynamic remove dummy paragraph and add below function ->  <?php the_content ();   ? > and save and also comment page link menu now for future. also in page make background image dynamic using get_theme_file_uri() function.

 First download file from here for template -> https://github.com/LearnWebCode/university-static And go to template index.html file and copy header section and paste after body in header.php And go to index.html and copy footer section and paste in theme footer.php above body. Now go to template folder and copy src build css and images folder to theme folder. Now i have new styles in css folder i want load this so update university_files() in functions.php like-> wp_enqueue_style ( 'university_main_styles' , get_stylesheet_uri ()); to    wp_enqueue_style ( 'university_main_styles' , get_theme_file_uri ( '/build/style-index.css' ));   wp_enqueue_style ( 'university_extra_styles' , get_theme_file_uri ( '/build/index.css' )); and save and refresh blog. also remove body css color from style.css And for load fontawesome copy link from index.html and add update university_files() function like below -> function university_files () {     wp_en...

 In theme file create header.php and footer.php and in index.php use header and footer like below code -> <?php get_header ();   while ( have_posts ()) {     the_post (); ? > < h2 >< a href = " <?php the_permalink () ? > " > <?php the_title ();   ? > </ a ></ h2 > <?php the_content ();   ? > < hr > <?php } ? > <?php get_footer ();   ? > and save. and also thease function for header and footer in single.php and page.php Now add below html code in header.php file  <! DOCTYPE html > < html > < head >   <?php wp_head (); ? > </ head > < body >   < h1 >Fictional University</ h1 > </ body > </ html > and save it. now create functions.php file to add new method for load css file and js file and add below code to load css file dynamic -> function university_files () {   wp_enqueue_style ( 'university_...