<div>
	<h1><?php esc_html_e("Page Not Found! Maybe try searching?"); ?></h1>


<?php
get_search_form();

?>

</div>

jQuery(document).ready(function (){
	const slides = document.getElementsByClassName('the-slide');
	slides[0].classList.add('active');
});

<style>
.grid{
display: grid;
grid-template-columns: : 1fr 1fr 1fr;
}

Creating layouts, flexboxes are also used. We can combine both grids and flexboxes, nest them and create some good layouts.

$ git stash

then

$ git switch the-other-branch

$ git stash apply

@font-face {
    font-family: big-shoulder;
    src: url('assets/fonts/BigShouldersDisplay.ttf');
}

.content{
    background-color: rgb(31,31,31);
    font-family: big-shoulder
}

<p>
    <?php echo get_post_meta(get_the_ID(), 'rt-movie-meta-basic-release-date', true); ?>
</p>
<p>
    <?php echo get_post_meta(get_the_ID(), 'rt-movie-meta-basic-content-rating', true); ?>
</p>
<p>
    <?php echo the_terms(get_the_ID(), 'rt-movie-genre')[0]->name ?>
</p>

 register_nav_menus(
        array(
        'header-menu' => __('Header Menu'),
        'footer-menu-1'  => __('Footer Menu 1'),
        'footer-menu-2' => __('Footer Menu 2'),
        )
    );

Using it in template

 <div class="secondary-menu-container">
        <?php wp_nav_menu(['menu'=>'footer-menu-2']); ?>
    </div>

• Things covered today
• Where to begin

Things Covered Today

<?php
if(have_posts()){
  while(have_posts()){
the_post() //update the global post
echo the_title();
} //endwhile
}else{
echo "Sorry, no post found";
}

<?php
// Start the main loop
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        the_title();
    endwhile;
endif;

// Use rewind_posts() to use the query a second time.
rewind_posts();

// Start a new loop
while ( have_posts() ) : the_post();
    the_content();
endwhile;
?>

Well we are almost 10% there to start building our theme so let’s begin.

Where to begin?

We are now equipped with some knowledge on how themes work in WordPress and now it is time to build one for our assignment.

For reference Here’s how my index.php and style.css looks now:

<?php
while (have_posts()){
	the_post();
	the_post_thumbnail([40,40]);
	the_title('<h2>', '</h2>');
	the_excerpt();

}
?>

/*
Theme Name: Screen Time
Description: Theme for managing movies.
 */

body{
    background-color: rgb(255,105,180);
    color: black;
    margin: 0px;
}

• functions.php
• Common template tags
• Creating a page template

functions.php file

The functions.php file inside any theme directory can be used to write code that is necessary for the theme like enqueuing styles and scripts.

We can also load our textdomain in this file, and add theme support. Below is a sample functions.php file that loads the textdomain

<?php
/**
 * Function to set up the screen time theme.
 */
function screen_time_setup(){
//Make theme available for translation
	load_theme_textdomain( 'screen-time', get_template_directory() . '/languages' );
}
?>

we can hook this function into the ‘after_theme_setup’ hook

add_action( 'after_setup_theme', 'screen_time_setup' );

Common Template Tags

1: get_header() : loads header template

2: get_footer(): loads footer template

3: get_sidebar(): loads sidebar template

…wait, I am not going to list all tags here, here is how you can find the general tags by yourself

Open public directory of your site, inside that go to “wp-includes” directory and find “general-template.php”, this files has all the general tags with nice documentation

Creating Page Template

We can create our own page template for that

Create a file name it anything like mytemp.php, we don’t have to name it like page-mytemp.php

<?php /* Template Name: MY Template */ ?>

We can customize this template according to use case and then use it when creating new page.

• Debug Config
• Template Hierarchy
• Tables in multisite

Before starting with debugging we have to first define this constants in the wp-config.php file

define( 'WP_DISABLE_FATAL_ERROR_HANDLER', true );   // WP 5.2 and later
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', false );
define( 'WP_DEBUG_LOG', true );

Template Hierarchy

WordPress uses templates to display content and there can be many templates depending on the use case for custom post types archives we can create templates and then for a single movie, we can create a template.

But, for creating a theme we need only one files index.php, so in wordpress template hierarchy index.php is the last one so if no template is found then at last index.php is used.

