projectcleverweb / semantic-ui-wordpress Goto Github PK

When using Semantic-UI-WordPress with WordPress 4.1, strange things happen to the Editor/TinyMCE.
To illustrate the behavior, please see the attached screenshots.

As long as add_editor_style('assets/styles/semantic.min.css'); is enabled, the Editor behaves in strange ways.
For example, for every mouseclick you trigger inside the Editor, a linebreak witll be inserted.
The same goes for entering content. For every character you insert, a linebreak will be added below the text.

It looks like passing the semantic.css to tinymce causes some trouble with how tinymce constructs the editor.

Any way to remove the wpfooter on each page in the wp-admin?

<div id="wpfooter" role="contentinfo">
		<p id="footer-left" class="alignleft">
				</p><div class="ui center aligned two column grid inverted segment">
			<div class="column">
				<h2 class="ui inverted header">
					Thank You!
					<div class="sub header">If you found this WordPress theme useful, please consider donating:</div>
				</h2>
				
				<p>
					<a class="ui tiny basic inverted blue button" target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=2WLFNB3UMSELN">Donate $5</a>
<a class="ui tiny basic inverted blue button" target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=J42MM3FSZTPPQ">Donate $10</a>
<a class="ui tiny basic inverted blue button" target="_blank" href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=DPSN8V5VVMHTA">Custom Donation</a>
				</p>
			</div>
			<div class="column">
				<h2 class="ui inverted header">
					Having Issues?
					<div class="sub header">If you have any problems or discover any bugs let us know!</div>
				</h2>
				<a class="ui tiny basic inverted blue button" target="_blank" href="https://github.com/ProjectCleverWeb/Semantic-UI-WordPress/issues">Issue Tracker</a>
				<a class="ui tiny basic inverted blue button" target="_blank" href="http://semantic-ui.com/">Semantic UI Docs</a>
				<a class="ui tiny basic inverted blue button" target="_blank" href="http://jsfiddle.net/efp8z6Ln/">Test Code</a>
			</div>
		</div>
			<p></p>
	<p id="footer-upgrade" class="alignright">
		Version 4.7.4	</p>
	<div class="clear"></div>
</div>

After installing this theme in Wordpress 4.3.1, i had a very annoying problem. Whenever i was editing posts or pages, the editor kept growing on every key-press, mouse click, mouse move and other events.
I don't know exactly what causes the problem, but the solution according to [1] is to add the following css statement:

body#tinymce {height:auto !important;}

I also posted this to the wordpress forum [2].

Regards,
Andreas

[1] - http://thisishow.info/wordpress-tinymce-editor-window-height-grows-when-clicking-inside-or-moving-cursor
[2] - https://wordpress.org/support/topic/texteditor-height-increases

Screenshots would probably be sufficient (and quick to add!) but a demo (even just using static pages, rather than an actual WP installation) would be nice. You'll get more adoption if people can look at something that takes a second to get to, rather than something that requires them to do set up for first.

Sorry this is definitely not an issue per se but I am trying to figure out a good workflow for the theme. Where do you currently have the files reside in relation to your WordPress install. I am trying to have it build to the themes directory but it sort of needs me to have those within the working directory. Otherwise its an error that I cannot modify files or folders outside the working directory.

Please, I made a child theme out of semantic-UI-WordPress theme, however when I try uploading images or any media, it fails to upload. Please Can I get some help with this issue. Thank you.

Any time I try to upload media assets I get an error or try and use the media library when this theme is activated the media library pop over just hangs and doesn't load any images.

Hi,

I just wanted to play around with it, but upon activating I got an error:

unexpected T_STRING in /scripts/sui.php on line 12

I'm running PHP Version 5.2.17

Hi Nick
I tested a popup, it doesnt work, when i trying to initialize.

markup:

jquery:
$('.textwidget .heart.icon')
.popup({
on: 'click'
})
;

error says it's not a function. Do i miss something?

Same with the modal.
Is there any other way to call it?

Although THA (Theme hook alliance) don't have a massive following it would be good to have it included in this build, THA have hooks that don't exist by default yet in WP, for example after body, more info can be found on the GitHub page
https://github.com/zamoose/themehookalliance

This is a generic answer to why I may go from several commits per day to none for a few days.

Typically it is due to 1 or more distractions. Each distraction typically will only last a few days to a week, and is overall beneficial to the project, as it allows me to take a break and get a fresh perspective. This often leads to more features and less bugs.

