How To Create a WordPress Template With Home And Inner Pages (+ Video)

How To Create a WordPress Template With Home And Inner Pages (+ Video) by Dmitriy, Divine Elemente Team | |

More and more websites work on WordPress CMS these days. WordPress can hardly be called just blog basis.

In this tutorial, we are going to show you how to make a WordPress template with custom main page with the help of Divine Elemente and 2 PSD templates.

Final Product

What You'll Be Creating
Before producing a theme with a separate Front Page you should

Download Source Files / Theme live preview


Step 1. Prepare two WordPress themes

Before producing a theme with separate front page you should:

  • Create a simple WordPress theme from a prearranged PSD template (1st Theme).
  • Create a simple WordPress theme from a prearranged PSD template (2nd Theme) as a future front page (theme header should better be set higher as it will be the front page).

Update: before publishing, make sure none of the elements are set as editable “Not editable in CMS”, otherwise, it does not work.

Before producing a theme with a separate Front Page you should

You can download prepared sources below (based on simple WP theme for Divine Elemente):

How to convert PSD template to WordPress theme you can read at "Quick Start Guide", or watch our Quick start Video tutorial.

Step 2. Prepare a custom WordPress Template

After both of the themes are prepared on your local computer with Divine Elemente, you should:

  • Rename the following files of the 2nd Theme and copy them to the 1st Theme:
    • header.php -> home.php
    • footer.php -> home_footer.php
    • style.css -> home_style.css
    • images -> home_images
    • divine.install.php-> home_divine.install.php

Note: In case the Billboard was not applied in the 1st Theme, but was used for the front page, copy ‘billboards.js’, jQuery.backgroundPosition.js, jQuery.js files to the 1st Theme as well.

Before producing a theme with a separate Front Page you should
  • Upload the obtained theme in the directory where WordPress installed
    ('/wp-content/themes/');
  • Go to the Admin Panel and activate your theme.

Note: You can always use an online storage comparison, in case you are looking for suitable host.

Activate WordPress temlate

Step 3. Set Up a Theme

To set up a theme properly you should go to the
'/wp-content/themes/your_theme_name/' directory and rename the 'home_divine.install.php' file to 'divine.install.php'.

Note: by then obsolete 'divine.install.php' file should no longer exist, as it has been removed after activation.

  • Copy all the slides (slide1, slide2, etc.) from 'home_images/' to 'images/'
  • Then update the blog page in order to establish all necessary Front Page elements;
  • Go to the WordPress theme editor (Appearance > Editor) and open the ‘home.php’ file.
    • Implement the following alterations:
      • Replace this line:
                              <?php bloginfo('stylesheet_url'); ?>
                        
        by:
                              <?php bloginfo('template_directory'); ?>/home_style.css ?>
                        
      • Remove the following lines:
                                <!-- Start Content ->
                                <div class="content-stretch-warp">
                                <div class="content-stretch-bottom">
                                <div class="content-stretch-top">
                        
      • And add the line below:
                                <?php include_once ('home_footer.php'); ?>
                        
      • Also, replace all the 'images/' with 'home_images/' (if there are any)
  • Open the 'home_footer.php' file and remove the following lines:

                        </ div>
                    </ div>
                </ div>
                <!- end Content ->
            
  • Also, replace all the 'images/' with 'home_images/' (if there are any)
  • Open the 'home_style.css' file in theme editor (Appearance > Editor) and replace the 'images/' by 'home_images/';
  • Update your blog page.

That is all. Custom WordPress template is ready.

Now you can see how WordPress theme with custom main page works or you can download it in "zip" format.

Conclusion

As this tutorial proves, producing a WordPress template with separate front page is easy with Divine Elemente.

DOWNLOAD NOW

As this tutorial proves, producing a WordPress template with separate front page is easy with Divine Elemente.


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices

Read More »

PSD Hints – Speeding up of Publishing Time

