AW29 Create a wordpress theme

Facebook
Twitter
LinkedIn

The task heading is create a WordPress theme, but the task description is to add some functionality to the site. I was quite worried before I read the description because creating a WP theme in 12 hours is not feasible. It is possible to create a child theme and do some minor ajustments within that time frame. But to code a complete wordpress theme in 12 hours is impossible unless you’re on speed or is a highly experienced WordPress developer.

There are many ways to enhance or change WordPress by using what WP calls a “hook”. By adding hooks you can add (or remove) functionality or add (action hooks), or change or remove content from both front-end and backend (filter hooks). Some hooks are mentioned in the lesson, and I feel really sorry for all my co-student that haven’t coded anything before. They would not even know where to put the code.

Anyway, the ones mentioned in the notes are limiting the number of words in the excerpt (I don’t want that since WP provides you with a field for excerpt, and I retrieve that instead of the start of the post), adding a favicon (which my theme (Hello) has functionality for already in the Customizer), include a Safari spesific stylesheet (I don’t want to do that either. I hope my site can be viewed on any browser), remove RSS and manifest urls from the header, put featured image in RSS feed (why would you do that when you have just removed the url?), and many more.

Since I never do what I’m told, I use my own code on this site: On my drive I have a folder called snippets, where I save code I use often.

Disable the possibility to comments on the site

When WordPress is a blog, comments are useful. If it is a website it is not. This script disables the options to comment in the front-end, disables exsisting comments and removes the comment menu items in the back-end.

add_action('admin_init', function () {
// Redirect any user trying to access comments page
global $pagenow;
if ($pagenow === 'edit-comments.php') {
    wp_redirect(admin_url());
    exit;
}
// Remove comments metabox from dashboard
remove_meta_box('dashboard_recent_comments', 'dashboard', 'normal');
// Disable support for comments and trackbacks in post types
foreach (get_post_types() as $post_type) {
    if (post_type_supports($post_type, 'comments')) {
        remove_post_type_support($post_type, 'comments');
        remove_post_type_support($post_type, 'trackbacks');
    }
}
});
// Close comments on the front-end
add_filter('comments_open', '__return_false', 20, 2);
add_filter('pings_open', '__return_false', 20, 2);
// Hide existing comments
add_filter('comments_array', '__return_empty_array', 10, 2);
// Remove comments page in menu
add_action('admin_menu', function () {
remove_menu_page('edit-comments.php');
});
// Remove comments links from admin bar
add_action('init', function () {
if (is_admin_bar_showing()) {
remove_action('admin_bar_menu', 'wp_admin_bar_comments_menu', 60);
}
});

Add Google Analytics to the site

Google analytics (GA) is the go-to standard for user tracking on a website. Until EU bans the use of GA, this script will add the GA tracking code to the site.

add_action('wp_head', function(){
?>
		
	<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','your-code-here');</script>
<!-- End Google Tag Manager -->

	
<?php
	
});
add_action ('wp_body_open', function () {
	?>
	

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=your-code-here"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
	
<?php
});

Move excerpt to top of page and rename it Ingress

I often use the excerpt in the beginning of a post template. By default, the excerpt form field is at the bottom and some plugins add extra fields to the editor, and pushing the excerpt text area further down. This moves it to the top – after the title.


function pixlweb_remove_normal_excerpt() {
    remove_meta_box( 'postexcerpt' , array('post', 'page') , 'normal' );
}
add_action( 'admin_menu' , 'pixlweb_remove_normal_excerpt' );
 

function pixlweb_add_excerpt_meta_box( $post_type ) {
    if ( in_array( $post_type, array( 'post', 'page' ) ) ) {
        add_meta_box(
            'pixl_postexcerpt',
            __( 'Ingress', 'thetab-theme' ),
            'post_excerpt_meta_box',
            $post_type,
            'after_title',
            'high'
        );
    }
}
add_action( 'add_meta_boxes', 'pixlweb_add_excerpt_meta_box' );
 
function pixlweb_run_after_title_meta_boxes() {
    global $post, $wp_meta_boxes;
    # Output the `below_title` meta boxes:
    do_meta_boxes( get_current_screen(), 'after_title', $post );
}
add_action( 'edit_form_after_title', 'pixlweb_run_after_title_meta_boxes' );

Neither of these are visible to a user at the front-end, but is valuable to site owners.

More to explorer

Motion design – green screen

A green screen is commonly used in video to mask out the background and insert another background instead. For example, instead of flying Arnold Schwarzenegger to Mars in the movie

Motion design – bouncing ball

In this module assigment, the task was to make a bouncing ball – with bouncing both vertical and horizontal. I made a ball that bounces in and out of the

Motion design – first animation

After Effect has many similarities to Premiere Pro, which I know from a previous course I did in Digital Media Design. So far, I have used After Effect the same