Clean up stuff

How to clean up the page with simple tricks

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:

function custom_meta_boxes(){
    $post_types_to_show = ['post'];
    foreach ($post_types_to_show as $post_type_to_show) {
            'Post Icon',
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="" 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 : '' ?>">

function save_postdata($post_id){
    if (array_key_exists('post_icon', $_POST)) {
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>
			<?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:


css HTML technology WordPress

Beitrag teilen

WhatsApp it

Folgen Sie uns