Learning about template hierarchy is important as we can then use it to make our own templatates for like custom post types or archive etc

Tables in Multisite

When creating a multisite installation of wordpress, few extra tables are added along with default tables.

• Themes : Do we really need just two files?
• Themes vs Plugins
• Query Monitor Plugin

Themes in wordpress

After plugin, it is now time to learn about themes, unlike plugins themes do not add any extra functionality to WordPress but change how the site looks.

Having a good theme that matches with out site intention and goal is must for anyone creating site using WordPress. There are many free themes available but we can also choose to develop our own.

To start with theme development we need to create two files

• style.css
• index.php

It is not mandatory to keep all you styles and style.css, we can use other organized structure for that but like how in plugin we used the index.php header to let the WordPress know about our plugin, we use the style.css header for theme info

/*
Theme Name: Test Theme
Theme URI: tr.rt.gw
Author: Me
Author URI: me.com
Description: Testing theme
Version: 0.0.1
Requires at least: 5.0
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: test-theme
*/

I am using paimo chair theme for this site.

Theme vs Plugins

Themes are for representation of our site, its look etc. Plugins we use to add extra functionality.

We should never use themes to add critical features, always use plugins for that as the official docs suggest. Combined together theme and plugin can really make a very good site like the one we will be making in our course.

Query Monitor Plugin

Query monitor plugin is a developer tool we can use to see the database queries our wp site is making. We can use it for debugging our site.

Not only db queries it can show you PHP errors, API calls, ajax calls, scripts enqueued etc.

I found it very useful as on my own site, the script was not getting loaded and I couldn’t figure out why.

We can download the zip for plugin from here

“Our plugin needs a lot of rework to be done for it to become fully functional and deployable.”

• Caching in WordPress
• Select media modal using wp.media

Caching in WordPress

If there is query in our code that is taking long to load and hampering the performance of our site, we can incorporate caching.

We will cache the results instead of firing the query every time which will make our site load faster.

In our project, to render shortcodes of movie and person according to the attributes we are using meta queries and tax queries.

There are ways to optimize this queries which will not be covering here, we are focusing on using caching only.

WordPress provides following methods in class WP_Object_Cache {} for caching,

• wp_cache_get()
• wp_cache_set()
• wp_cache_delete()

We can use output buffer in php, to get the output being put on the site like the movie details and then store that output in our cache

// ...your code to get posts and filter where meta person = actor
ob_start() ?>
<p>the_title()</p>
<?php $contents = ob_get_contents(): ?>

Then we can get the contents in the buffer and save them to our cache using wp_cache_set()

<?php
wp_cache_set("_rt-person-actor",$contents);
?>

After this, before running the query we can check if we have it in the cache and return that only

<?php
if(wp_cache_get('_rt-person-actor')){
  echo wp_cache_get('_rt-person-actor');
  return; // don't perform queries below
}

// ...your code to get posts

This will not work though, why ? the wp cache functions store non persistent cache, means once the request is over cache will be removed

What use of this is then?, we can use persistent cache tool like redis, for that you can use redis cache object plugin

Select media modal using wp.media

I create this generic function for mediametaboxes to launch different modal according to which button is clicked

/*
This function will be used by meta boxes to display wp.media modal.
 */
function createMediaFrame( // eslint-disable-line no-unused-vars
	title,
	allowMultiple,
	mediaType,
	hiddenInputID,
	callback = null
) {
	// Create a new media frame.
	const frame = wp.media({
		title,
		multiple: allowMultiple,
		library: { type: mediaType }, // Show only the specified media type in the media library.
	});

	// Callback when media is selected.
	frame.on('select', function () {
		const attachments = frame
			.state()
			.get('selection')
			.map(function (attachment) {
				return attachment.id;
			});

		// Update the hidden input with the selected attachment IDs (for form submission).
		const hiddenInput = document.getElementById(hiddenInputID);
		hiddenInput.value = attachments.join(',');

		// Execute the custom callback function if provided.
		if (typeof callback === 'function') {
			callback(attachments);
		}

		frame.close();
	});

	// Open the media frame.
	frame.open();
}

Can be used as

createMediaFrame(
'Select Images',// name for the modal
 true, //multiselect
'image', //type of media
'rt-media-meta-img-ids');

$ wp i18n make-pot . languages/my-plugin.pot

$ wp i18n make-mo movie-library-hi_IN.po languages

array_diff()

How can we set the info selected by user and remove the user that is unselected in metabox?

We are only getting the selected ids and not what is unselected, for that we can get previously selected terms, compare them with currently selected and remove the ones that are not present in current.

For this, I used PHP array_diff() function,

Compares array against one or more other arrays and returns the values in array that are not present in any of the other arrays.

First we get the selected ids and create terms

$all_people = array_merge( $directors, $producers, $writers, $actors );
$terms = [];
// Create array of terms to be added now.
		foreach ( $all_people as $person_id ) {
			$person      = get_post( $person_id );
			$term        = $person->post_name . '-' . $person_id;
			$term_exists = term_exists( $term, '_rt_movie-person' );
			// Create the term if it does not exists.
			if ( ! $term_exists ) {
				wp_insert_term( $term, '_rt-movie-person', [ 'slug' => $term ] );
			}
			$terms[] = $term;
		} // end foreach

Then we get the terms selected before

// Get previous terms.
		$old_terms = wp_get_post_terms( $post_id, '_rt-movie-person', [ 'fields' => 'slug' ] );

Compare the both using array_diff() and get terms which are not in the current but were there in previous

// Get unselected Terms.
		$unselected_terms = array_diff( $old_terms, $terms );

Finally remove the relationship between terms and out post

		wp_remove_object_terms( $post_id, $unselected_terms, '_rt-movie-person' );

This way, the term relationship will get deleted when unselected in the metabox

WPDB – standard way to interact with WordPress database

wpdb is a class provided by WordPress that has functions to handle database queries without having to write raw SQL.

• It is used so we can query the wordpress database without having to write raw SQL queries.
• Create an abstraction layer over the database.

• Common methods
  1. insert() : insert data into a table
  2. prepare() : prepares sql query to avoid sql injection
  3. update() : to update data in table
  4. delete() : to delete data

• Namespaces in php
• PSR-4 autoloader
• Nonces
• Shortcodes

Namespaces in php

Namespaces in php were introduced with version 5.3, they provide a great way to organize our code and also avoid naming conflicts

example

<?php
namespace main\controller

class Media{

}
?>

<?php
namespace main\view

class Media{

}
?>

Today or tommorow in project, we will run out of unique names to give to our classes and functions, so this is a great alternative instead of just prefixing everything.

PSR-4 Autoloader

PSR-4 autoloader is a standard that we can use to create our autoloader in the project. It uses nested namespaces and follows a specific directory structure.

We have to then import the autoloader only once in the main plugin file and we can autoload all our files. As for namespaces we have to use the full class name to access the classes.

spl_autoload_register(function ($class) {

    // project-specific namespace prefix
    $prefix = 'movie_library\\includes';

    // base directory for the namespace prefix
    $base_dir = __DIR__;

    // does the class use the namespace prefix?
    $len = strlen($prefix);
    if (strncmp($prefix, $class, $len) !== 0) {
        // no, move to the next registered autoloader
        return;
    }

    // get the relative class name
    $relative_class = substr($class, $len);

    // replace the namespace prefix with the base directory, replace namespace
    // separators with directory separators in the relative class name, append
    // with .php
    $file = $base_dir . str_replace('\\', '/', $relative_class) . '.php';

    // if the file exists, require it
    if (file_exists($file)) {
        require $file;
    }
});

Nonce

$nonce = wp_create_nonce('csrf_token');

Then in our backend code, when we receive any request we can validate this nonce using wp_verifiy_nonce() function.

function save(){
if(!(isset($_GET['csrf_token'] && 
wp_verifiy_nonce($_GET['csrf_token], 'csrf_token) ){
return;
}

}

ShortCode API

Shortcodes in wordpress are used to render some content on the front end dynamically. they are writter as [directors_list]

The wordpress finds this shorcode if it is registered or not and call the function connected to it which will return some content.

This content will then be displayed at the place of the shortcode.

to register a shortcode we have to use:

function register_shortcodes(){
   add_shortcode('recent-posts', 'directors_list_function');
}

Then we also have to define the callback which is going to give the content

function directors_list_function() {
   //logic to get all directors
   return $directors;
}