P.S.

On a completely unrelated note, it is purely coincidence that I bought Assassins Creed: Black Flag just before the commits slowed down. Furthermore, that game is no way addicting, and I would not waste hours of my day pillaging, just for the sake of upgrading my ship.

The include/require constructs exist in PHP in a protected and tuned way that a theme living inside of WordPress cannot compete with.

See also: https://core.trac.wordpress.org/ticket/32845

Because each method is unique, and each one extracts all $GLOBALS into local scope, and each is called multiple times, this stampedes out of control very quickly.

Everything should go back to using PHP's built in include & require methods to make this theme usable again.

I added SUI-WP to a clean WP install for testing.

I'm seeing the Developer Notes aka the Getting Started Page but the content is all placeholder images with Lorem Ipsum text.

Is that what I should be seeing? You appear to have gone to quite a bit of trouble to organise the docs, it looks like the content is missing.

It's almost impossible to learn how this theme works because it needlessly duplicates WordPress's core template location & loader functions.

The benefit of Semantic UI is it's convenience, and the prerequisite of needing to unwind this additional duplicated logic undoes that.

I'd like to see this go back to using WordPress's core functions, and let a theme author decide if something more sophisticated is necessary for their project.

Hi Guys, thank you for creating this for Wordpress.

is there any difference between example from semanti-ui ;ie ; homepage.html and feed.html, it seem for the responsive looks like not the same feel like the semantic-ui.

Where is the sidebars menu ? and when i'm viewing this theme on mobile; i don't know why is so many gaps between left and right sides ? thanks advise

After default build Media library will brake.
Easiest way to reproduce is to build and activate the theme then go to media library and try to view the grid, page will continue to load without displaying grid, change theme and grid loads fine.

No design layout is showing at all.

Not sure if menu_walker has a bug, currently you can't evenly divide the menu as

// now display
        echo "<div class=\"ui menu\"><nav class=\"$the_class\" id=\"$the_id\" role=\"navigation\">$items</nav></div>".PHP_EOL;

in menu_walker.php have a parent div class with "ui menu" and then a nav class with "menu".
To my understanding the Semantic documentation mentions it should be

// now display
        echo "<nav class=ui \"$the_class\" id=\"$the_id\" role=\"navigation\">$items</nav></div>".PHP_EOL;

Under "Evenly Divided" at
http://semantic-ui.com/collections/menu.html

The demo site shows us a broken menu - it is not responsive, does not adapt to small screens and is broken in a way that menu items go off the screen. This is not very clever.

Hi there,
Just wondering if there is a specific reason that you enqueue all the scripts in the header rather than the footer?
Thanks,
Gary

Hi,

is there any way to config the theme to work with drop-down menu it is not working

thank's

There are a few places where $GLOBALS is extracted into local scope. This duplicates the data stored in all global variables and causes huge memory spikes resulting in out-of-memory issues.

Using default theme with no updates and switching off "Show first-run" causes a memory issue with the query vars on template_part_load.php when trying to load the site.

I'm not sure if this involved with your wordpress project or not.
But I wasted 14 hours with this problem.

Use $_POST/$_GET by AJAX to send data back to index.php
I always get empty no matter what.

Here's a example

Jquery part: (This is in head.js ready function)

