I have build a 404 page for my wordpress website. In my 404.phpI call the header function with <?php get_header(); ?>. I want to replace my normal Logo with a 404 Logo. In my header.php I add the following function:
<?php
if ( is_404()){
echo "test";
}
else {
echo "test1";
}
?>
It is only for testing if I can do another thing to a 404 page and it is working.
Now I want to replace for the 404 page my logo. The Logo is a svg in both cases.
This is the relevant part of the header.php:
<header class="m-header">
<div class="m-header-content">
<div class="m-header-logo">
<a href="/">
<svg>
<title>test<title>
<path class="st0" d="svgpath....."/>
</svg>
</a>
</div>
<div>
<?php wp_nav_menu( array(
'theme_location' => 'main_menu',
'container_class' => 'm-header-menu') );
?>
</header>
Can someone give me an example how I can change the <svg> with my function at the top? Or can someone give me a documentation about it.
You can just use a conditional inside your markup at header.php for e.g.
<?php if (is_404()) { ?>
// Your 404 svg markup here.
<svg>
<title>404 Logo<title>
<path class="st0" d="svgpath....."/>
</svg>
<?php else { ?>
// Your regular logo svg here.
<svg>
<title>Site Logo<title>
<path class="st0" d="svgpath....."/>
</svg>
<?php } ?>
In your provided header markup you can apply this like so -
<header class="m-header">
<div class="m-header-content">
<div class="m-header-logo">
<a href="/">
<?php if ( is_404() ) { ?>
// Your 404 svg markup here.
<svg>
<title>404 Logo<title>
<path class="st0" d="svgpath....."/>
</svg>
<?php else { ?>
// Your regular logo svg here.
<svg>
<title>Site Logo<title>
<path class="st0" d="svgpath....."/>
</svg>
<?php } ?>
</a>
</div>
<div>
<?php wp_nav_menu( array(
'theme_location' => 'main_menu',
'container_class' => 'm-header-menu') );
?>
</header>
P.S. for the bad formatting, answered via phone. Hope this helps 🙂