PSD Hints – Speeding up of Publishing Time by Dmitriy, Divine Elemente Team | |
In this guide, we are going to explain how you can fasten your work greatly at template's creation, and what the PSD hints are in fact. PSD hints use and layer naming with Divine Elemente.

Related: Elements, Layout Editor, Publish Editor
[divineAds]

We added a PSD hints support starting from Divine Elemente. It will help to simplify and fasten the process of template's creation and CMS theme's preparation greatly.

PSD hints, the named special hint group or layers in PSD, are used for automatic defining of elements what speeds the publish process in some cases in 30 times!

PSD hints, the named special hint group or layers in PSD, are used for automatic defining of elements what speeds the publish process in some cases in 30 times!

Use of PSD hints in a PSD template is an optional possibility. You should not bring the structure of a PSD template to the set kind. Elements can always be assigned in the Publish Editor one-by-one:

Choose the right method for you: Comparison of two approaches for elements assignment

Choose the right method for you: Comparison of two approaches for elements assignment.

Publishing speed: Comparison of automatic and manual approaches for elements assignment

Publishing speed: Comparison of automatic and manual approaches for elements assignment.

A hints list for all elements can be found in the "Element's hints list".

PSD Hints limitations:

  • Elements assignment shouldn't break the frame boundaries of a grid block in order to publish them!
  • Limitations on Adobe Photoshop folders' nesting (for CS - CS4 - no more than 5; for CS5 - more than 5).
  • Auto setting of groups is working starting from Adobe Photoshop CS and higher.
  • There are no groups in Photoshop Elements, PSD hints are limited by layers.
  • Boundaries of a paragraph text shouldn't break frames of a grid block.

More details on what theme elements are, what types they have and what they are used for can be found in the 'Elements' guide.


Rules of PSD hints use

1. Use groups' names for PSD hints.
In other words, each element gets a Photoshop group with an appropriate PSD hint name, detailed in the Element's hints list.

2. Nested groups for an appropriate element state are taken into account.
It will help to define the element states like normal, hover, visited, click.

Rules of PSD hints use. Work with groups.

Rules of PSD hints use. Work with groups.

3. Layers are not taken into account for auto setting (so you may name them as you wish).
Only group's name is used for auto setting.

4. Only the top text layer is to be chosen as an element's text.
In case an element consists of several different text layers, only the top text layer is to be selected as an element's text. The rest layers in the group merge into one image.

Rules of PSD hints use. Work with text layers.

Rules of PSD hints use. Work with text layers.

5. An element will not be defined in the Publish Editor, if any of its layers breaks boundaries of an appropriate grid block.

Rules of PSD hints use. Crossing of a grid block's boundary.

Rules of PSD hints use. Crossing of a grid block's boundary.

Hint: If you create a new PSD template from the Layout Editor, the order of layers and their groups will be created automatically in accordance with the structure and added elements in the Layout Editor.

More details on the list of PSD hints with elements description can be found in the Element's hints list


PSD hints use: where and how

It's just an optional possibility as it was said before. This functionality was developed for those who like or need to change theme's design very often. Mainly, such people are designers, web developers or fastidious bloggers.

In case you use a template for theme creation only, without applying any changes later, you'd better assign elements in the Publish Editor. It'll be much easier and faster.


Related Guides and Tutorials:


External links


PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices

Read More »

Issue Resolved: Website Background Image Stretch

Issue Resolved: Website Background Image Stretch by Dmitriy, Divine Elemente Team | |

Seamless background stretch is a unique technology provided by Divine Elemente only, that for the first time in web industry allows to display textures or background of a website block at vertical stretching or compression with no visible seams!

Background image is graphics that fills spaces to the left and to the right from the website’s content boundaries (on monitors with high screen resolution).

An example of a template with use of ‘Seamless stretch’ and ‘Background image’

An example of a template with use of ‘Seamless stretch’ and ‘Background image’

In this guide, we'll consider main aspects of work with this unique technology and large background image.

