Difference between revisions of "Wordpress Custom Themes"

Revision as of 18:48, 17 January 2017

Intro

Basically some simple info about making and starting to create your own Wordpress template.

Basic Requirements

The files that you can use with a Wordpress Template that are integrated are listed here: https://codex.wordpress.org/Theme_Development

The ones that are absolutely required for wordpress admin panel to recognize it is below:

style.css index.php

This is a very basic one and if you feel like you need more functionality you can look through the link above.

Functions and Styles

Now there is definitely other ways to do these things but this is the way I managed.

Simple Header Image

Basically just adding a header image option for the top of each page. Lets you set the height and width was well where the default image gets set. This code would be within the functions.php file within your Theme folder. Pretty much the function is all the dirty work and the them support part says start it up.

function register_my_menu() {
  register_nav_menu('header-menu',__( 'Header Menu' ));
}
add_action( 'init', 'register_my_menu' );
$args = array(
	'width'         => 960,
	'height'        => 198,
	'default-image' => get_template_directory_uri() . '/images/header.jpg'
);
add_theme_support( 'custom-header', $args );

Login Page

Login related functions and edits

Locking it Down

Pretty much only time you really want login errors to show is when your testing something out, otherwise wordpress lets on too much. This command in the functions.php hides them. You can use css to hide it completely or just null the message and still have the red bar show up.

add_filter('login_errors',create_function('$a', "return null;"));

Login Logo

Basically this is a set of three things needed to do:
- Set the style so it switches out the wordpress logo for your own
- Set the link of the image to go back to your homepage
- Set the Text that shows up when hovering to show your brand

function my_login_logo() { ?>
    <style type="text/css">
        .login h1 a {
            background-image: url(https://www.ragtagbunch.ca/logosmall.png);
            padding-bottom: 30px;
        }
       
    </style>
<?php }
add_action( 'login_enqueue_scripts', 'my_login_logo' );

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );

function my_login_logo_url_title() {
    return 'RagTagBunch';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

Admin Color Scheme

Getting Started

function additional_admin_color_schemes() {
    //Get the theme directory
    $theme_dir = get_template_directory_uri();
 
    //Ocean
    wp_admin_css_color( 'RagTagBunch', __( 'RagTagBunch' ),
        $theme_dir . '/admin-colors/ocean/colors.min.css',
        array( '#222', '#333', '#444', '#888' )
    );
}
add_action('admin_init', 'additional_admin_color_schemes');

Admin Menu CSS

This is the main icons that line the left with Posts, Comments and so on.

#adminmenu div.wp-menu-image::before {
    color:#333 !important;
}

This is the Arrow that usually shows up to the right of the top menu item that you are hovering or currently on. Shows up to the right of Posts, Comments and so on.

ul#adminmenu a.wp-has-current-submenu::after, ul#adminmenu > li.current > a.current::after {
    border-right-color: #333 !important;
}

This is the background color setting behind the icons and words of the admin mennu bar.

#adminmenu, #adminmenu, #adminmenuback, #adminmenuwrap {
    width: 160px;
    background-color: #111 !important;
}

This is the background for the subset of menus that some of the menus have in the admin panel. I prefer a separate slightly lighter color if possible.

.wp-submenu{
    background-color:#222 !important;
}