License

This theme's PHP, HTML and CSS and my own images are released under the GNU General Public License 3:
http://www.gnu.org/licenses/gpl.html

Embedded Font Licenses

Afta, Norwester, Old Standard TT and Playfair fonts are licensed under the SIL Open Font License. License information is in the /fonts/licenses folder of this theme.


Installation Instructions

From wordpress.org:

In the WordPress admin panel:
1. Under Appearance > Themes, click Add New (at the top of the screen)

2. In the search box, type Urban Square. Hover over the theme's "tile" and click Install

From wordpress.org:
1. Go to the web address https://wordpress.org/themes/urban-square/

2. Click Download and follow the instructions below. Installing via the admin panel with the instructions below is easiest.

For a remote location (web server on the Internet):

1. Download the file urban-square.zip from wordpress.org (https://wordpress.org/themes/urban-square/)

2a. Extract the zip file in Windows (right-click, select Extract All... or File menu, Extract All...)

2b. In Mac OS X (version 10.3 and up), locate the zip file and double-click it

2c. For Linux, see the eHow article titled "How to Open Zip Files in Linux", located at http://www.ehow.com/how_5004466_open-zip-files-linux.html. *In Ubuntu, right click the file and select Extract Here...

3. Use an FTP client to upload the inside folder (urban-square) from your computer to your remote WordPress installation. Filezilla works well for this purpose. For information on how to connect to an ftp server using Filezilla, see http://wiki.filezilla-project.org/Using#Connecting_to_an_FTP_server. The username and password are usually the ones used from your web host

4. Upload the urban-square folder to yourwebsitetitle.com/wp-content/themes, where yourwebsitetitle is your site's domain title

5. If you are using WordPress 3.0 or above you can install a new theme from your computer to your WordPress blog from the remote site's Admistration panel.

*In WordPress's Admin panel, select Themes
*Click Add New at the top
*In the Add Themes screen, choose Upload Theme
*Choose "Browse" or "Choose File" (this is different depending on the browser)
*From here, locate the zip file and then select Install Now

6. Preview Urban Square to make changes in the Customizer before Activating

7. Activate the theme by selecting the Activate link

For a local computer:

1. Download the file urban-square.zip from Jason G. Designs

2. Extract the file as explained above

3. Move the inner urban-square folder (by drag-and-drop or cut-and-paste) to your local site
If you are using Apache and have WordPress installed in the htdocs folder, this would be at htdocs > wordpress > wp-content > themes. In Linux, this is usually var > www > wordpress > wp-content > themes.

3a. If you are using Linux, see the post Ubuntu Linux, Permissions and a Local WordPress Install at http://www.jasong-designs.com/2012/01/14/ubuntu-linux-permissions-and-a-local-wordpress-install/

4. Activate the theme by selecting the Activate link


Validation

Theme html validated at http://validator.w3.org/check by Direct Input

HTML5

Index page- index.php (with header.php and footer.php) passes.
Single page- single.php passes.
*single.php includes template part entry.php, which includes template parts entry-meta.php and entry-footer.php
Category page- category.php passes.
Page page- page.php passes.
Archive page- archive.php passes.

CSS3

style.css passes as valid CSS (up to level 3).

*please note that the content inside of a website affects validation. It is best to validate a theme's html with content omitted and with plugins that auto-generate html code disabled.


How to use Urban Square Custom Colors

Beyond the provided Header Text Color and Background Color, Urban Square lets you customize the following sections on the front end:

* Header, Footer and Sidebar Background
* Menu Background
* Site wide link and hover colors
* Supporting link and hover colors- Supporting colors are the backgrounds behind buttons and the colors for the Search field, etc.
* Everything Else Background- Blockquotes, preformatted text boxes, Reply form background

At the bottom is a Current Colors display that simply shows the colors being used. This is useful for copying and pasting the color scheme to reuse it later, should you change it to something else. *Note, you must refresh the page after each change for the hex code values to update.

To help generating a color scheme, try getting a base color from The Hex Hub (http://www.december.com/html/spec/color.html). Your base color might be the main background color or a header background color.

Once you have this color, try Color Scheme Designer (palleton.com), where you can plug your base color value into the Base RGB: textbox. From here you will be presented with a wide range of color options. Exploring the buttons across the top shows you monochromatic, adjacent, triad and tetrad color schemes. Once a color scheme is chosen, you can save as an html page by going to COLOR TABLES... In the upper right corner, you can export as HTML, where a page with the colors and their hex codes is output. Use Save As from your browser to save to your local computer.


How to use Urban Square Custom Header options

Urban Square's header allows you to upload images suitable for three different background display states, Responsive, Fixed and Repeating. These options determine where your background image is placed and how it displays. These options can be chosen via radio buttons under Header Image in the Customizer.

Responsive- Responsive, the default, is used for large images that span the entire width of the header and images are placed accordingly. It is recommended to save your header image at a width as wide as the theme's maximum width (1920px). Images with a smaller width will be repeated horizontally under wide screens. When Header Text is hidden under responsive mode, the homepage link covers only 50% the width of the header, to avoid interfering with other page elements within the header.

Fixed- Fixed is recommended for smaller square, circular or rectangular logos. Backgrounds are placed behind the logo div. Images in this mode scale up to their original size and scale down if the parent container shrinks to a smaller size than the image. Logos are aligned left in tablet or phone sizes 600 pixels and up and are centered in phone sizes below 600 pixels.

Repeating- A simple repeating background behind the header. Images don't scale and repeat horizontally and vertically. This is recommended for tiled and seamless textures or repeating patterns. *Hiding Header Text is not available under Repeating display state.


How to use the High Definition section

Urban Square includes the retina.js library to display high resolution images in place of standard resolution images in posts or pages. retina.js support can be enabled and disabled by clicking the "Enable Retina Support for Post/Page images" checkbox in the Customizer.

For Existing Images

*Please note that retina.js looks for @2x images (twice the pixel resolution) automatically and a 404 not found error is generated by the browser if one doesn't exist. To avoid this, add a data-no-retina attribute to existing inline images without an @2x version when possible. To know which versions don't have an @2x version, you can check your Media Library. The Media Library also tells you where the image is being used.
-Navigate to the post or page with the image in question
-In the editor, select Text and look for the image's code
-add data-no-retina to the end

    Ex. [caption id="... src="http://localhost/wordpress/wp-content/uploads/2011/05/name-of-picture.jpg" alt="Alt text" width="800" height="600" data-no-retina /> An 800 x 600 photo[/caption]

For Newly Created Images

In order to not have excessive thumbnails, it is a good idea not to follow the advice for retina.js to manually create and save new @2x image files. Since the hidef images functions (found in options/urban_square_hidef_images.php) generate @2x images automatically, save one single new image without @2x in the filename at the maximum resolution for its high definition size, which would be the size of your image scaled to twice the width and height.

Urban Square automatically generates @2x versions of post thumbnails and gallery thumbnails as long as the size of the image that the thumbnail points to is larger than the thumbnail size set in Settings > Media (usually 150px x 150px).


About the screenshot

The small thumbnail image (palos-verdes-peninsula-small-150x150.jpg), the right aligned image (flames and code) and the larger, clipped image at the bottom (spinning_ride.png or spinning_ride@2x.png) are my own images.


Changelog

1.1 (03/06/15 to 03/08/15)
Made dropdown icon buttons wider with a minimum width of 4.5em for touch screens (finger friendly design).
Added border outlines around buttons in mobile and tablet views for clarity and updated the Customizer frontend display options to match.
Eliminated hiding of menus/widgets when clicked outside of said items, as this caused usability issues (widgets being hidden while tapping inside of the widget). For small screens with limited screen space, this feature isn't necessary.
Heights were being rendered differently for menu and widget dropdown buttons in Chromium and Firefox. This issue has been fixed.

1.1.1 (03/08/15)
Fixed the backend code to not set default colors for Customizer settings. If a color is not set, it doesn't display a style rule for it in the frontend. This leaves the default color styles provided by style.css.

1.1.2 (03/09/15)
Fixed the top dropdown menu to render correctly in Opera (desktop version 12.12), by setting relative positioning on the menu's top and child level ul tags.

1.2 (03/20/15 to 03/23/15)
Having no default colors for the Customizer resulted in the settings when stored to the database to not be removed when clearing the color value. Default colors have been restored for the Color settings.
Custom menus didn't render correctly when applied! For some reason, I thought the menu was already applied, but wasn't. This has been fixed by adding the custom menu auto generated classes to the menu display css.
Used a filter in functions.php to conditionally add the .desktop class to the body class tag.
Made menu buttons (hide/show menus, go to site nav) larger for mobile displays.
Changed overlooked blankslate text domain to urban-square in nav-above.php and nav-below.php template parts.
Added some sanitization functions to the output in urban_square_customizer-frontend.php. Particularly, esc_html was added to background urls.

1.2.1 (5/12/15)
Switched serif custom font used in the Customizer from Latin Modern Roman 10 to Old Standard TT, as the former font has a license that is incompatible with the GPL license.
Adjusted the Menu and Site Navigation label underlying code.
Prefixed handle titles under wp_enqueue_style function in urban_square_load_scripts.

1.3 (2/29/16 to 3/22/16)
Added support for WP 4.1 title tags. In the future, WordPress will let users control document titles from the admin panel or a plugin. Not hard coding the title supports this.
Used percentages for layout under widescreen desktop media query, instead of max-width, for a cleaner width spread.
Fixed error in style.css: Missing opening comment tag that caused the first (reset) style rule to be invalid.
Added footer editing capabilities for users to customize the footer. Also, author credit link can be hidden or shown via the Customizer.
Changed front end Customizer display code to use wp_add_inline_style, putting the code into WordPress's enqueue system.
Cleaned up sidebar background alignments. Made widgets two across in tablet screen size. Cleaned up display issues with RSS, Custom Menu widgets.
Added a custom callback to the Custom Background feature, integrating the 2x background with its equivalent background (it follows repeat, position, etc.).
Added three page templates: Full Width No Comments, Landing Page (with a thin header, no comments) and Blank (with nothing).
Added widget area in footer for additional information.