Use of ‘Sides’ grid blocks

If you use a template with a graphics that fills spaces to the left and to the right from the website’s content boundaries, a special layout grid with ‘Sides’ blocks can be applied.
An example of a template with use of ‘Sides’ grid blocks

An example of a template with use of ‘Sides’ grid blocks

Interesting: An author of this theme spent near a week to handcraft beautiful design in Photoshop, providing full detalisation from scratch... However to publish a complete working theme for WordPress without a line of code, you'll need less than 5 minutes.

First of all, to create a template with sides, specify an appropriate layout grid with additional ‘Sides’ blocks in the Layout Editor.

Selection of an appropriate layout grid

If you decided to create a template with sides, you are to select a required layout grid in the right panel and set parameters in accordance with the page's template.

More details on this process can be found in the Layout Editor guide.

Selection of a grid and setting of page's parameters in the Layout Editor.

Selection of a grid and setting of page's parameters in the Layout Editor.

Everything in the ‘Sides’ grid blocks will be defined as an image outside the website’s content boundaries.

The next step for this theme’s creation is “Addition and assignment of theme elements”.
Learn how to create WordPress themes.

Then, let's consider theme's stretch parameters responsible for large background image filling at content's height enlargement.

Use of stretch parameters

There are just four types of filling background's gaps in case the content breaks page boundaries vertically: No Stretch, One Big Background, Simple Stretch, Seamless Stretch.
Types of background design.

Types of background design.

  • BG Type: One Big Background - At page's enlargement, layers that lie on the background are merged and published as one huge image, including the ‘Footer’. It’s recommended to use this type for one-color website or websites with one large photo.

Types of background design. One Big Background.

Types of background design. One Big Background.

  • BG Type: No Stretch - At page's enlargement, background's gaps are not filled with repeated images of this background. It’s recommended to use this type for the ‘Header’ and the ‘Footer’ grid blocks, as these images are not to stretch vertically in 90% cases.

Types of background design. No Stretch.

Types of background design. No Stretch.

  • BG Type: Simple Stretch - At page's enlargement, background's gaps are filled with repeated images of this background. It works well for flat backgrounds, but not for complex textures.

Types of background design. Simple Stretch.

Types of background design. Simple Stretch.

  • BG Type: Seamless Stretch - At page's enlargement, background's gaps are filled with repeated images of this background with unique smart algorithm. This method is extremely useful for really complex backgrounds (textures like leather, grass, wood, paper, etc.).

Types of background design. Seamless stretch.

Types of background design. Seamless stretch.

Please Note: Possibility to set a background is available only for elements and the entire page in Divine Elemente 0.9. But possibility to set background for widgets and grid blocks will be available in the next version of Divine Elemente plugin.

Have ideas about how to improve this functionality? Create a post at our forum or become a beta tester.

Optional parameters

For more detailed page settings, you can specify your own stretch parameters for each background part.

For example: Leave No Stretch for ‘Header’, set Seamless Stretch for ‘Content’ and use Simple Stretch for the ‘Footer’.

You can also set a position and width of stretch area for each grid block. To do that, drag stretch area's boundaries on the canvas or set its exact position and size in the Properties panel.

Stretch parameters. Stretch area's specifying.

Stretch parameters. Stretch area's specifying.

It's necessary to set the following parameters for exact specifying of the stretch area:

- Stretch: Distance from top (px). It sets a top point of the background area, which will be used for the background's gaps filling.
- Stretch: Height of tile (px). It allows to set the background area’s height that will be used for the background's gaps filling.

Almost each option includes a ‘Fade’ parameter.

Fade effect

The ‘Fade’ effect is a parameter that allows to create an effect of image's smooth transition into a background color.

Fade parameter. Setting of the parameter's values.

The above parameter's values are indicated in percentage ratio from the entire block across and down accordingly.

Using the fading background images considered above, you can improve your theme's look and quality and create really unique design of your website.

