Creating Drop-Down Menu For Custom Wordpress Theme - css

I'm trying to build a Wordpress theme from scratch. The drop down menu isn't appearing, although I added the list pages tag. Here is the code I'm using for the wp_nav_menu function.
<?php wp_head(); ?>
</head>
<body>
<div class="nav">
<div class="container">
<ul class="pull-left">
<li class="cursive">Mu Alpha Theta</li>
</ul>
<?php wp_nav_menu( array('menu' => 'Menu' )); ?>
</div>
</div>
The pages appear on the site's menu; however, they aren't merging into a drop-down. I'm wondering if it has something to do with the CSS. As in, do I have to create a structure for how it would look? Or, I'm thinking that I'm misusing th wordpress function.
Thank you for reading my questions. I would love to hear any advice.

If it's placing, but not as you want (in a drop down) it would seem to be a css issue. There are many arguments you can parse to the function outlined here in the codex. From there it's just using the id's/classes and css to get the display you're looking for.
Also, from that codex page:
Note: As of 3.5, if there are no menu items, no HTML markup will be
output.
So ensure there is some items in your menu as well, even for testing.
Depending on how fancy you want to be, you may need a custom Walker. Caveat emptor: they are not for the faint of heart.

Related

WooCommerce: Add class to Related Product Loop item <ul class="products columns-4 owl-carousel four-col">

I want to add some Owl Carousel Classes to the Related Products from <ul class="products columns-4"> to <ul class="products columns-4 owl-carousel four-col"> in the Unordered List, in the single product page.
The CSS classes I want to add are owl-carousel four-col.
Doing this I know requires some knowledge of WordPress hooks and filters.
Any idea on how to implement this will be appreciated :)
As far as I know there is no filter available to modify classes set to <ul class="products"> element.
This element is actually rendered with WC template templates/loop/loop-start.php and this template is called with woocommerce_product_loop_start() function. This is a pluggable function, meaning you can override it in your active theme/child-theme.
The better and simpler way would be to modify the related template directly, located in templates/single-product/related.php (learn how to properly override WC templates in your child-theme, do NOT modify WC source templates directly in plugin's folder).
It should be enough to replace this line in the related template:
<?php woocommerce_product_loop_start(); ?>
with this line:
<ul class="products columns-4 owl-carousel four-col">
Another approach would be to set those classes dynamically with jQuery, but I'm not sure whether it would work well with Owl Carousel (it might not load properly).

Wordpress Theme Overriding Plugin

I installed a plugin for a dropdown menu (Max Mega Menus) but my wordpress theme (Spacing) is overriding it. I followed the instructions on the MMM website on removing residual styling so that the plugin would work but when I deleted the codes as instructed (I think I picked the right one) then the menu disappeared altogether. Here are the instructions I was following: https://www.maxmegamenu.com/documentation/faqs/removing-residual-styling/
Here is the current coding. I tried deleting every combination of things besides the wp_nav_menu part, as instructed.
<div id="header">
<div id="wrapper">
<div class="container clearfix">
<div id="navigation">
<?php wp_nav_menu(array('menu' => 'custom_menu')); ?>
<?php if($of_option['st_responsive']) responsive_select_nav() ?>
</div>
</div>
</div>
Please go to Mega Menu > General Settings > Menu Locations. You'll see a list of menu locations that your theme has registered. Expand the one for the top menu and copy the PHP include code. Then replace the call to wp_nav_menu in your header.php file with it.
In short, your wp_nav_menu call is missing the required 'theme_location' argument.

How do I create different editable sections within a WordPress page?

I have been building my first theme on WordPress and have run into problem while adding content into different sections.
My HTML is somewhat like this,
<div id="maintext">
<-- Text -->
</div>
<div id="products">
<-- Text and Images -->
</div>
<div id="about_company">
<-- Text boxes -->
</div>
How do I make sure the content added via the WordPress editor falls under the respective divs ? For the "maintext" div I'll load the content from the page itself but how do I add content to the other 2 divs dynamically ?
I searched on a couple of forums and many suggested to add content using widgets, is there any way it can be done without using widgets ?
Any help will be gladly appreciated.
Unfortunately adding multiple editable fields in a single page is not particularly easy using WordPress by itself.
Many WP devs I know (myself included) rely on the Advanced Custom Fields Plugin for additional content fields.
The steps to make this happen:
1) Install the ACF the plug.
2) In the settings area for ACF create some new fields.
3) Assign the new fields to appear for a specific page or set of pages.
4) Update your page-template for the given page(s) so that the new fields are displayed.
For instance you might create a set of standard wysiwyg fields and then assign them to the 'overview' page. Let's call these fields: main_text, products_info and about_company. Once the fields have been created and assigned to a page, when you edit that page the additional fields will be available to edit.
For these new fields to be seen by visitors, they must be added to the page-template you use for your overview page. The code could be something like this:
<div id="maintext">
<!-- Text -->
<?php if(get_field('main_text')){ //if the field is not empty
echo '<p>' . get_field('main_text') . '</p>'; //display it
} ?>
</div>
<div id="products">
<!-- Text and Images -->
<?php if(get_field('products_info')){ //if the field is not empty
echo '<p>' . get_field('products_info') . '</p>'; //display it
} ?>
</div>
<div id="about_company">
<!-- Text boxes -->
<?php if(get_field('about_company')){ //if the field is not empty
echo '<p>' . get_field('about_company') . '</p>'; //display it
} ?>
</div>
There are lots of good examples here. If you are feeling really ambitious, rather than install the plugin you could even include ACF directly in your theme.
You've got three options I believe:
Create a widget area where you can then display the content in a text widget: http://codex.wordpress.org/Function_Reference/register_sidebar
Create a template where you then get the content of a different page: http://codex.wordpress.org/Page_Templates#File_Folders
Create a new meta box for all your pages: http://codex.wordpress.org/Function_Reference/add_meta_box
I believe that the thing you are looking for is option 2. The others are more full-site oriented, if you want the extra content to show up on every single page.
If you are writing the theme, maybe you would like to consider using a WordPress Framework so you don't have to start from scratch.
If that is not the case, think of the end user. How will they add sections to pages and posts? Will they have to move across places within the WordPress UI, or would they rather user short codes?
My recommendation is to build a plugin that render the section within the document content. Or widget content if that is the case.
I wrote a little piece of code to illustrate how you can accomplish such a thing, and also because I kind of need it right now :D. You can find it on github here https://github.com/lionpage/Front-Office-Document-Sections
Hope this helps
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php // echo wp function to get product data; ?>
</div>
<div id="about_company">
<?php // echo wp function to get about companydata; ?>
</div>
I've run into this issue several times now, and while the question is 3 years old, I think it's still rather current. I've succesfully used the Multiple Content Blocks plugin sometimes now:
https://ltz.wordpress.org/plugins/multiple-content-blocks/
After installing the plugin, you can just include the_block in your template:
<div id="maintext">
<?php the_content(); ?>
</div>
<div id="products">
<?php the_block('products') ?>
</div>
<div id="about_company">
<?php the_block('company') ?>
</div>
hi im currently developing a theme with that set up.
there are two ways to achieve this:
widgetized and fixed admin panel (customizer options)
i am using the two in my themes
if widgets
create a .php file that includes the widgets sections
create a widget for that section
if fixed in admin panel
you have to include the .php section in your functions.php
edit * advantage of widgetized is you can arrange them just like in a regular sidebar
Was struggling with this, and did not want to use a plugin. The only WordPress native option I found was to use Custom Fields. This works, but only for text, and is rather cumbersome.
The other non-plugin option is to simply use HTML in the WordPress editor, but this is of course far from ideal either.
Finally I gave up, and opted for the Advanced Custom Fields plugin as well.

