OceanWP

https://docs.oceanwp.org
Admin
OceanWP is a highly customizable, lightweight WordPress theme designed for creating responsive...
Tokens:51,992
Snippets:972
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Customized Login Shortcode

Source: https://docs.oceanwp.org/article/373-oceanwplogin-shortcode

An example of using parameters to define a custom login URL and a logout redirect to the current page.

```shortcode
[oceanwp_login custom_url="your-site.com/login" logout_redirect="current"]
```

--------------------------------

### Basic Login Shortcode

Source: https://docs.oceanwp.org/article/373-oceanwplogin-shortcode

The default implementation of the login shortcode.

```shortcode
[oceanwp_login]
```

--------------------------------

### Using the Popup Login Shortcode

Source: https://docs.oceanwp.org/article/499-how-to-show-popup-login-link

Place this shortcode in your content to render the login link with custom text attributes.

```shortcode
[oceanwp_popup_login login_text="Join Us" logout_text="Disconnect"]
```

--------------------------------

### Display site URL with target attribute

Source: https://docs.oceanwp.org/article/372-oceanwpsiteurl-shortcode

Usage of the shortcode with a target attribute to specify how the link opens.

```shortcode
[oceanwp_site_url target="blank"]
```

--------------------------------

### Display site URL shortcode

Source: https://docs.oceanwp.org/article/372-oceanwpsiteurl-shortcode

Basic usage of the shortcode to display a link to the home page.

```shortcode
[oceanwp_site_url]
```

--------------------------------

### Register a new social sharing site

Source: https://docs.oceanwp.org/article/306-add-remove-edit-the-social-product-sharing-links

Use this filter in your child theme's functions.php to register a new social sharing platform, such as WhatsApp, after adding it to the template file.

```php
add_filter( 'ops_product_sharing_sites_filter', 'add_whatsapp_to_socials' );

function add_whatsapp_to_socials( $socials ) {
  if ( is_array( $socials ) && ! in_array( 'whatsapp', $socials, true ) ) {
    $socials[] = 'whatsapp';
  }
  return $socials;
}
```

--------------------------------

### Using the Popup Login HTML Class

Source: https://docs.oceanwp.org/article/499-how-to-show-popup-login-link

Use this anchor tag structure to trigger the popup login form when the position is set to manual.

```html
<a href="#opl-login-form" class="opl-link">Login/Register</a>
```

--------------------------------

### Update Icon Class for OceanWP 2.0.9+

Source: https://docs.oceanwp.org/article/365-add-new-social-options-for-the-top-bar-and-the-social-menu

Use this syntax for icon classes if you are running OceanWP version 2.0.9 or later.

```php
'icon_class' => 'fab fa-tripadvisor',
```

```php
'icon_class' => oceanwp_icon( 'tripadvisor', false),
```

--------------------------------

### Center Blog Entry Content CSS

Source: https://docs.oceanwp.org/article/279-center-blog-entry-content

Applies centering to blog posts and inline-block display to metadata list items. Add this to a child theme's style.css or the Custom CSS panel.

```css
/* Center Blog Entry Content */
.blog-entry.post {
    text-align: center;
}

ul.meta li {
    float: none;
    display: inline-block;
}
```

--------------------------------

### Responsive CSS for WooCommerce Download Table

Source: https://docs.oceanwp.org/article/596-make-order-and-download-section-responsive-under-my-account-page

Applies a mobile-friendly layout to the shop_table_responsive class, ensuring headers are hidden and cells are stacked.

```css
@media screen and (max-width: 767px) {
.woocommerce table.shop_table_responsive thead, .woocommerce-page table.shop_table_responsive thead {
    display: none;
}
.woocommerce table.shop_table_responsive tr td::before, .woocommerce-page table.shop_table_responsive tr td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
}
.woocommerce table.shop_table_responsive tr td, .woocommerce-page table.shop_table_responsive tr td {
    display: block;
    text-align: right!important;
}
}
```

--------------------------------

### Register custom icons with oceanwp_theme_icons

Source: https://docs.oceanwp.org/article/780-add-new-icons-oceanwp-theme-icons-list

Use this filter in your child theme's functions.php file to add new icons. All parameters (sili, fai, svg) must be defined for each icon entry.

```php
// Add new icons to OceanWP theme icons array.
function add_new_icons( $icons) {
	$icons['whatsapp']= array(
                'sili' => 'fab fa-whatsapp',
                'fai'  => 'fab fa-whatsapp',
                'svg'  => 'fab fa-whatsapp',
            ); // For adding multiple icons copy this entire area and apply changes accordingly to the icon name and values.

	return $icons;
}
add_filter( 'oceanwp_theme_icons', 'add_new_icons' );
```