In the future, this guide will be expanded greatly. Check back often.

Conclusion

You have just found that it’s really possible to create a seamless background image performing no manual work, but several clicks only. And you have a choice of stretch parameter for your personal needs during website design creation with possibility to use the ‘Fade’ effect.

Related guides and tutorials

  1. Layout Editor
  2. Quick start guide
Read More »

960 Grid Tool

960 Grid Tool by Dmitriy, Divine Elemente Team | |
960 Grid tool designed to streamline web development workflow in Divine Elemente: definition, rules of usage and 960 Grid examples are considered in this tutorial.

Related: Best practices
[divineAds]

960 Grid tool represents universal dimensions to arrange web page elements in the most consistent way, and it gives your web pages a professional look & feel. The 960 Grid PSD template is used more and more often in the web development as a standard.

Use: 960 Grid examples

Use: 960 Grid examples

960 px width is universal solution for setting a web page width that all modern devices and browsers available on the market can display correctly.


How to use 960 Grid tool in Divine Elemente

As mentioned above the 960 Grid is a template tool to aid aligning and arranging elements in Divine Elemente. Since it is a tool, it was decided to place it as a separate item in PS menu (“Elemente > 960 Grid tool”). The basic steps of working with the 960 Grid tool are shown below.

Step 1. Launch 960 Grid tool.

Open a PSD template and select the "960 Grid Tool" item in Divine Elemente menu.

Launch of 960 Grid tool

Launch of 960 Grid tool

Step 2. Set layout grid parameters.

In most cases, enter 12 or 16 or 24 columns to suit your design tasks, or in few cases, change column or gutter's width if required, and press "Apply".

Selection of layout grid parameters

Selection of layout grid parameters

Step 3. Arrange all elements in the layout grid.

Elements arrangement

Elements arrangement

Note: Additional layers created are not taken into account when the theme is being published because Divine Elemente switches them off when analyzing the document.


Conclusion

As this tutorial shows, the use of 960 Grid tool is easy to use in Divine Elemente and hopefully will be useful for creating a design and making 960 Grid PSD as it helps a lot with headaches regarding layouts and their structure.

External links

  1. 960 Grid
Read More »

Billboard (Slideshow Plugin)

Billboard (Slideshow Plugin) by Dmitriy, Divine Elemente Team | |

What is 'Billboard' widget? Billboard (also known as slideshow WordPress widget) is a group of elements in Divine Elemente that forms a block with changing slides.

At present it is really trendy to use beautifully changing slides, for example, in the ‘Header’ grid block in order to show 3 - 5 best works in portfolio or cute photos in a personal blog.

Billboard (JS slideshow) video tutorial

Besides, the ‘Billboard’ slideshow widget allows not only to create jQuery slider but make do it in a beautiful JS animated way.

‘Billboard’ widget

‘Billboard’ widget

So, ‘Billboard’ consists of such elements as ‘Next’, ‘Previous’ buttons, and also any number of layers with ‘Slides’.

‘Billboard’ structure

‘Billboard’ structure

You can find the structure of the ‘Billboard’ widget on an image placed above. All the sizes of layers with ‘Billboard’ elements are calculated during ‘Billboard’ creation, and the whole block’s size is determined.

More details on how to create a ‘Billboard’ (or Javascript image slider) in Divine Elemente without any line of code can be found below.

Creation of ‘Billboard’ in Divine Elemente

First of all, let’s start from the preparation of all required elements of the ‘Billboard’ widget.

Step 1. Prepare elements in a PSD template.

Because of all elements are provided with special names of groups (PSD - hints), Divine Elemente can define them at once and assign the appropriate behavior to them automatically.

Elements assignment

Elements assignment

Note: Slides are taken in any number only from the ‘Billboard’ > ‘Slides’ group and can be set only as one layer for a slide.

‘Billboard’ elements arrangement

‘Billboard’ elements arrangement