$('#side_menu ul li a').click(function(e) {
                    e.preventDefault()

                    var pageId = $(this).first().attr('id');
                    var pageurl = $(this).attr('href');

                    if (pageId != null) {
                        // send the pageId
                        $.ajax({  
                            type: 'POST',
                            url: pageurl,
                            cache: false,
                            data: "page_get="+pageId,
                            success: function() {
                                console.log( 'page_id: ' + pageId + " sent!");
                            },
                            error:function() {
                                console.log("AJAX request was a failure");
                            }
                        });
                });

As you can see I try to get a href id by clicking it and the success function is working.

Next is in php part:

$page_name = (!empty($_POST['page_get'])) ? $_POST['page_get'] : 0;

The result of this $page_name is 0 no matter what.
If I check is it empty. it's empty.

BUT the interesting part is Chrome Debugging Console is really show the correct result.

If this is not an issue. So I need some help with this problem.
I'd appreciate it if you can help.

Hi Nick
Just wanted to share with you my responsive addition to the project.

header

            <header class="ui page stackable grid" id="main-header-grid">
                <div class="eleven wide column header-menu">
            <!-- logo -->
            <a class="main-brand-link" title="<?php echo get_bloginfo('description'); ?>" href="<?php echo home_url(); ?>">
                <img src="<?php echo get_template_directory_uri(); ?>/images/p15-logo.svg" alt="Logo" class="main-brand" alt="pixel15">
            </a>
            <!-- /logo -->
                    <?php
                    /*
                     * A simple but effective way to display a menu as a Semantic UI menu
                     */
                    $main_menu_loc = 'main-menu';
                    if (has_nav_menu($main_menu_loc)) {
                        $main_menu = wp_nav_menu(array(
                            'theme_location'  => $main_menu_loc,
                            'container'       => 'div',
                            'menu_class'      => 'ui red inverted menu',
                            'echo'            => false,
                            'items_wrap'      => '<nav class="%2$s">%3$s</nav>',
                            'depth'           => 1,
                        ));
                        $main_menu = str_replace('menu-item ', 'menu-item item ', $main_menu);
                        $main_menu = str_replace('><a href="', ' href="', $main_menu);
                        $main_menu = str_replace("</a></li>\n<li ", "</a>\n<a ", $main_menu);
                        $main_menu = str_replace('"><li ', '"><a ', $main_menu);
                        $main_menu = str_replace("</li>\n</ul>", "</a>\n</nav>", $main_menu);
                        echo $main_menu;
                    }
                    ?>
                </div>
             <div class="five wide column header-search"><?php get_search_form() ?></div>
                <div id="nav-trigger" class="navbar-toggle"><i class="reorder icon"></i></div>
                <div class="mobile-navigation">
                    <div class="mobile-menu"></div>
                    <div class="mobile-search"><?php get_search_form() ?></div>
                </div>
            </header>

css

.main-brand-link{
    float:left;
    height: 50px;
}
.ui.wide.input{
    width:100%
}
.ui.grid>.column.header-search{
    margin:7px 0;
}
.ui.grid>.column.header-menu{
    margin:0;
}
.mobile-menu .main-brand-link{
    display:none;
}
.mobile-menu .ui.vertical.menu{
    width:100%;
}
.navbar-toggle{
    font-size:30px;
    display: inline-block;
float: right;
margin-top: 10px;
}
.mobile-navigation{
    display:none;
    font-size: 1rem;
}
  .navbar-toggle {
    display: none; 
    cursor: pointer;
}
.mobile-search{
    padding: .83em .95em;
}
#main-header-grid{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    user-select: none;
}
.mobile-navigation.expanded{
    display: none;
}
/* =Media Queries
-------------------------------------------------------------- */
@media all and (max-width: 1000px) {
    .ui.grid>.column.header-search{
    display: none!important; 
    }
.ui.stackable.grid>.column.header-search{
    display:none!important;
}

  .header-menu>div  {
    display: none; 
}
  .navbar-toggle {
    display: block; 
} 
#main-header-grid .column.header-menu{
    display: inline-block!important;
}
}

javascript

$(document).ready(function() {

    $(".mobile-menu").html($(".header-menu").html());
    $(".mobile-menu nav").addClass("vertical");

    $("#nav-trigger").click(function(){
            if ($(".mobile-navigation").hasClass("expanded")) {
                $(".mobile-navigation.expanded").removeClass("expanded").slideUp(250);
                 $(this).removeClass("open");
                $(this).children().removeClass("close");
            } else {
                $(".mobile-navigation").addClass("expanded").slideDown(250);
                $(this).addClass("open");
                $(this).children().addClass("close");
            }
        });
$( window ).resize(function() {
    if ($(".mobile-navigation").hasClass("expanded")){
    $(".mobile-navigation").removeClass("expanded").slideUp(250);
                  $("#nav-trigger").removeClass("open");
                 $("#nav-trigger").children().removeClass("close");
    }
});
});

Thanks:)

Testing SUI-WP on a clean WP install.

Have created a new menu and set it to display in both locations – Main menu & Footer menu – but it is not showing up in either.

Resonsive -> Responsive

since there's no source file for it, I just leave my message here

Hello Nicholas
Love your Semantic UI for Wordpress! Great Job!
Is there anyway to add search to the header?
Sorry i am currently in learning curve:)
Another question: is this wordpress framework base is totally custom or you based on something? I just want to learn about it a bit. Seems like little different from other frameworks. Thanks man

Hi,
This theme installs ok, but I get 10 or so of these strict notices for calling non-static methods from a static context.
What should I do about this?
Thanks a lot,
Gary