--------------------------------

### Change Single Blog Post Metadata Font Size and Color

Source: https://docs.oceanwp.org/article/633-change-single-post-metadata-font-size-color

Modifies the font size and text color for metadata elements like the date.

```css
/* Single Blog Post Metadata Font Size and Color */
.single-post ul.meta {
font-size: 16px;
color: #000;
}
```

--------------------------------

### Exclude Ocean Sticky Header Directory

Source: https://docs.oceanwp.org/article/727-sticky-header-doesnt-function-autoptimize

Add this path to the Autoptimize exclusion list to ensure the sticky header functions correctly while using aggregation.

```text
wp-content/plugins/ocean-sticky-header
```

--------------------------------

### Register New Social Options

Source: https://docs.oceanwp.org/article/365-add-new-social-options-for-the-top-bar-and-the-social-menu

Add custom social links to the Customizer by hooking into the 'ocean_social_options' filter in your child theme's functions.php file.

```php
/**
 * Add new social options in the Customizer
 */
function my_ocean_social_options( $array ) {

	// TripAdvisor icon
	$array['tripadvisor'] = array(
		'label' => 'TripAdvisor',
		'icon_class' => 'fab fa-tripadvisor',
	);

	// Amazon icon
	$array['amazon'] = array(
		'label' => 'Amazon',
		'icon_class' => 'fab fa-amazon',
	);

	// Return
	return $array;

}
add_filter( 'ocean_social_options', 'my_ocean_social_options' );
```

--------------------------------

### Adding Custom Content via Hooks

Source: https://docs.oceanwp.org/article/377-how-to-use-hooks

Use this pattern to inject custom content into specific theme locations. Replace 'hook_name' with the desired hook and add the code to your child theme's functions.php file.

```php
function your_function_name() { ?>
	Insert your custom content here
<?php
}
add_filter( 'hook_name', 'your_function_name' );
```

--------------------------------

### Register New Social Profiles via PHP

Source: https://docs.oceanwp.org/article/639-add-new-social-options-to-about-me-widget

Add custom social media options to the About Me widget by filtering the profile array. Ensure the Ocean Extra plugin is active for these changes to take effect in the widget area.

```php
/**
 * Add new social options to the Social Links Widget
 */
function my_ocean_about_me_widget_profiles( $array ) {

	// TripAdvisor icon
	$array['tripadvisor'] = array(
		'name' => 'TripAdvisor',
		'icon_class' => 'fab fa-tripadvisor',
	);

	// Amazon icon
	$array['amazon'] = array(
		'name' => 'Amazon',
		'icon_class' => 'fab fa-amazon',
	);
	
	// Line icon
	$array['line'] = array(
		'name' => 'Line',
		'icon_class' => 'fab fa-line',
	);
	
	// QQ icon
	$array['qq'] = array(
		'name' => 'QQ',
		'icon_class' => 'fab fa-qq',
	);
	
	// Weibo icon
	$array['weibo'] = array(
		'name' => 'Weibo',
		'icon_class' => 'fab fa-weibo',
	);
	
	// Weixin icon
	$array['weixin'] = array(
		'name' => 'Weixin',
		'icon_class' => 'fab fa-weixin',
	);

	// Return
	return $array;

}
add_filter( 'ocean_about_me_widget_profiles', 'my_ocean_about_me_widget_profiles' );
```

--------------------------------

### Change Single Blog Post Metadata Icon Color

Source: https://docs.oceanwp.org/article/633-change-single-post-metadata-font-size-color

Modifies the color of icons displayed before metadata text.

```css
/* Single Blog Post Metadata Icon Color */
.single-post ul.meta li i {
color: #000;
}
```

--------------------------------

### Displaying Navigation with Shortcodes

Source: https://docs.oceanwp.org/article/355-how-to-create-a-custom-header

Use these shortcodes to insert the logo or navigation menu when page builder widgets are unavailable. The position attribute supports left, right, or center alignment.

```text
[oceanwp_logo]
```

```text
[oceanwp_nav]
```

```text
[oceanwp_nav position="right"]
```

--------------------------------

### Responsive CSS for WooCommerce Order Table

Source: https://docs.oceanwp.org/article/596-make-order-and-download-section-responsive-under-my-account-page

Applies a mobile-friendly layout to the shop_table by hiding the header and using data-title attributes for cell labels.

```css
@media screen and (max-width: 767px) {
.woocommerce table.shop_table thead {
    display: none;
}
.woocommerce table.shop_table td {
    display: block;
    text-align: right!important;
}
.woocommerce table.shop_table td::before {
    content: attr(data-title) ": ";
    font-weight: 700;
    float: left;
}
}
```

--------------------------------