‘Billboard’ elements (‘Previous’, ‘Next’, ‘Slides’) can be arranged together and be assigned in one copy in the ‘Header’ grid block and in one copy in the ‘Footer’ grid block, as it is shown in the image placed above.

Note: No less than one ‘Slides’ element is to be assigned for smooth work of the widget, because the ‘Next’ / ‘Previous’ buttons cannot work correctly without this element. Otherwise, they will be published as static HTML elements (‘Image’, ‘Text’, or ‘Link’).

Step 2. Launch Divine Elemente and set element’s properties.

Select elements of the ‘Billboard’ widget in the Elements panel and then set their necessary properties in the Properties panel.

‘Billboard’ elements properties

‘Billboard’ elements properties

A. Animate parameter
It allows to switch on / off an animation effect at slides changing.
B. Transition duration
It allows to choose effect’s duration at slides changing.
C. Slide duration
It allows to set time for slide display.
D. On Event parameter
It allows to select an event, after which animation effect starts working
E. Animation effect
It displays a list of supported animation effects at slides changing.

Step 3. Publish a theme and activate it.

To publish a theme on the server, you are to select your FTP account in the Command panel and click on the ‘Publish’ button. More details on how to create and set a FTP account can be found in the Publish Editor guide.

Then you are to activate the theme at the website. To do that you are to move to the backend of WordPress CMS (add “\wp-admin” in the address line), enter login and password, and move to the ‘Appearance>Themes’ section. Then please select the theme installed and press ‘Activate’.

Activate a theme

Activate a theme

Troubleshooting: elements are out of grid boundaries.

‘Billboard’ elements should not be out of the ‘Header’, the ‘Footer’ boundaries!

Troubleshooting. Elements assignment

Troubleshooting. Elements assignment

If one of the ‘Billboard’ elements is out of the grid bocks’ boundaries, the element will not be assigned!

‘Billboard’ editing

Together with the theme, the ‘Billboard’ plugin is installed in the backend of WordPress CMS, where you can edit all the required Billboard’s parameters right at the website (in other words, there is no necessity to edit a template in Adobe Photoshop and convert / upload a theme to the website all over again).
The installed plugin in WP backend

The installed plugin in WP backend

To set parameters, you are to move to the backend of WordPress CMS (add “\wp-admin” in the address line) and move to the ‘Divine > Billboards’ section.

‘Billboard’s editable parameters in the backend of WordPress CMS You may set the required parameters and ‘Billboard’ element’s data on the page opened.

‘Billboard’ element’s parameters in WordPress CMS

‘Billboard’ element’s parameters in WordPress CMS

Animation parameters are fully similar to parameters being used at the assignment of the ‘Billboard’ element - ‘Billboard > Slides’ in Divine Elemente:

  • (A) Animation effect - it displays a list of supported animation effects at slides changing.
  • (B) Transition duration - it allows to choose effect’s duration at slides changing.
  • (C) Slide duration - it allows to set time for slide display.

Besides, you can look through and set all slides of the ‘Billboard’ element, namely:

‘Billboard’ editing. Editor’s window

‘Billboard’ editing. Editor’s window

  • (А) Change the order of slides display - place the appropriate slides up or down.
  • (B) Edit a slide - click on the ‘Edit’ button and make the required changes in the open editor’s window.
  • (C) Delete a slide - click on the ‘Delete’ button opposite the unnecessary slide.
  • (D) Insert a new slide - click on the ‘Insert new slide’ button. A new slide will be added after the current one.

Editor’s functionality is similar to the Editable Content editor.

Conclusion

As you have just found out in this tutorial, creation of Billboard or JS image slider doesn’t take much time and is quite simple in Divine Elemente. At the same time, the result of Javascript image slider’s use in your design can make your work really unique and attractive.

PSD Hints, Elements And Best Practices

PSD hints, elements and best practices PSD hints, elements and best practices


Related Guides and Turorials:

  1. Editable Content
Read More »