wpcolor

<p>This is an all around plugin that allows you lots of control on how your front page, posts, pages and website looks. It can enhance the look of your front page or make a website look like a professional magazine or news website.</p>
<h4>Usage</h4>
<p>By posting a short code on a page you can display a layout. A layout is anumber of posts than can be themed. Each layout can be edited with a number of options such as how many posts to show, image options, text options, adding effects and much more. This allows for the creation of a front page, sub pages, blog, category pages or widgets. A front page can be made looking like a magazine or a news website. Several effects can be added such as pop up, text over image and image swap effects.</p>
<h4>Example front page</h4>
<p>http://1customize.com</p>
<h4>Example blog page</h4>
<p>http://1customize.com/blog-example/</p>
<h4>Example uses</h4>
<ul>
<li>Create a great news, magazine or business looking front page</li>
<li>Enhance the look of your website or blog</li>
<li>Create widgets such as top posts or latest posts etc</li>
<li>Create complex sub pages</li>
</ul>
<h4>Features</h4>
<ul>
<li>Build a front page, sub pages, create widgets to make your website look great</li>
<li>Change image size, position, width & height</li>
<li>Change font size, colors of title & excerpt, etc</li>
<li>Change excerpt length of your posts</li>
<li>Easy visual post layout editor with up to 20 layouts</li>
<li>Add cool Jquery Effects</li>
<li>CSS style allows you to change all aspects</li>
<li>Add Image, Title, Excerpt, Categories, Tags, Author, Date, Post info and more</li>
<li>Add Pagination, filters, spacing and other features</li>
</ul>
<h4>Effects</h4>
<ul>
<li>Image changes to another image when hover over with mouse</li>
<li>Image changes to another image automatically (simple slideshow)</li>
<li>Image fades when hover</li>
<li>Background color effect marks the post you are hovering over</li>
<li>Put text over image</li>
<li>Put text in a pop up</li>
</ul>
<h4>Introduction</h4>
<p>This plugin works by using layouts. A layout is basically a list of posts that can have a specific look. The layout (or the posts) can then be displayed on a page, post or widget. To display it a short code is used. For example to display layout 1 the following short code can be used:</p>
<p>[sitecreator show=”1″]</p>
<p>Up to 20 layouts that can be used but sometimes you only need one. The layout in its default state will show 3 posts with a simple layout with no filters or effects which is a starting point. To this more elements, filters and effects can be added.<br />
To display several layouts in one page, simply add several short codes after each other For example:</p>
<p>[sitecreator show=”1″] [sitecreator show=”2″] [sitecreator show=”3″]</p>
<h4>Example: How do I create a new front page?</h4>
<p>By adding one or several layouts on a page we can create a great news, magazine or business looking front page. To display the layouts we have to use a shortcode for each of the layouts. You also need to change the look of each layout you use by changing options such as image size, number of posts to show, etc. In this example we will use one layout.</p>
<ol>
<li>Edit the layout 1 to your liking (assuming you are not using it already). Here you can change the look of the layout by changing image size, number of posts to show, etc.</li>
<li>Create a new page. Click on “add a new page” which will be your new front page</li>
<li>Display the layout you created in step 1 by adding a short code. If we are using layout 1 the short code will be [sitecreator show=”1″]</li>
<li>If you want to make the page you created a front page go to Settings -> Reading Settings and mark the static page. In the drop down list, choose the page you just created</li>
</ol>
<h4>Example: How do I create a new blog page?</h4>
<p>For a blog (which is simply a list of the newest posts) we only need one layout. Add pagination and set posts to show to around 10 posts. The page can be made a front page or be added as a menu item.</p>
<ol>
<li>Edit the layout 1 to your liking (assuming you are not using it already). Here you can change the look of your blog by changing image size, number of posts to show, add pagination, etc.</li>
<li>Create a new page. Click on “add a new page” which will be your new front page</li>
<li>Display the layout you created in step 1 by adding a short code. If we are using layout 1 the short code will be [sitecreator show=”1″]</li>
<li>If you want to make the page you created a front page go to Settings -> Reading Settings and mark the static page. In the drop down list, choose the page you just created</li>
</ol>
<h4>Example: How do I create a widget?</h4>
<p>The plugin also allows you to create different type of widgets. Example of widgets:</p>
<ul>
<li>display the latest posts</li>
<li>random posts</li>
<li>post from a certain category</li>
<li>posts from a certain author</li>
<li>most commented/popular posts. </li>
</ul>
<p>The widget can be customized with nice, visual image effects. In this example we will create a widget to show the latest posts from a certain category.</p>
<ol>
<li>Choose layout 1 or a layout you have not used yet</li>
<li>Change the layout to your liking by adding title, excerpt and changing image size etc. Important: Make sure that the image and the post is small enough to fit into your sidebar!</li>
<li>Under “Show posts only from category” select the category you want show posts from</li>
<li>Savet the layout</li>
<li>We have now created a layout. To create a widget with this layout we need to do the following: Under Appearance -> widget drag a text widget (that allows you to add arbitrary text or HTML) to your desired sidebar.</li>
<li>Add a title to the widget and copy the short code [sitecreator show=”1″] (if using layout 1) into the bigger text field and save. The widget should now show up.</li>
</ol>
<h4>More examples</h4>
<p>Site creator Ultimate also allows the posts to be ordered in a tablet friendly fashion. Example:</p>
<p>http://1customize.com/tablet-friendly-page/</p>
<h4>Theme Compability</h4>
<p>The plugin has been tested with a number of themes but there might be some themes that will need some CSS tweaking to work properly.</p>
<p>Read the FAQ for more info</p>
<h4>Site Creator Ultimate vs Site Layout Customizer</h4>
<p>What is the difference? Site Creator is much more advanced with more options, filters and uses jquery effects while site layout customizer does not. Also the CSS works differently and now uses classes instead of ids. Up to 20 layouts can be used instead of 4. The code base have been redone and the plugins are not compatible with each other. For simpler tasks the Site Layout Customizer plugin can be used, for more control and features use this plugin instead.</p>


Site Creator Ultimate

Enhance the look of your website or create a great looking front page. Make your…

miunosoft

Michael Uno

<h4>Show Responsive Columns in Posts with Widgets</h4>
<p>Do you want to arrange widgets horizontally? If so, this plugin may be the solution for you.</p>
<p>Add desired widgets to the custom sidebar the plugin creates and set up an auto-insert.</p>
<p>If you are a developer and looking for an easy way to render some outputs in responsive columns, this plugin will be handy. Pass your arrays to the plugin filter. Then the plugin will take care of it for you.</p>
<h4>How It Works</h4>
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="640" height="360" src="https://www.youtube.com/embed/vo36sW7W35Y?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"></iframe></span>
<p>Steps</p>
<ul>
<li>Add widgets.</li>
<li>Enter the number of columns.</li>
<li>Enable Auto-insert or insert the shortcode.</li>
</ul>
<h4>Displays Widgets in Columns</h4>
<p>The plugin will let you display widgets horizontally with a grid system. This is the main feature of the plugin.</p>
<h4>Responsive Design for Mobile Visitors</h4>
<p>When the browser width changes, it automatically adjusts the layout. This is important for tablet and mobile visitors.</p>
<h4>Set Number of Columns per Row</h4>
<p>You can flexibly set the number of columns in each row.</p>
<h4>Set Number of Columns by Screen Width</h4>
<p>Flexibly set the number of columns by browser width. In other words, you can control the number of columns for particular screen widths.</p>
<h4>Show Responsive Columns Everywhere</h4>
<p><strong>Auto-insert</strong></p>
<p>Take advantage of the Auto-insert feature which automatically inserts the defined widget box to your desired location. You don’t have to use the shortcode.</p>
<p><strong>PHP code and Shortcode</strong></p>
<p>Use PHP code in the theme template or the shortcode in posts.</p>
<h4>Default Sidebars Integration</h4>
<p>Sidebars defined by your theme also can be displayed in columns.</p>
<h4>Create Complex Columns</h4>
<p>Achieve more advanced complex design by taking advantage of the options that the plugin provides.</p>
<p>Nesting Sidebars</p>
<p>This is <em>widgets in widget</em> functionality. With the widget that the plugin provides, the whole sidebar contents can be embedded as a widget item into another sidebar.</p>
<p>Column Span</p>
<p>Column spans are configurable so that you can set wider widget areas.</p>
<h4>For Developers</h4>
<p>Custom Array</p>
<p>If you can code, you can pass an array to the plugin’s filter so that your array contents can be rendered in multiple columns instead of widgets.</p>
<p>See <a href="https://wordpress.org/extend/plugins/responsive-column-widgets/other_notes/" rel="ugc">more</a>.</p>
<h4>Basic Three Steps</h4>
<ol>
<li>Go to Appearance > Widgets. You’ll see a new custom sidebar box named <strong>Responsive Custom Widgets</strong>.</li>
<li>Add widgets to it.</li>
<li>To display the added widgets in a post, there are mainly two different means.</li>
</ol>
<ul>
<li>
<p><strong>Option A</strong>: add the shortcode in the post.</p>
<p>[responsive_column_widgets]</p>
</li>
<li>
<p><strong>Option B</strong>: use the auto-insert feature by enabling the <strong>Enable Auto-insert</strong> option in the plugin setting page, <strong>New / Edit</strong>.</p>
</li>
</ul>
<h4>Specify Different Number of Columns in Each Row</h4>
<p>By default, the widgets are displayed in 3 columns. It can be changed by setting the columns parameter.</p>
<pre><code>[responsive_column_widgets columns="4"]  will display the widgets in 4 columns. 
</code></pre>
<p>Optionally, if you like to change the number of columns in each row, use sequential numbers separated by commas.</p>
<p>For instance,</p>
<pre><code>[responsive_column_widgets columns="3,2,5"] will show the widgets in 3 columns in the first row, 2 columns in the second, and 5 to the third. Change the numbers accordingly for your needs.
</code></pre>
<p>To set the number of columns for each screen max-width, use the pipe (|) character as the delimiter and place the width in pixel followed by a colon (:). Omit the width for no limitation. For instance,</p>
<pre><code>[responsive_column_widgets columns="5 | 800: 4 | 600 : 2 | 480: 1"] will show the widgets in 5 columns when the browser widths is greater than 800, and 4 when the browser width is 800 to 601, and 2 when the browser width is 600 to 481, and 1 when the browser width is less than or equal to 480.
</code></pre>
<h4>Use PHP code for Themes</h4>
<p>The widget box can be displayed outside post/pages. Putting a PHP code into the theme is one way of doing it. Use the <code>ResponsiveColumnWidgets()</code> function.</p>
<p>For instance,</p>
<pre><code><?php if ( function_exists( 'ResponsiveColumnWidgets' ) ) ResponsiveColumnWidgets( array( 'columns' => 5 ) ); ?> will display the widgets in 5 columns.
</code></pre>
<h4>Parameters</h4>
<p>There are other parameters besides <em>columns</em>.</p>
<ul>
<li><strong>columns</strong> – the number of columns to show. Default: 3. If you want to specify the number of columns in each row, put the numbers separated by commas. For instance, 3, 2, 4 would display 3 columns in the first row and 2 columns in the second row and four columns in the third row and so on. The rest rows follow the last set number. To set the number of columns by screen max-width, use the colon(:) character after the width, and use the pipe (|) character to delimit each set of number of columns. If the pixel is omitted, it is considered no limit. If the pipe delimiter is not present, the plugin will add 600: 1 internally by default.</li>
</ul>
<p><strong>Format:</strong></p>
<pre><code>column value | pixel: column value | pixel: column value | ... 
</code></pre>
<p>The following example displays widgets in 5 column when the browser width is greater than 800, and four when the width is 601 to 800, and three when the width is 481 to 600, and one when the width is 1 to 480.</p>
<pre><code>5 | 800: 4 | 600: 3 |480: 1
</code></pre>
<ul>
<li><strong>sidebar</strong> – the ID of the sidebar to show. Default: responsive_column_widgets. For the twenty-twelve theme, sidebar-1, would show the default first sidebar contents. </li>
<li><strong>maxwidgets</strong> – the allowed number of widgets to display. Set 0 for no limitation. Default: 0.</li>
<li><strong>maxrows</strong> – the allowed number of rows to display. Set 0 for no limitation. Default: 0.</li>
<li><strong>omit</strong> – the numbers of the widget order of the items to omit, separated by commas. e.g. <strong>3, 5</strong> would skip the third and fifth registered widgets.</li>
<li><strong>showonly</strong> – the numbers of the widget order of the items to show, separated by commas. e.g. <strong>2, 7</strong> would only show the second and seventh registered widgets. Other items will be skipped.</li>
<li><strong>label</strong> – the label name of the widget box. Default: Responsive Column Widgets.</li>
<li><strong>colspans</strong> – the column spans. This determines how wide the specified widget item is.</li>
</ul>
<p><strong>Format:</strong></p>
<pre><code>widget index - column span, widget index - column span, widget index - column span, ...
</code></pre>
<p>The following parameter value of <em>colspans</em> will set the first widget with 3 column space and the fourth widget with two column space and the seventh takes four column space. Unspecified widget items will have one column span.</p>
<pre><code>1-3, 4-2, 7-4
</code></pre>
<p>To set them by screen max-width, like the <em>columns</em> parameter, use the colon(:) character after the width in pixel, and use the pipe (|) character to delimit each set of column spans. If the pixel is omitted, it is considered no limit. These widths need to correspond to the value passed to the <em>columns</em> parameter. e.g.</p>
<pre><code>1-3, 4-2, 7-4 | 600: 1-2, 3-2, 7-3 | 480: 1-2
</code></pre>
<p>If the column span exceeds the set number of max column, the column span will follow the max column. Note that the widget index of omitted widgets will not be considered(counted) in the widget index of this parameter.</p>
<ul>
<li><strong>cache_duration</strong> – the cache lifespan in seconds which determines how long the cache remains. Default: 0. e.g. <code>3600</code></li>
<li><strong>call_id</strong> – this is for developers. This is used to identify the callback when a plugin hook is used so that the callback method assigned to the hook can know if it is theirs or not. This parameter does not affect the style based on the parameter values.</li>
</ul>
<h4>Render Custom Array in Multiple Columns</h4>
<p>If you are a developer, you can render array contents that hold string values in multiple columns with responsive design.</p>
<p>Let’s take a look at an example. First, insert this shortcode in a post or a page.</p>
<pre><code>[responsive_column_widgets call_id="days" columns="7"]
</code></pre>
<p>The value for the <em>call_id</em> parameter can be any string that identifies the call.</p>
<p>Now we need to hook into the <strong><em>RCW_filter_widget_output_array</em></strong> filter so that we can intervene the process of plugin’s rendering widgets. It accepts two parameters. The first one will be the output array and the second one is the parameter array.</p>
<p>In the callback function for the filter, we check if the parameter <em>call_id</em> holds the correct value. You should change the value to suite your needs, which should be unique and not conflict with others.</p>
<pre><code>add_filter( 'RCW_filter_widget_output_array', 'RCW_CustomArrayOutput', 10, 2 );
function RCW_CustomArrayOutput( $aOutput, $aParams ) {

    if ( ! isset( $aParams['call_id'] ) ) {
        return $aOutput;
    }

    if ( 'days' === $aParams['call_id'] ) {
        return array( 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday' );
    }

    return $aOutput;
}
</code></pre>
<p>This will display the days in 7 columns. The plugin will generate the CSS rules based on the parameter values. And the rules will be inserted inside the body tag.</p>
<p>If you like to insert the style in the head tag, use the <em>ResponsiveColumnWidgets_EnqueueStyle</em> function. Tell the function that which parameters are going to be used.</p>
<pre><code>add_filter( 'wp_loaded', 'RCW_CustomArrayAddStyle' );
function RCW_CustomArrayAddStyle() {
    if ( function_exists( 'ResponsiveColumnWidgets_EnqueueStyle' ) ) {
        ResponsiveColumnWidgets_EnqueueStyle( array( 'columns' => "7" ) );
    }
}
</code></pre>
<p>Note that <code>'call_id' => 'days'</code> can be omitted. The other parameters should not be omitted.</p>
<p>For cases that the shortcode is not used, you can use the <em>ResponsiveColumnWidets()</em> function.</p>
<pre><code>$aYourArray = array( 'a', 'b', 'c', 'd' );
if ( function_exists( 'ResponsiveColumnWidets' ) ) {
    ResponsiveColumnWidets( 
        array( 'columns' => 4  ), 
        $aYourArray 
    );
}
</code></pre>
<p>This will output <code>a, b, c, d</code> in four columns.</p>
<h4>Video Tutorials</h4>
<p>http://en.michaeluno.jp/responsive-column-widgets/tutorials/</p>


Responsive Column Widgets

Show Responsive Columns in Posts with Widgets

Site Creator Ultimate vs Responsive Column Widgets