### Register New Footer Widget Column in PHP

Source: https://docs.oceanwp.org/article/432-add-a-new-footer-widgets-column

Use this snippet in your child theme's functions.php file to define the number of columns and register the new sidebar area.

```php
/**
 * Add your own footer widgets columns
 * @return Add a number between 1 to 7
 */
function my_footer_widgets_columns() {

	// Add your column number
	$columns = '5';

	// Return
	return $columns;

}
add_filter( 'ocean_footer_widgets_columns', 'my_footer_widgets_columns' );

/**
 * Create a new footer widget area
 */
function my_footer_widget_area() {

	// Footer 5
	register_sidebar( array(
		'name'			=> esc_html__( 'Footer 5', 'oceanwp' ),
		'id'			=> 'footer-five',
		'description'	=> esc_html__( 'Widgets in this area are used in the fifth footer region.', 'oceanwp' ),
		'before_widget'	=> '<div class="footer-widget %2$s clr">',
		'after_widget'	=> '</div>',
		'before_title'	=> '<h6 class="widget-title">',
		'after_title'	=> '</h6>',
	) );

}
add_action( 'widgets_init', 'my_footer_widget_area', 11 );
```

--------------------------------

### Style Social Share Buttons with CSS

Source: https://docs.oceanwp.org/article/461-add-social-share-buttons-under-the-short-description

Add these styles to your child theme's style.css file to format the social share buttons.

```css
.woocommerce div.product .my-social-share {
	display: block;
	margin-top: 15px; 
}
.woocommerce div.product .my-social-share ul {
	float: none;
}
.woocommerce div.product .my-social-share ul li {
	float: left;
	margin-right: 10px;
}
.woocommerce div.product .my-social-share ul li:last-child {
	margin-right: 0;
}
.woocommerce div.product .my-social-share ul li a {
	display: inline-block;
	font-size: 16px;
	line-height: 1.5;
	width: 40px;
	height: 40px;
	line-height: 40px;
	color: #fff;
	border-radius: 50%;
	text-align: center;
}
.woocommerce div.product .my-social-share ul li a:hover {
	opacity: 0.6;
}
.woocommerce div.product .my-social-share ul li.twitter a {
	background-color: #00aced;
}
.woocommerce div.product .my-social-share ul li.facebook a {
	background-color: #3b5998;
}
.woocommerce div.product .my-social-share ul li.pinterest a {
	background-color: #cb2027;
}
.woocommerce div.product .my-social-share ul li.email a {
	background-color: #3fc387;
}
```

--------------------------------

### CSS for Single Post Background Color

Source: https://docs.oceanwp.org/article/720-alter-single-post-background-color

Use this CSS rule to target the .single-post class and set a custom background color.

```css
/* Single Post Background Color */
.single-post {
background-color: #fff;
}
```

--------------------------------

### Add Footer Column Markup to Template

Source: https://docs.oceanwp.org/article/432-add-a-new-footer-widgets-column

Add this HTML snippet to your child theme's partials/footer/widgets.php file to render the new column.

```html
<div class="footer-box <?php echo esc_attr( $grid_class ); ?> col col-5">
	<?php dynamic_sidebar( 'footer-five' ); ?>
</div><!-- .footer-box -->
```

--------------------------------

### Set Footer Widgets to Full Width

Source: https://docs.oceanwp.org/article/456-make-the-footer-widgets-full-width

Apply this CSS to a child theme's style.css or the Custom CSS panel to override default container constraints.

```css
#footer-widgets .container {
    width: 100%;
    max-width: 100%;
}
```

--------------------------------

### CSS for Blog Archive Background Color

Source: https://docs.oceanwp.org/article/721-alter-blog-archive-background-color

Apply this CSS to a child theme's style.css or the Custom CSS panel to change the background color of archive and category pages.

```css
/* Blog Archive Background Color */
.category, .archive {
background-color: #fff;
}
```

--------------------------------

### Change Single Blog Post Metadata Link Color

Source: https://docs.oceanwp.org/article/633-change-single-post-metadata-font-size-color

Modifies the color of metadata links, such as category links.

```css
/* Single Blog Post Metadata Link Color */
.single-post ul.meta li a {
color: #000;
}
```

--------------------------------

### Import Custom Font via CSS

Source: https://docs.oceanwp.org/article/128-how-to-add-custom-fonts

Use the @font-face rule in your child theme's style.css to define the font family and source paths.

```css
@font-face {
    font-family: 'Your Custom Font';
    src: url('fonts/webfont.eot'); /* IE9 Compat Modes */
    src: url('fonts/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('fonts/webfont.woff') format('woff'), /* Modern Browsers */
         url('fonts/webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('fonts/webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
```
Tokens:
Raw