drupal multi level top navigation

i'm new to drupal, but i have a good knowledge about php, and html/css.
I have this drupal site where the primary menu has 2 levels.
In the page.tpl.php of the theme is see this line:
<div class="pr-menu">
<?php print theme('links', $primary_links, array('class' => 'links primary-links')) ?>
</div>
the $primary_links variable seems to only hold an array with the first level menu items.
Now my question is: what is the best way to load the entire primary menu as an unordered list in stead of the first level primary links that are displayed now?
Nice, see the Drupal 6 code here, I believe it will also pay attention to what is set as the primary menu source (in /admin/build/menu/settings ):
http://drupal.org/node/68578
Finally found some kind of solution, after looking a bit trough the existing functions in menu.inc
For anyone interested, here is the code to put in your theme's page.tpl.php file, instead of the default primary link code:
<div class="pr-menu">
<?php print menu_tree('primary-links'); ?>
</div>
menu_tree() will return the primary menu as a multi level html-list with all the most important properties (first, last, active,...) accessible trough css classes.

Wordpress 3 plugin to control widget visibility

Coming from a Joomla background one of the fist things I realised is that Wordpress 3 doesn't have native support for controlling the visibility of widgets (modules in Joomla).
I've tried:
Dynamic widgets - http://wordpress.org/extend/plugins/dynamic-widgets/screenshots/ but it seems to break the admin menus.
Also tried Widget context - but it doesn't display correctly and doesn't allow granularity on the page visibility level.
Can anybody recommend a solution?
Try Widget Logic -- http://wordpress.org/extend/plugins/widget-logic/
Hope this helps!
-æ.
You can use Display Widgets. It adds checkboxes to each widget to either show or hide it on every site page: http://wordpress.org/extend/plugins/display-widgets/screenshots/
Make sure to disable other similar plugins to avoid conflict.
Example from sidebar.php:
<div class="sidebar-box border-radius-6px">
<h2>Dream Categories</h2>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!-- Sidebar Box End -->
Lets say you want to display this only on a page called "about-us". use is_page() function provided by wordpress.
<?php if(is_page('about-us')) { ?>
<div class="sidebar-box border-radius-6px">
<h2>Dream Categories</h2>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!-- Sidebar Box End -->
<?php } ?>
And as for the user level:
<?php if(current_user_can('level_10')) { // Level 10 = Administrator ?>
<div class="sidebar-box border-radius-6px">
<h2>Dream Categories</h2>
<ul>
<?php wp_list_categories('title_li='); ?>
</ul>
</div><!-- Sidebar Box End -->
<?php } ?>
Please see Wordpress User Levels
PS: I saw the plugin provided by aendrew and I had a look at it.
Try this:
Make a backup of widget_login.php file then open it, search for line 75 and replace it with update_option("widget_logic", "is_page('" . $wl_options . "')"); This should easy up the stuff a little, when you limit a widget you have to add is_page('bla-bla') in that input that line should only require bla-bla (If the page is called Bla Bla) [not tested, but you can give it a try.]
Try this:
http://wordpress.org/extend/plugins/conditional-widgets/
Really user friendly, hope it helps
For anyone still looking for a plugin for this purpose, check out my plugin Widget Visibility.
It's user friendly (uses checkboxes) and works inside the WordPress customizer too.

Resources