Theme Tutorial

In this tutorial you will create and use your own custom TubePress theme in 10 minutes or less. It may seem like there are a lot of steps in this tutorial, but that's only because we are being a extra verbose so that there's no room for confusion.
This article applies to TubePress when used in WordPress. Standalone PHP users should refer to this article instead.

In this tutorial you will create and use your own custom TubePress theme in 10 minutes or less. It may seem like there are a lot of steps in this tutorial, but that's only because we are being a extra verbose so that there's no room for confusion.

You don't need to be a computer expert to do this.

Required Tools

Make sure that you have the following before you start:

  • FTP access (or otherwise) to your web server
     
  • A text editor. If you don't have one, Sublime Text is free to use for a while and works well on all platforms.

Procedure

  1. Using FTP, login to your website and locate your TubePress Content Directory at wp-content/tubepress-content.
     
  2. Inside your TubePress Content Directory, open the themes subdirectory. Inside that, you will find a directory named starter.
     
    wp-content/
    │
    └── tubepress-content/
        │
        ├── add-ons/
        │
        ├── config/
        │
        └── themes/
            │
            └── starter/              <----------------------
        
    

    Locate starter theme
     

    This directory contains a theme that TubePress has installed specifically for this tutorial and is a child of the default TubePress theme.


     
    Note

    If the starter directory isn't there, which is a possibility in some installations, you can reproduce it easily:

    1. Using FTP, download the file at wp-content/plugins/tubepress_pro_x_y_z/web/themes/starter.zip to your desktop.
       
    2. Unzip this file. It will expand into a directory named starter.
       
    3. Using FTP, upload the starter directory to wp-content/tubepress-content/themes
       
    4. Verify that you now have a directory on your web server at wp-content/tubepress-content/themes/starter


     
  3. Inside the starter theme directory, you will find a file named theme.json.
     
    wp-content/
    │
    └── tubepress-content/
        │
        ├── add-ons/
        │
        ├── config/
        │
        └── themes/
            │
            └── starter/
                │
                └── theme.json        <----------------------
        
    

    All themes must have a file named theme.json which provides some basic metadata to TubePress.

    Download theme.json to your desktop using FTP.


     
  4. Open theme.json with your text editor. Once open, you'll be able to see some facts about the theme such as its name, authors, license, screenshots, etc.

    theme.json overview
     

  5. Change the theme name by editing the name field from changeme/themename to anything else, though we suggest lowercase alphanumerics and slashes. For instance:

    "name" : "eric/mytheme"
    change theme name
     

    Whichever name you choose should be globally unique as it will uniquely identify this theme to TubePress.


     
  6. Change the theme title by editing the title field from Theme Title - Change Me! to whatever you'd like. Whatever title you choose will be visible to you only. e.g.

    "title" : "My Awesome Theme"
    change theme title
     
  7. Save your changes to theme.json using your text editor and re-upload it to its original location on your website using FTP. You will want to overwrite the original file.


     
  8. Rebuild the system cache so that TubePress detects your changes and accepts the new theme.


     
  9. Back in your web browser, navigate to WP Admin > Settings > TubePress > Theme and ensure that your new theme shows up in the drop-down menu.

    new theme in dropdown
     
  10. Make sure your theme is selected in the theme drop-down and click the Save button to activate your theme.

    save and activate new theme
     
  11. Let's test what we've done so far. Using WordPress, open any page with TubePress on it. Since this theme is a child of the default TubePress theme with no local changes, everything should look identical to the default theme at this point.

    original theme
     

    Now we can start making changes. As an example, let's say that we want to make the following modifications:

    • round off the corners of all video thumbnails
    • lighten the font color of the video titles
    • italicize the video runtime
       

    Since these changes can all be done via CSS, we'll edit one of our theme's CSS files.


     
  12. Using FTP, download css/theme.css from the starter theme directory (see Step 1)

    wp-content/
    │
    └── tubepress-content/
        │
        ├── add-ons/
        │
        ├── config/
        │
        └── themes/
            │
            └── starter/
                │
                └── css
                    │
                    └── theme.css    <----------------------
        

     
  13. Open theme.css with your text editor and add the following new CSS rules:

    /*
    * Round off the thumbnail corners.
    */
    div.tubepress-thumb img {
    
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }
    
    /*
    * Lighten up the video titles.
    */
    dd.tubepress-meta-title {
        
        font-weight: 200;
    }
    
    /*
    * Italicize the video duration.
    */
    dd.tubepress-meta-duration {
    
        font-style: italic;
    }

    css new CSS rules
     

  14. Save your changes to theme.css, then re-upload it its original location on your website using FTP. You will want to overwrite the original file.


     
  15. With your web browser, head back to your test page from Step 11 and hit refresh. You should see the changes from your new CSS.

    finished theme
     

Congratulations! You have successfully created and activated your own custom TubePress theme. Of course, that was just a fraction of all that's possible.

Where to Go Next

Now that you've got the basics down, you're ready to really take advantage of TubePress.



Last Updated Feb 23, 2016 12:56PM PST
c65861bf7a72e1a8878bdf73cabbbdbf@tubepress.desk-mail.com
http://assets0.desk.com/
false
desk
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete