extendstudio / mesmerize Goto Github PK

In inc/functions.php, there's no need for the ternary:

function mesmerize_sanitize_checkbox($val)
{
    return (isset($val) && $val == true ? true : false);
}

That can simply be written as:

function mesmerize_sanitize_checkbox( $val ) {

	return isset( $val ) && $val;
}

Or:

function mesmerize_sanitize_checkbox( $val ) {

	return ! empty( $val );
}

The return value of the expression in either case will be true or false.

Just keep this in mind anytime you're returning true or false with a ternary. You almost never need it.

• No need to prefix handle names of third party scripts/styles
  • Check inc/functions.php line 185

This is just an general escaping ticket. I'll continue posting here as I continue on with the review.

The following is a list of file names, followed by line numbers and variables, where escaping is needed.

inc/functions.php

• 495 - $stings[0]
• 523 - $words[$i]

• In inc/theme-options.php line 160, esc_html is used to sanitize input. esc_html is used to sanitize outputs and not inputs.
• Further, there is setting added but not used anywhere.
• Check this block and remove it if not necessary
• In inc/theme-options.php line 169, there is a typo. That function should either be sanitize_text_field or mesmerize_sanitize_textfield

• Disable following on default
  • Social icons on header top
  • Location, number and email on header top

• Pagination in single post is missing styling. Please check the screenshot
  

The mesmerize_front_page() function in inc/templates-functions.php looks like this:

function mesmerize_is_front_page()
{
    $is_front_page = (is_front_page() && ! is_home());

    return $is_front_page;
}

Eventually, that's used to set the .mesmerize-front-page body class, which is also used in your customize-preview.js file.

I wanted to be sure that your check was absolutely correct. There's no inline docs for your code (or any code, really). But, your theme uses a custom page template, which you'd expect a user to use on the front page of the site. However, that template can be used for any page. If the function above is related to the page template also, you'll want to check with is_page_template() instead.

Your languages/mesmerize.pot file is missing 150 text strings. I ran the WP translation tool and found 349 strings. The POT file included only has 199 strings.

Check out this post if you don't know how to use the WordPress translation tool: http://ottopress.com/2013/language-packs-101-prepwork/

• In customizer\customizer-controls.php line 544 there is wp_enqueue_script('gradient-control', get_template_directory_uri() . "/customizer/js/gradient-control.js"); but there is no gradient-control.js file in customizer.js folder

Mesmerize is almost compatible with Elementor.
But some tiny bugs exist:

• Mesmerize Theme prevents to change the color for any icons in elementor. Only gray. It was already been reported here: https://wordpress.org/support/topic/icon-color-with-elementor/ in the next capture the icon should be red
  

• Mesmerize Companion prevents the display of the text module in elementor. Only this module, and only in the front page. But still it's disabling enough to not be able to write on the homepage. It becomes impossible to write in bold, italic, etc.
  

Make sure excerpt_more filter does not affect admin side. Your code lines 381 onwards in inc/functions.php should look like this:

/**
 * Replaces "[...]" (appended to automatically generated excerpts) with ... and
 * a 'Read more' link.
 *
 * @return string '... Read more'
 */
function mesmerize_excerpt_more( $more ) {
    if ( ! is_admin() ) {
        return '&hellip; <br> <a class="read-more" href="' . esc_url(get_permalink(get_the_ID())) . '">' . esc_html__('Read more', 'mesmerize') . '</a>';
    }
}
add_filter('excerpt_more', 'mesmerize_excerpt_more');

• No minification of scripts or files unless you provide original files.
  ** Include unminified version of assets/js/HoverFX.min.js
  ** Include unminified version of assets/css/theme-info.min.css

Currently, post bylines look something like this:

by Justin Tadlock on General- August 7, 2010  |  0

The "on" text should probably be "in". You post in a category, not on it.

Additionally, your post byline is showing up on attachment pages and looks like this:

by Justin Tadlock on - July 15, 2011  |  0

• Check inc/template-functions.php line 142, it is missing function print_header_content_holder_class

You need to test all HTML elements within comment text. There's a lot of things that need to be looked at in the screenshot below.

Here's some test code for a comment:

<h2>Headings</h2>
<h1>Header one</h1>
<h2>Header two</h2>
<h3>Header three</h3>
<h4>Header four</h4>
<h5>Header five</h5>
<h6>Header six</h6>
<h2>Blockquotes</h2>
Single line blockquote:
<blockquote>Stay hungry. Stay foolish.</blockquote>
Multi line blockquote with a cite reference:
<blockquote>People think focus means saying yes to the thing you've got to focus on. But that's not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I'm actually as proud of the things we haven't done as the things I have done. Innovation is saying no to 1,000 things. <cite>Steve Jobs - Apple Worldwide Developers' Conference, 1997</cite></blockquote>
<h2>Tables</h2>
<table>
<tbody>
<tr>
<th>Employee</th>
<th class="views">Salary</th>
<th></th>
</tr>
<tr class="odd">
<td><a href="http://example.org/" rel="nofollow">John Saddington</a></td>
<td>$1</td>
<td>Because that's all Steve Job' needed for a salary.</td>
</tr>
<tr class="even">
<td><a href="http://example.org/" rel="nofollow">Tom McFarlin</a></td>
<td>$100K</td>
<td>For all the blogging he does.</td>
</tr>
<tr class="odd">
<td><a href="http://example.org/" rel="nofollow">Jared Erickson</a></td>
<td>$100M</td>
<td>Pictures are worth a thousand words, right? So Tom x 1,000.</td>
</tr>
<tr class="even">
<td><a href="http://example.org/" rel="nofollow">Chris Ames</a></td>
<td>$100B</td>
<td>With hair like that?! Enough said...</td>
</tr>
</tbody>
</table>
<h2>Definition Lists</h2>
<dl><dt>Definition List Title</dt><dd>Definition list division.</dd><dt>Startup</dt><dd>A startup company or startup is a company or temporary organization designed to search for a repeatable and scalable business model.</dd><dt>#dowork</dt><dd>Coined by Rob Dyrdek and his personal body guard Christopher "Big Black" Boykins, "Do Work" works as a self motivator, to motivating your friends.</dd><dt>Do It Live</dt><dd>I'll let Bill O'Reilly will <a title="We'll Do It Live" href="https://www.youtube.com/watch?v=O_HyZ5aW76c" rel="nofollow">explain</a> this one.</dd></dl>
<h2>Unordered Lists (Nested)</h2>
<ul>
	<li>List item one
<ul>
	<li>List item one
<ul>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ul>
</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ul>
</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ul>
<h2>Ordered List (Nested)</h2>
<ol>
	<li>List item one
<ol>
	<li>List item one
<ol>
	<li>List item one</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ol>
</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ol>
</li>
	<li>List item two</li>
	<li>List item three</li>
	<li>List item four</li>
</ol>
<h2>HTML Tags</h2>
These supported tags come from the WordPress.com code <a title="Code" href="http://en.support.wordpress.com/code/" rel="nofollow">FAQ</a>.

<strong>Address Tag</strong>

<address>1 Infinite Loop
Cupertino, CA 95014
United States</address><strong>Anchor Tag (aka. Link)</strong>

This is an example of a <a title="Apple" href="http://apple.com" rel="nofollow">link</a>.

<strong>Abbreviation Tag</strong>

The abbreviation <abbr title="Seriously">srsly</abbr> stands for "seriously".

<strong>Acronym Tag</strong>

The acronym <acronym title="For The Win">ftw</acronym> stands for "for the win".

<strong>Big Tag</strong>

These tests are a <big>big</big> deal, but this tag is no longer supported in HTML5.

<strong>Cite Tag</strong>

"Code is poetry." --<cite>Automattic</cite>

<strong>Code Tag</strong>

You will learn later on in these tests that <code>word-wrap: break-word;</code> will be your best friend.

<strong>Delete Tag</strong>

This tag will let you <del>strikeout text</del>, but this tag is no longer supported in HTML5 (use the <code>&lt;strike&gt;</code> instead).

<strong>Emphasize Tag</strong>

The emphasize tag should <em>italicize</em> text.

<strong>Insert Tag</strong>

This tag should denote <ins>inserted</ins> text.

<strong>Keyboard Tag</strong>

This scarcely known tag emulates <kbd>keyboard text</kbd>, which is usually styled like the <code>&lt;code&gt;</code> tag.

<strong>Preformatted Tag</strong>

This tag styles large blocks of code.
<pre>.post-title {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 38px;
  line-height: 1.2;
}</pre>

<strong>Quote Tag</strong>

<q>Developers, developers, developers...</q> --Steve Ballmer

<strong>Strong Tag</strong>

This tag shows <strong>bold<strong> text.</strong></strong>

<strong>Subscript Tag</strong>

Getting our science styling on with H<sub>2</sub>O, which should push the "2" down.

<strong>Superscript Tag</strong>

Still sticking with science and Isaac Newton's E = MC<sup>2</sup>, which should lift the 2 up.

<strong>Teletype Tag</strong>

This rarely used tag emulates <tt>teletype text</tt>, which is usually styled like the <code>&lt;code&gt;</code> tag.

<strong>Variable Tag</strong>

This allows you to denote <var>variables</var>.

When viewing a password-protected post, the password field and the submit button need some spacing in between them.

When loading the primary style.css file, you should use the core WP get_stylesheet_uri() function to return the correct URI so that you don't break plugins that filter this.

This should change in inc/functions.php:

mesmerize_enqueue_style(
    $textDomain . '-style',
    array(
	'src'     => get_stylesheet_directory_uri() . '/style.css',
	'has_min' => true,
    )
);

• Make following text strings translation ready
  ** customizer\customizer-controls.php line 242 and 243, "Section is already in page" and "Pro Only"
  ** customizer\js\customize.js line 106 "Close Panel", 246 'Choose Images', use {{{wp_localize_script()}}} to translate strings in js files
  ** customizer\SidebarGroupButtonControl.php line 66 "Close Panel"

When a post has both disabled comments and no comments to show, I wouldn't recommend displaying the comment icon and "0".

• Footer Menu, Top Bar Left Menu and Top Bar Right Menu is not working

• Required to use core-bundled scripts rather than including their own version of that script.
  ** Masnory is included in core, use that one instead of adding your own version. Check inc/functions.php line 237

• Drop-down menu arrow directing issue and spacing. Please check the screenshot
  

The default footer link is set to #. That either needs to be a real link or not shown by default.

• md file is empty. Remove it in production version.
• You already have readme.txt file as well.

I wasn't entirely sure what to name this ticket, but I primarily wanted to point out that, at times, the theme code is convoluted and tough to understand. I feel a bit like I'm jumping through unnecessary hoops and backtracking through the code to understand what should be simple concepts.

Most of the issues within the theme related to this deal directly with your theme options code. What I'm going to do is run you through an example.

Let's jump to inc/theme-options.php and take a look at your first action:

add_action('customize_register', 'mesmerize_customize_register', 10, 1);

That's simple enough. You're hooking into the customizer's registration action hook. Let's take a look at that function:

function mesmerize_customize_register($wp_customize)
{

    mesmerize_customize_register_controls($wp_customize);

    do_action('mesmerize_customize_register', $wp_customize);
}

So, now, we're calling another function from within that function. Additionally, the theme itself now has its own sub-action-hook, which is entirely unnecessary. It doesn't add anything useful. It's no different than the core WP hook except that it's actually less useful to use because anything hooked to it is tethered to customize_register at the priority of 10.

And, if you continue following along, things get more nested.

For example, mesmerize_customize_register_controls() breaks its single responsibility by registering control types, loading some control files, and follows up by calling two more functions for doing other things:

mesmerize_add_sections($wp_customize);
mesmerize_add_general_settings($wp_customize);

And, those functions have their own hooks that are used, particularly mesmerize_add_sections(), whose own action hook is utilized elsewhere in the theme.

One of the big things here that'd help is that if you simply hooked everything directly into customize_register. Get rid of your theme's custom action hooks and use customize_register.

Additionally, try not calling functions from within functions. For example, don't call functions for loading customizer settings and customizer sections from within a function designed to create customizer controls. All those things are separate and have their own responsibilities.

If you don't mind, I'd like to link you to the customizer code from one of my own themes to give you an idea of how I've organized my code. This isn't the only way to do it, but I hope it gives you some ideas. https://github.com/justintadlock/extant/blob/master/inc/class-customize.php

This ticket isn't something you necessarily have to fix to pass any guidelines at .ORG or elsewhere. It's just good practice.

• In inc\header-options\navigation-options\top-bar\content-types\social-icons.php line 178 use esc_url() to escape link instead of esc_attr()
• In customizer\customizer-controls.php line 229 use esc_url() to escape $item['thumb'] (img src= value)

One of the hardest aspects of reviewing this theme is that, at times, it's impossible to know if a function is doing what it's supposed to be doing. This is simply because there are no inline PHP comments to let me know what something is supposed to do. Now, of course, with some things, this is obvious. However, with other things, it's not so obvious.

Great developers leave comments that explain everything about their code.

I don't care what documentation standard you use or if you use any at all. I just want you to leave docs for your code. But, I will recommend the core WP PHP documentation standard anyway: https://make.wordpress.org/core/handbook/best-practices/inline-documentation-standards/php/

Not only will documenting help those of us reviewing your code, it'll help others find bugs in the future. And, I can't stress this enough, it'll help you find issues and, perhaps more importantly, understand the code 2, 3, 5 years, or more into the future.

And, just a side note to this: If I were looking through the WordPress.org theme review queue, I'd skip your theme and move on to the next one as a reviewer. I know other good reviewers do this too. From a reviewer's perspective, undocumented code is typically not well-written code, and many reviewers don't want to waste their time. But, that's not really the case with your theme. Compared to many other themes, your code looks fairly solid -- just not documented.

• Calendar Widget issue overflow outside your sidebar
  

Unsplash and Pixabay:

* images/jeremy-bishop-14593.jpg
Source: https://unsplash.com/@tidesinourveins?photo=l61smgU3Y7w - Copyright (c) Jeremy Bishop

* images/photo-1455894127589-22f75500213a.jpeg
Source: https://pixabay.com/en/laptop-desk-scene-computer-1246672/

* images/project1.jpg
Source: https://unsplash.com/@firmbee?photo=jrh5lAq-mIs - Copyright (c) William Iven

I noticed you're using a few images from Unsplash and Pixabay. As of right now, images from those sites are no longer allowed on WordPress.org since both sites changed their licensing to something other than CC0 and incompatible with WordPress.org's policy of 100% GPL compliance.

However, if you do have images from there and the image is definitely under the CC0 license, your .ORG reviewer must have a way of being able verify that.

The easiest course of action is to simply use different images.

Coverr:

* images/Mock-up.jpg - 
Source: http://coverr.co/ ("Mock-up" coverr)

The Coverr.com license is incompatible with the GPL: http://coverr.co/license_and_faq They don't specifically mention images there, but one can assume that images fall under the same license.

Here are the bits that make it incompatible:

This license does not include the right to compile Videos from Coverr.co to replicate a similar or competing service.

And:

Am I allowed to sell or redistribute the videos I download from Coverr?
Good question, no you’re not.
It means that you can’t sell the videos and it also means that if you have a service to which providing videos can help - you’re not allowed to offer Coverr videos, either. This applies to Stock Video sites, Website builders, Themes providers, Mobile apps builders and Video editing services.

Horea Radu images:

The following images are the creation of Horea Radu and are distributed under the Creative Commons Zero License, http://creativecommons.org/publicdomain/zero/1.0/

You need to link to a page where the WordPress.org theme reviewer can verify the license of these images.

• All translation functions must be escaped as sometimes an improper translation may break the html.
• E.g:
  • Almost all instances of __()/_e() need to be esc_html__()/esc_html_e()
    • inc/theme-options.php line 34 becomes
      'title' => esc_html__('Navigation', 'mesmerize'),
  • 'esc_attr__()' where used as attribute values
  • pass via wp_kses() if some html elements are required

Your screenshot has a good 50/50 shot of being allowed on WordPress.org. It's going to depend on your reviewer to be perfectly honest. If I were your reviewer there, I'd ask you to change it.

The big thing here is that the screenshot is really just used for marketing purposes rather than showing what you can do with the theme. If all that sample content in the screenshot were demo content rather than marketing content, I wouldn't give it a second thought.

• Non-breaking text in the title, content, and comments should have no adverse effects on layout or functionality.
• Title and content overflow with long non-breaking text.
  

In my sticky post on the home page, the image is stretched to 100% width of its container. This might be OK if the image was large enough (the theme pulls the small version of the image and then stretches it).

This is caused by the following CSS:

.post-thumbnail img {
    width: 100%;
}

• When changing value of Logo=> Logo Max Height and Logo => Alternate text logo, it shows Invalid Value

Like custom PHP variables, you need to prefix variables in the global JavaScript namespace. In inc/functions.php (line 258), the settings variable must be prefixed:

wp_localize_script($textDomain . '-theme', 'settings', $mesmerize_jssettings);

What WP does when using wp_localize_script() is set your object name as a global variable. So, settings becomes global.

Also, be sure to change this in any relevant JS files as well.

• Change date('Y') to date_i18n( __( 'Y', 'textdomain' ) ) in inc/functions.php line 171

When viewing the posts page but not "page 1", any sticky posts mess up the design. See screenshot below. To test this, try setting an older post to sticky that wouldn't normally show up on the first page.

• It is a good idea to prefix custom filters and action hooks with theme slug
• Check following for filters:
  • header_top_bar_class line 62 in inc\header-options\navigation-options\top-bar.php
  • mesmerize-copyright line 169 in inc\templates-functions.php
    • Here, use {{{mesmerize_copyright}}}, for consistency
  • the_mesmerize_pagination_navigation_markup_template line 228 inc\templates-functions.php
    • Again for consistency
  • is_shortcode_refresh inc\templates-functions.php line 299
  • Same consistency issues with mesmerize-hero-vertical-align, mesmerize-hero-content-vertical-align, mesmerize-hero-media-vertical-align
• Check following for action hooks:
  • header_top_bar_content_print line 42 inc\header-options\navigation-options\top-bar.php

• This is only required if you are submitting theme in WordPress.org otherwise just ignore it.
• For wordpress.org, make sure you add at least one subject tag as theme tag, at-most three. For details on which theme tags are allowed and subject tags, go here: https://make.wordpress.org/themes/handbook/review/required/theme-tags/

• Use the_posts_pagination() instead of mesmerize_print_pagination()
• Check inc/template-functions.php function mesmerize_print_pagination

In inc/footer-options/content.php, you have the mesmerize_footer_templates filter hook, which allows plugin or child theme authors to overwrite the footer template choices.

This presents a problem in the mesmerize_footer_filter() function in this line of code:

wp_enqueue_style( $textDomain . '-' . $footer_template . '-css', get_template_directory_uri() . "/assets/css/footer-$footer_template.css", array( $textDomain . "-style" ) );

You're attempting to enqueue a file that doesn't exist if there are custom templates.

That's not going to cause any errors with wp_enqueue_style(), but I thought I'd point it out from a logic perspective in case you wanted to figure out a more flexible solution in that scenario.

The separator in the front page should keep aspect ratio, else on small devices or small window it vertically stretch and hide the page title.