Yesterday, I wrote and published my first blog post, even though the page looks totally broken. I’m going to attach a screenshot so you can see what extent we’re talking about 🙂
When a non-programmer sees something like that, he immediately gets bogged down because it looks so messed up. Actually this is just a php error and a little css …. If you want to do it fast. However, I want to make it look good in the end, which is why I will first remove the rough and in the end I will turn to the subtleties. The following sequences apply to all web projects:
- Fix error! All visible error messages as well as incorrect HTML representations should be corrected.
- The rough first! Create order and make rough css properties, so that you first have an overview.
- Subtleties and extras. Once you’ve done all that and then you still have the breath of the day, you can focus on subtleties like fine-tuning and JavaScript.
So let’s start with the header as usual. This was originally meant to display a FontAwesome icon. However, because the entry part is not in there, just a &#x; is displayed. So i ask myself if you can quickly and easily add your own fields in the document area of WordPress.
I did not quickly figure out how to easily add another field to the sidebar, so I programmed a simple Metabox. For those of you who have never programmed a Metabox, it will be divided into 3 sections.
- Declaration of Metabox itself (add_meta_boxes)
- Programming the display (custom_func)
- Programming the storage (save_post)
The codes are actually relatively self-explanatory:
<?php
function custom_meta_boxes(){
$post_types_to_show = ['post'];
foreach ($post_types_to_show as $post_type_to_show) {
add_meta_box(
'post_icon',
'Post Icon',
'post_icon_meta',
$post_type_to_show
);
}
}
add_action('add_meta_boxes', 'custom_meta_boxes');
function post_icon_meta($post){
$post_icon = get_post_meta($post->ID, 'post_icon', true);
?>
<label for="post_icon">Wähle ein <a href="https://fontawesome.com/icons?d=gallery" target="_blank">Icon</a> aus oder gib einfach eine Zahl ein</label><br>
<input type="text" name="post_icon" id="post_icon" value="<?= ($post_icon)? $post_icon : '' ?>">
<?php
}
function save_postdata($post_id){
if (array_key_exists('post_icon', $_POST)) {
update_post_meta(
$post_id,
'post_icon',
$_POST['post_icon']
);
}
}
add_action('save_post', 'save_postdata');Once this has been programmed, the following will be displayed below:
For example, if I add my icon here and write the following command in the frontend to the right place:
<?php if ($post_icon = get_post_meta($post->ID, 'post_icon', true)): ?>
<div class="title-icon-container">
<div class="title-icon icon i-light"><i class="fa"><?= $post_icon ?></i></div>
</div>
<?php endif; ?>If this is displayed as follows
His problem is just that I applied a foreach loop to an empty variable. That’s why I just nested the loop into an empty ($variable) and the bug is fixed.
Now I give the content a maximum width, which I will of course better complement later and Voila! The site looks a lot tidier! Here is a before-after comparison:
