YOOtheme Pro is here! The best WordPress and Joomla theme. Learn more

Avatar ali.magomadov asked

[Tutorial] Custom 404 page for Yootheme Pro

<?php  
// no direct access  
defined( '_JEXEC' ) or die( 'Restricted access' );  

$theme = JHtml::_('theme');  

$doc = JFactory::getDocument();  
$this->language = $doc->language;  
$this->direction = $doc->direction;  

$error = $this->error->getCode();  
$message = $this->error->getMessage();  

?>  

<!DOCTYPE html>  
<html lang="<?= $this->language ?>" dir="<?= $this->direction ?>" vocab="http://schema.org/">  
    <head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport" content="width=device-width, initial-scale=1">  
        <link rel="shortcut icon" href="<?= $theme->get('favicon') ?>">  
        <link rel="apple-touch-icon-precomposed" href="<?= $theme->get('touchicon') ?>">  
        <title><?= $error; ?> - <?= $message; ?></title>  
        <?php if ($this->direction == 'ltr') : ?>  
        <link rel="stylesheet" href="<?= $this->baseurl; ?>/templates/yootheme/css/theme.css" type="text/css" />  
        <?php else : ?>  
        <link rel="stylesheet" href="<?= $this->baseurl; ?>/templates/system/css/theme.rtl.css" type="text/css" />  
        <?php endif; ?>  
        <script src="<?= $this->baseurl; ?>/templates/yootheme/vendor/assets/uikit/dist/js/uikit.min.js"></script>  
    </head>  

<body class="">    
    <div class="uk-section-default uk-position-relative uk-light">    

<!-- Link to the background image so that you can download http://teplic.tmweb.ru/images/yootheme/products-header.jpg -->    

        <div style="background-image: url(/images/yootheme/products-header.jpg);"    
        class="uk-background-norepeat uk-background-cover uk-background-center-center uk-section uk-flex uk-flex-middle" uk-height-viewport="offset-top: true">    
            <div class="uk-width-1-1">    
                <div class="uk-container uk-position-relative">    
                    <div class="uk-grid-margin uk-grid uk-grid-stack" uk-grid="">    
                        <div class="uk-width-1-1@m uk-first-column">    
                            <h1 class="uk-text-left@m uk-text-center uk-heading-hero uk-scrollspy-inview uk-animation-slide-left-medium">404</h1>    
                            <h6 class="uk-text-left@m uk-text-center uk-heading-primary uk-scrollspy-inview uk-animation-slide-left-medium">Page<br class="uk-visible@s">not found!</h6>    
                            <div class="uk-text-left@m uk-text-center uk-text-lead uk-scrollspy-inview uk-animation-slide-left-medium">    
                                The requested page was not found, or an error occurred!<br class="uk-visible@s">You can go back, or use the site search.</div>    

<!-- Search Form -->    
                            <div class="uk-text-left@m uk-text-center uk-scrollspy-inview uk-animation-slide-left-medium">    
                                <div class="uk-flex-middle uk-child-width-auto uk-grid-medium uk-flex-left@m uk-flex-center uk-grid" uk-grid="">    
                                    <form id="ID" action="/index.php" method="post" role="search" class="uk-search uk-search-large">     
                                        <span uk-search-icon="" class="uk-search-icon uk-icon"></span>    
                                        <input name="searchword" placeholder="Поиск" class="uk-search-input" type="search">    
                                        <input name="task" value="search" type="hidden">    
                                        <input name="option" value="com_search" type="hidden">    
                                        <input name="Itemid" value="101" type="hidden">    
                                    </form>    
                                </div>    
                            </div>    
                            <!-- Buttons  -->    
                            <div class="uk-text-left@m uk-text-center uk-scrollspy-inview uk-animation-slide-left-medium">    
                                <div class="uk-flex-middle uk-child-width-auto uk-grid-medium uk-flex-left@m uk-flex-center uk-grid" uk-grid="">    
                                    <div class="el-item uk-first-column">    
                                        <a class="uk-button uk-button-secondary" href="#">    
                                            <span uk-icon="forward" class="uk-icon"></span>    
                                            <span class="uk-text-middle">Home</span>    
                                        </a>    
                                    </div>    
                                    <div class="el-item">    
                                        <a class="uk-button uk-button-secondary" href="javascript:history.go(-1)">    
                                            <span uk-icon="reply" class="uk-icon"></span>    
                                            <span class="uk-text-middle">Back</span>    
                                        </a>    
                                    </div>    
                                </div>    
                            </div>    
                        </div>    
                    </div>    
                </div>    
            </div>    
        </div>    
    </div>    

</body>    

</html>  

and all this must throw in templates/system/error.php advance making the backup of this file
Image
Here's how it happened
Demo
Image

  • Joomla
  • Showcase
  • YOOtheme Pro

Edited

3 Answers

2

Avatar adso.de.melk answered

Hi,

Nice tips! But all the ERROR CODE will be displayed as a 404 error... I did some small improves:
1. Saved the custom page as error404.php in templates/system/error.php
2. In error.php add this two lines (line 21)

    $error = $this->error->getCode();  
    if (strstr($error, "404")) { include "error404.php"; die();}

Replace error.php by the modified error.php et voilà !

Edited

1

Avatar thomas.p Support answered

Thanks for sharing. Also note that the tag Showcase has been added recently. :)

Know someone who can answer? Share a link to this question via email or twitter.