The Man Who Will Monetize His Web Engineering Skills in 100 Days - Day 8
What I learned
Outputting information to the post detail page
<!DOCTYPE html>
<html lang="en">
<head>
<?php get_header() ?>
</head>
<body>
<?php get_template_part("includes/header"); ?>
<?php if(have_posts()): ?>
<?php while (have_posts()): the_post(); ?>
<!-- Page Header -->
<header class="masthead" style="background-image: url('img/post-bg.jpg')">
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="post-heading">
<h1><?php the_title(); ?></h1>
<span class="meta">Posted by
<?php the_author(); ?>
on <?php the_date(); ?></span>
</div>
</div>
</div>
</div>
</header>
<!-- Post Content -->
<article>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<?php the_content(); ?>
</div>
</div>
</div>
</article>
<hr>
<?php endwhile; ?>
<?php endif; ?>
<?php get_template_part("includes/footer"); ?>
<?php get_footer(); ?>
</body>
</html>
With this, I am now able to output information to the detail page.
I realized that while WordPress allows you to manage and edit the actual content you post (articles, images, etc.), the "framework" and "layout" for displaying that content are built using PHP.
In other words, there is a division of labor where the template part that determines the appearance is built with PHP, while the post content is entered and reflected from the management screen.
Setting featured images
To set a featured image for a post, you must create a functions.php file and write the following code.
<?php
add_action('init',function(){
add_theme_support('post-thumbnails');
});It feels strange that there is no closing tag, but in PHP, if there is no code written after it, the closing tag can be omitted.
Now that I can set featured images, I went to the management screen and set one. Next, I will make it possible to display the featured image.
Images uploaded to WordPress are managed by ID. Therefore, I will set it up to retrieve the ID of the image specified as the featured image and display that ID as the featured image.
<?php
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id);
?>
<header class="masthead" style="background-image: url('<?php echo $img[0]; ?>')">However, this alone is not ideal because the URL will be blank if no featured image is specified. So, I will make it so that if a featured image is specified, it displays that image, and if not, it displays a default image.
if (has_post_thumbnail()):
$id = get_post_thumbnail_id();
$img = wp_get_attachment_image_src($id, 'large');
else:
$img = array(get_template_directory_uri() . '/img/post-bg.jpg');
endif;
?>Thoughts
The image I initially had of WordPress and the impression I got from actually using it were quite different.
At first, I thought of it as just a "convenient tool that allows you to easily create a website without any HTML knowledge." That is certainly not wrong. If you use pre-prepared templates, it is possible to publish a website with minimal effort.
However, the story changes completely when you try to customize the design or structure to a certain extent yourself. You need to directly edit WordPress theme files—such as header.php or single.php. Knowledge of PHP, HTML, and CSS is also essential.
Naturally, people who post WordPress-related jobs on crowdsourcing sites are not "satisfied with the template as is," but rather "want to customize it exactly as they imagine."
To meet those demands, you need more than just superficial operational skills; you need the skills to understand the theme structure, template tags, and the roles of functions, and to respond flexibly.
In other words, I realized once again that "being able to use WordPress" does not just mean being able to make posts, but that it only truly counts when you have the technical understanding required for customization.