Wordpress - Creat new theme

---o0o---

1. Create new folder to content theme

wp-content/themes/allegro

wp-content/themes/allegro/style.css

Create style.css file with content as below


/*
Theme Name: Allegro
*/

Create file: allegro/index.php

Click [Active] button to active this theme

Go to Timber to download Timber plugin

Create folders: allegro/views, allegro/js, allegro/images, allegro/fonts ... to separate files by their function

2. Create html file to show content

a) Create file: allegro/views/base.html with content


<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        {{ wp_head }}

        <link href='{{ template_uri }}/main.css' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>

        <link rel="shortcut icon" href="{{ template_uri }}/images/favicon.ico" type="image/x-icon">
        <link rel="icon" href="{{ template_uri }}/images/favicon.ico" type="image/x-icon">
        <meta name="viewport" content="width=device-width, user-scalable=no">

        <script type="text/javascript" src="{{ template_uri }}/js/app.js"></script>
    </head>
    <body>
        <div class="header">

        </div>
        {% block content %}
        {% endblock %}

        <div class="footer">

        </div>
        {{ wp_footer }}
        {% block scripts %}
        {% endblock %}
    </body>
</html>

b) in index.php file

<?php
$context = Timber::get_context();
Timber::render('home.html', $context);

So create allegro/views/home.html file


{% extends "base.html" %}

{% block content %}
<div class="page">

</div<
{% endblock %}



{% block scripts %}
<script type="text/javascript"<
    jQuery(window).load(function() {
        var newClass = 'home_page';
        jQuery('body').addClass(newClass);
    });
</script<
{% endblock %}

3. Note for ubuntu

Display images

chmod - R 777 wp-content/themes/allegro/images/logo.png

4. Create header Menu & footer Menu

In allegro/functions.php file


add_action( 'init', 'register_my_menus' );

function register_my_menus() {
    register_nav_menus(
        array(
          'header-menu' => __( 'Header Menu' ),
          'footer-menu' => __( 'Footer Menu' )
        )
    );
}

Call object menu


add_filter('timber_context', 'add_to_context');

function add_to_context($data){
        $data['header_menu'] = new TimberMenu('header-menu');
        $data['footer_menu'] = new TimberMenu('footer-menu');

        return $data;
 }

Display menu

In base.html


HEADER MENU
<ul class="menu-items">
    {% for item in header_menu.get_items %}
    <li class="{% if item.current %}current{% endif %} {{ item.class }}">
        <a href="{{ item.get_path }}">{{item.title}}</a>
        {% if item.get_children %}
        <ul class="nav-drop">
            {% for child in item.get_children %}
            <li class="nav-drop-item"><a href="{{child.get_link}}">{{child.title}}</a></li>
            {% endfor %}
        </ul>
        {% endif %}
    </li>
    {% endfor %}
</ul>

FOOTER MENU
<ul class="menu-items">
    {% for item in footer_menu.get_items %}
    <li class="{% if item.current %}current{% endif %} {{ item.class }}">
        <a href="{{ item.get_path }}">{{item.title}}</a>
    </li>
    {% endfor %}
</ul>

5. Create new post_type width taxonomy

init function


add_action('init', 'create_posttype');
add_action('init', 'create_taxonomies', 0);

declaring new post_type named allegro_artist

function create_posttype() {
        //allegro_artist post_type
        register_post_type('allegro_artist', array(
                'labels' => array(
                    'name' => __('Artists'),
                    'singular_name' => __('Artist'),
                ),
                'public' => true,
                'rewrite' => array('slug' => 'artist'),
                'taxonomies' => array('artist_category'),
                'supports' => array('title'),
            )
        );
}

declaring new taxonomy like category for allegro_artist post_type

function create_taxonomies() {
    //allegro_artist category
    $labels = array(
        'name' => _x( 'Artists Categories', 'taxonomy general name' ),
        'singular_name' => _x( 'Artists Category', 'taxonomy singular name' ),
        'search_items' =>  __( 'Search Artists Categories' ),
        'all_items' => __( 'All Artists Categories' ),
        'parent_item' => __( 'Parent Artists Category' ),
        'parent_item_colon' => __( 'Parent Artists Category:' ),
        'edit_item' => __( 'Edit Artists Category' ),
        'update_item' => __( 'Update Artists Category' ),
        'add_new_item' => __( 'Add New Artists Category' ),
        'new_item_name' => __( 'New Artists Category' ),
    );

    register_taxonomy('artist_category',array('allegro_artist'), array(
        'hierarchical' => true,
        'labels' => $labels,
        'show_ui' => true,
        'query_var' => true,
        'show_in_nav_menus' => true,
        'show_admin_column' => true,
        'rewrite' => array('slug' => 'artist_category', 'with_front' => false),
    ));
}

declaring new taxonomy like tags for allegro_artist post_type

function create_taxonomies() {
    //allegro_artist taxonomy
    $labels = array(
        'name' => __('Artists tags'),
        'singular_name' => __('Artist tag'),
    );

    $args = array(
        'hierarchical' => false,
        'labels' => $labels,
        'show_ui' => true,
        'show_admin_column' => true, //is display in admin colum
        'query_var' => true,
    );

    register_taxonomy('artist_tags', array('allegro_artist'), $args);
}

My note

Thứ Năm, 22 tháng 1, 2015